как включить файлы, которые пропускает sw-precache - PullRequest
Новая
       18

как включить файлы, которые пропускает sw-precache

0 голосов
/ 30 октября 2018

Context

Я использую parcel-plugin-sw-precache, который использует sw-precache для работы с Parcel.js. Все работало, как и ожидалось, и я тестировал свое автономное приложение.

Задача

Я добавил response-pdf.js в свой проект, одна из зависимостей для этой библиотеки не добавляется в сервисный работник, когда она генерируется sw-precache. Я знаю это, потому что файл "pdf.worker.entry.7ce4fb6a.js" выдает ошибку 304 при переключении в автономный режим.

Что я пробовал

Я пытаюсь добавить файл вручную в конфигурацию package.json parcel-plugin-sw-precache, используя этот код: 

 "sw-precache": {
    "maximumFileSizeToCacheInBytes": 10485760,
    "staticFileGlobs": [
      "/pdf.worker.entry.7ce4fb6a.js"
    ]
  },

Я не уверен, должен ли путь файла указываться относительно package.json или относительно сгенерированного сервисного работника. В любом случае, указанный вручную файл не добавляется для создания работника служб, как я ожидал. Как видно ниже. 

self.__precacheManifest = [{
  "url": "index.html",
  "revision": "ac5ace7a43a0fef7ae65fd3119987d1f"
}, {
  "url": "castly.e31bb0bc.css",
  "revision": "657409f7159cb857b9409c44a15e653f"
}, {
  "url": "castly.e31bb0bc.js",
  "revision": "018d4664d809ec19d167421b359823ad"
}, {
  "url": "/",
  "revision": "af5513bb330deae3098ab289d69a40c7"
}]

Вопрос

Если в sw-precache или parcel-plugin-sw-precache отсутствуют некоторые файлы, как я могу убедиться, что они добавлены в сгенерированный сервисный работник?

1 Ответ

0 голосов
/ 31 октября 2018

В моем поиске ответа. Я отказался от использования parcel-plugin-sw-precache и вместо этого переключился на использование workbox Если вы заинтересованы в создании автономного приложения с Parcel.js. Тогда я рекомендую Workbox, поскольку это следующее поколение sw-precache.

Вот как у меня это работает:

Обучение

Узнайте, что такое Workbox и что делает с этой кодовой лабораторией.

Implimenting

1) Установить CLI Workbox глобально.
2) создать работника службы размещения в корневом каталоге. например sw_shell.js - Оболочка является удерживающим файлом. Мастер Workbox подберет его и сгенерирует новый файл sw.js автоматически. 3) Добавьте в файл sw_config.js следующий код: 

importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js");

if (workbox) {
workbox.skipWaiting();
workbox.clientsClaim();
workbox.precaching.suppressWarnings();

// The next line came from the code lab
workbox.precaching.precacheAndRoute([]);
workbox.routing.registerNavigationRoute("/index.html");
} else {
  console.log(`Boo! Workbox didn't load ?`);
}

4) Запустите этот код из командной строки, открытой в корневом каталоге вашего проекта. 

workbox wizard --injectManifest

5) Следуйте инструкциям мастера. В целях разработки укажите «корневое веб-приложение» в папке dist. Workbox работает по волшебству и собирает эти файлы для хеширования в новый файл sw.js.

6) Мастер запросит ваш существующий файл sw.js. В моем случае я использую sw_shell.js.

a: рабочая коробка забирает файл sw_shell.js.
c: Создает как новый файл sw.js в месте, указанном при запуске мастера, и вводит файлы для запуска в автономном режиме.

В моем случае я разрешил генерации нового sw.js в моей корневой папке, потому что Parcel подхватывает его автоматически в соответствии со сценарием в моем index.js. 

'use strict';
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('sw.js').then(function(reg) {
      console.log('Worker registration started')
      reg.onupdatefound = function() {
         console.log('update found')
        var installingWorker = reg.installing;
        installingWorker.onstatechange = function() {

          console.log('installing worker')
          switch (installingWorker.state) {

            case 'installed':
              if (navigator.serviceWorker.controller) {
                console.log('New or updated content is available.');
              } else {
                console.log('Content is now available offline!');
              }
              break;

            case 'redundant':
              console.error('The installing service worker became redundant.');
              break;
          }
        };
      };
    }).catch(function(e) {
      console.error('Error during service worker registration:', e);
    });
  });
}

7) Добавьте workbox injectManifest в ваш package.json, чтобы убедиться, что Workbox регистрирует любые изменения в ваших файлах: 

  "scripts": {
    "start": "parcel index.html workbox injectManifest"
}

Дайте мне знать, если вы хотите узнать больше об этом. Здесь есть видео , которое мне тоже немного помогло.

...