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

Question

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

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

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

Answer 1

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

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

这里有一些关于这种方法的信息 ，一般的想法是修改你的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 -生成一个补充运行缓存网络字体，API调用等。

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

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