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

Question

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

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

有没有办法在不弹出create-react-app或重做所有漂亮的静态缓存内容的情况下添加额外的逻辑？

Answer 1

正如您所看到的，{2=[2, 5, 23, 56, 77], 1=[1, 22, 43, 67], 0=[3, 6, 9, 87]} 的配置被锁定，服务工作者逻辑完全在配置中定义。

如果你不想create-react-app但你想要一些自定义，另一种选择是修改eject构建过程以在create-react-app CLI >正常构建已完成，覆盖sw-precache默认生成的service-worker.js。因为这涉及修改本地create-react-app，所以首先不需要package.json。

有关此方法的一些信息here，一般的想法是修改您的eject脚本，如下所示：

npm

根据您的需求"build": "react-scripts build && sw-precache --config=sw-precache-config.js" configured，但包括

sw-precache-config.js

确保覆盖内置swFilePath: './build/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以替换默认值

您可以找到detailed file changes here。