在反应中使用 sw-precache 生成服务工作线程时出现问题

Question

我使用create-react-app创建了一个反应应用程序。 然后我决定需要根据需要编辑/更新服务工作者代码。

我现在正在尝试使用 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'
}]
}

这是我的包中的构建命令.json -

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

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

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

   服务工作者.js和服务工作者.js

2. 在生成的 serviceWorker.js(由构建脚本构建(中，预缓存中未提及"index.html"文件(因此服务工作者没有按预期缓存索引.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

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

您正在获取两个服务工作进程文件，因为您指定的名称：serviceWorker.js与 CRA 的默认名称不同：service-worker.js

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