Webpack - Сервисный работник

Question

У меня проблема с разработкой PWA. Я использую веб-пакет и видел несколько структур для создания сервисных работников. Но я хотел бы иметь возможность создать его сам, чтобы понять, как это работает. Однако я не могу установить связь между сервисным работником, которого я создал в моем файле src, и веб-пакетом. Кто-нибудь знает, как это сделать? Спасибо

Answer 1

Карен, верно! Это правильный плагин для вашей проблемы.

Я просто хочу добавить здесь немного описания.

Вам необходимо пройти 3 шага, чтобы правильно зарегистрировать свой sw.js (работник службы), как описано здесь .

1. Добавьте плагин в конфигурацию вашего веб-пакета, Do npm i -D serviceworker-webpack-plugin. И добавьте этот код к вашему webpack.config.js

   import ServiceWorkerWebpackPlugin from 'serviceworker-webpack-plugin';
   
   ...
   
   plugins: [
       new ServiceWorkerWebpackPlugin({
         entry: path.join(__dirname, 'src/sw.js'),
       }),
   ],
   

2. Зарегистрируйте работника службы в основной ветке JS. Просто добавьте этот блок кода где-нибудь в начале вашего скрипта.

   import runtime from 'serviceworker-webpack-plugin/lib/runtime';
   
   if ('serviceWorker' in navigator) {
     const registration = runtime.register();
   }
   

3. Напишите свой собственный sw.js. Создайте файл sw.js внутри src floder и просто вставьте код из примера плагина . Имя файла и пароль настраиваются с помощью параметров плагина. Важно : внутри sw.js у вас есть доступ к global.serviceWorkerOption.assets. Таким образом, вы можете управлять всеми своими скомпилированными файлами (даже если у вас нет их окончательных имен). Если вы хотите создать sw.js с нуля, посмотрите google docs для получения дополнительной информации .

   ...
   const { assets } = global.serviceWorkerOption;
   ...
   

Answer 2

Загляните в этот плагин https://github.com/oliviertassinari/serviceworker-webpack-plugin

Это должно решить вашу проблему.