使用create-react-app添加更多服务工作者功能

Question

因此,create-react-app 默认包含服务工作者功能,这很可爱 - 我的所有静态资产都可以开箱即用于离线使用.很酷,但现在我想更进一步,并使用indexedDB缓存一些动态内容.

问题是,没有要修改的service-worker.js文件.它在构建过程中生成.

有没有办法添加额外的逻辑,而无需弹出create-react-app或重做所有漂亮的静态缓存内容？

Answer 1

正如您所观察到的那样,create-react-app配置被锁定,服务工作者逻辑完全在配置中定义.

如果你不想eject但你想要一些自定义,另一个选择是修改create-react-app构建过程以在正常构建完成后显式调用sw-precacheCLI ,覆盖默认生成的那个.因为这涉及到修改本地,所以不需要先进行本地修改.service-worker.jscreate-react-apppackage.jsoneject

这里有一些关于这种方法的信息,一般的想法是将npm脚本修改为:

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

随着sw-precache-config.js 配置根据您的需求,但包括

swFilePath: './build/service-worker.js'

确保内置service-worker.js被覆盖.

Answer 2

我有同样的问题,没有做eject,我可以service-worker用workbox生成的一个替换默认值来添加运行时缓存webfonts,api调用等.

1. 安装 workbox-build
2. 准备src/sw-template.js添加你的registerRoute电话
3. 准备/build-sw.js将工作箱文件复制到'build'文件夹和injectManifest
4. 修改package.json脚本以在上面运行build-sw.js
5. 修改src/registerServiceWorker.js以替换默认值

您可以在此处找到详细的文件更改.