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",

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

即使我在配置文件中提到了服务工作者名称应为“ serviceWorker.js”，构建过程仍在生成两个服务工作者文件-

serviceWorker.js和service-worker.js
在生成的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，这应该可以解决。

在响应中使用sw-precache生成服务工作器的问题

1 个答案: