在 React 中使用 sw-precache 生成服务工作者的问题

Question

我使用 create-react-app 创建了一个 React 应用程序。然后我决定根据需要 edit/update service worker 代码。

我正在尝试使用 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",

但是，构建后我面临两个问题 -

尽管我在配置文件中提到服务工作者名称应该是 'serviceWorker.js'，但构建过程正在生成两个服务工作者文件 -

serviceWorker.js 和服务-worker.js
在生成的 serviceWorker.js（由构建脚本构建）中，预缓存中未提及 'index.html' 文件（因此服务人员未缓存 index.html 按预期）-

var precacheConfig =<br> [["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","3b44b5daad3fcbefa8b3559dfbc3"] ];

如果我能澄清任何其他问题，请告诉我。

Answer 1

将staticFileGlobs中的index.html替换为build/index.html

您将获得两个服务工作者文件，因为您指定的名称：serviceWorker.js 与 CRA 使用的默认名称不同：service-worker.js

将您的 swFilePath 更改为 service-worker.js，这应该可以解决问题。

在 React 中使用 sw-precache 生成服务工作者的问题

Issue generating Service worker with sw-precache in react

reactjs

service-worker

sw-precache