Reactjs 在react中使用sw precache生成服务工作人员的问题
我已使用create react app创建了一个react应用程序。 然后我决定根据需要编辑/更新服务人员代码 我现在正在尝试使用sw-precache构建应用程序,以帮助构建自定义服务工作程序并自动引用散列静态文件 这是我在“sw precache config.js”中使用的配置-Reactjs 在react中使用sw precache生成服务工作人员的问题,reactjs,service-worker,sw-precache,Reactjs,Service Worker,Sw Precache,我已使用create react app创建了一个react应用程序。 然后我决定根据需要编辑/更新服务人员代码 我现在正在尝试使用sw-precache构建应用程序,以帮助构建自定义服务工作程序并自动引用散列静态文件 这是我在“sw precache config.js”中使用的配置- module.exports = { staticFileGlobs: [ 'build/static/css/**.css', 'build/static/js/**.js', 'index.html',
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'
}]
}
这是my package.json中的build命令-
"build": "react-scripts build && sw-precache --config=sw-precache-config.js",
然而,在构建之后,我面临两个问题-
尽管我在配置文件中提到服务工作者名称应该是“serviceworner.js”,但构建过程正在生成两个服务工作者文件-
serviceWorker.js和service-worker.js
在由构建脚本生成的serviceWorker.js构建中,预缓存中没有提到'index.html'文件,因此服务工作者没有按预期缓存index.html-
变量precacheConfig=
[[static/css/main.d35a7300.chunk.css,5cf96316c69194ba6eb48522a076f0],[static/js/1.6105a37c.chunk.js,ae3537cefdcf8ee5758c3af13aab4568],[static/js/main.4857c4da.chunk.js,9d6cc8fb962129f3e8bc459c85d3997],[static/js/runtime~main.229c360f.js,3b44b5daadfcbefa8b355dfbc3d9630]
如果我能澄清任何其他问题,请告诉我。将staticFileGlobs中的index.html替换为build/index.html
您将获得两个service worker文件,因为您指定的名称:serviceWorker.js与CRA附带的默认名称:service-worker.js不同
将您的swFilePath更改为service-worker.js,这应该可以解决它