在響應中生成帶有sw-precache的Service Worker的問題

Question

我已經使用create-react-app創建了一個React應用。 然后，我決定需要根據需要編輯/更新服務人員代碼。

我現在嘗試使用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

您將得到兩個Service Worker文件，因為您指定的名稱： serviceWorker.js與CRA附帶的默認名稱不同： service-worker.js

將您的swFilePath更改為service-worker.js ，這應該可以對其進行修復。