使用 create-react-app 添加更多 service-worker 功能
Add more service-worker functionality with create-react-app
所以 create-react-app 包含服务工作者功能 by default，这很可爱 - 我所有的静态资产都被缓存以供离线使用，开箱即用。很酷，但现在我想更进一步，使用 indexedDB 来缓存一些动态内容。
问题是，没有要修改的服务-worker.js 文件。它在构建过程中生成。
有没有办法在不弹出 create-react-app 或重做所有漂亮的静态缓存的情况下添加额外的逻辑？
正如您所观察到的，create-react-app 的配置已锁定，服务工作者逻辑完全在配置中定义。
如果您不想 eject 但想要一些自定义，另一种选择是修改 create-react-app 构建过程以显式调用 sw-precache CLI 在 正常构建完成后，覆盖 create-react-app 默认生成的 service-worker.js。因为这涉及修改您的本地 package.json，所以不需要先 ejecting。
有一些关于这种方法的信息 here，一般的想法是修改您的 npm 脚本，使其看起来像：
"build": "react-scripts build && sw-precache --config=sw-precache-config.js"
有sw-precache-config.js configured 根据您的需要，但包括
swFilePath: './build/service-worker.js'
确保内置service-worker.js被覆盖
我遇到了同样的问题，但没有做 eject，我可以用 workbox 生成的替换默认的 service-worker 来添加 运行 时间缓存网络字体，api来电等
- 安装
workbox-build
- 准备
src/sw-template.js 添加您的 registerRoute 个调用
- 准备
/build-sw.js 将工作箱文件复制到 'build' 文件夹和 injectManifest
- 将
package.json 脚本修改为 运行 以上 build-sw.js
- 修改
src/registerServiceWorker.js替换默认
所以 create-react-app 包含服务工作者功能 by default，这很可爱 - 我所有的静态资产都被缓存以供离线使用，开箱即用。很酷，但现在我想更进一步，使用 indexedDB 来缓存一些动态内容。
问题是，没有要修改的服务-worker.js 文件。它在构建过程中生成。
有没有办法在不弹出 create-react-app 或重做所有漂亮的静态缓存的情况下添加额外的逻辑？
正如您所观察到的，create-react-app 的配置已锁定，服务工作者逻辑完全在配置中定义。
如果您不想 eject 但想要一些自定义，另一种选择是修改 create-react-app 构建过程以显式调用 sw-precache CLI 在 正常构建完成后，覆盖 create-react-app 默认生成的 service-worker.js。因为这涉及修改您的本地 package.json，所以不需要先 ejecting。
有一些关于这种方法的信息 here，一般的想法是修改您的 npm 脚本，使其看起来像：
"build": "react-scripts build && sw-precache --config=sw-precache-config.js"
有sw-precache-config.js configured 根据您的需要，但包括
swFilePath: './build/service-worker.js'
确保内置service-worker.js被覆盖
我遇到了同样的问题，但没有做 eject，我可以用 workbox 生成的替换默认的 service-worker 来添加 运行 时间缓存网络字体，api来电等
- 安装
workbox-build - 准备
src/sw-template.js添加您的registerRoute个调用 - 准备
/build-sw.js将工作箱文件复制到 'build' 文件夹和injectManifest - 将
package.json脚本修改为 运行 以上build-sw.js - 修改
src/registerServiceWorker.js替换默认