Добавьте дополнительные функции service-worker с помощью create-react-app

таким образом, create-react-app включает в себя функциональность service worker по умолчанию, что прекрасно - все мои статические активы кэшируются для автономного использования из коробки. Круто, но теперь я хочу пойти немного дальше и использовать indexedDB для кэширования динамического контента.

проблема в том, что нет сервисного работника.файл js для изменения. Он генерируется в процессе сборки.

есть ли способ добавить дополнительную логику без извлечения create-react-app или повторного выполнения все хорошее статическое кэширование?

10
create-react-app indexeddb progressive-web-apps reactjs service-worker

2 ответов

как вы заметили, заблокирована, и логика service worker полностью определена в конфигурации.

если вы не хотите eject но вы хотите некоторую настройку, другой вариант-изменить create-react-app процесс сборки для явного вызова sw-precache командной строки после обычная сборка завершена, перезапись service-worker.js это create-react-app создает по умолчанию. Потому что это включает в себя изменение вашего местного package.json, это не требует ejecting первый.

есть некоторая информация об этом подходе здесь, и общая идея заключается в изменении вашего npm скрипты выглядят примерно так:

"build": "react-scripts build && sw-precache --config=sw-precache-config.js"

С sw-precache-config.js настроить исходя из ваших потребностей, но в том числе

swFilePath: './build/service-worker.js'

для обеспечения того, чтобы встроенный service-worker.js перезаписывается.

10

у меня была такая же проблема и не делая eject, Я мог бы заменить значение по умолчанию service-worker С workbox - сгенерированный для добавления веб-фонтов кэширования времени выполнения, вызовов api и т. д.

  1. установить workbox-build
  2. готовить src/sw-template.js добавить код registerRoute звонки
  3. готовить /build-sw.js чтобы скопировать файл workbox в папку "build" и injectManifest
  4. изменить package.json скрипты для запуска выше build-sw.js
  5. изменить src/registerServiceWorker.js при установке по умолчанию один

вы можете найти подробные изменения файлов здесь.

6