Проблема создания работника службы с sw-precache в реакции

Question

Я создал приложение "Реакция" с помощью команды "Создать-Реакцию". Тогда я решил, что мне нужно отредактировать / обновить код работника сервиса в соответствии с моими потребностями.

Я пытаюсь собрать приложение сейчас, используя sw-precache (так как он должен помочь в создании пользовательского сервиса и автоматически ссылаться на хэшированные статические файлы).

Это конфигурация, которую я использую в 'sw-precache-config.js' -

module.exports = {
  staticFileGlobs: [
'build/static/css/**.css',
'build/static/js/**.js',
'index.html',
'/'
  ],
  swFilePath: './build/serviceWorker.js',
  templateFilePath: './service-worker.tmpl',
  stripPrefix: 'build/',
  handleFetch: false,
  runtimeCaching: [{
   urlPattern: /this\\.is\\.a\\.regex/,
  handler: 'networkFirst'
 }]
}

Это команда сборки в моем package.json -

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

Однако после сборки я столкнулся с двумя проблемами:

1. Несмотря на то, что я упомянул в файле конфигурации, что имя работника службы должно быть "serviceWorker.js", процесс сборки создает два файла работника службы:

   serviceWorker.js и service-worker.js

2. В сгенерированном serviceWorker.js (сборке с помощью сценария сборки) файл 'index.html' не упоминается в предварительном кэше (поэтому работник службы не кэширует index.html, как предполагалось) -

   var precacheConfig =
[["static/css/main.d35a7300.chunk.css","5cf96316c6919194ba6eb48522a076f0"],["static/js/1.6105a37c.chunk.js","ae3537cefdcf8ee5758c3af13aab4568"],["static/js/main.4857c4da.chunk.js","9d6cc8fb962129f3e8bc459c85d39297"],["static/js/runtime~main.229c360f.js","3b44b5daad3fcbefa8b355dfbc3d9630"]];

Пожалуйста, дайте мне знать, если я могу уточнить что-нибудь еще.

Answer 1

Замещать index.html в staticFileGlobs с build/index.html

Вы получаете два служебных рабочих файла, потому что вы указываете имя: serviceWorker.js отличается от имени по умолчанию CRA идет с: service-worker.js

Измени свой swFilePath в service-worker.js и это должно исправить это.