使用 create-react-app 添加更多 service-worker 功能

Posted 2023-02-19

【中文标题】使用 create-react-app 添加更多 service-worker 功能

【英文标题】：Add more service-worker functionality with create-react-app

【发布时间】：2018-05-18 02:51:09

【问题描述】：

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

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

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

【问题讨论】：

AFIK 你必须先弹出你的应用程序才能编辑它service-worker

试试Using Sass with Create React App (Without Ejecting)，你也可以关注this post by medium.com，了解更多关于Sass的细节。有关 Sass 的详细信息，here is some site 您可以添加您的研究。

【参考方案1】：

正如您所观察到的，create-react-app 的配置被锁定，并且 service worker 逻辑完全在配置中定义。

如果您不想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.jsconfigured 根据您的需要，但包括

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

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

【讨论】：

啊哈...谢谢，杰夫。这看起来很有希望。那么使用这种方法，我如何将自己的代码放入 service-worker.js 文件中？查看 sw-precache 文档，可能类似于 importScripts 选项？ sw-toolbox 看起来也很有前途……我在正确的轨道上吗？

其实@Jeff，我刚刚看了你的talk from ChromeDevSummit 关于Workbox。看起来真棒。想知道我是否可以使用 "build": "react-scripts build && workbox-cli generate:sw --config-file=workbox-config.js" 之类的东西来覆盖 service-worker.js 文件？

是的，当然。你也可以这样做。

另见：github.com/facebook/create-react-app/issues/9141

【参考方案2】：

我也遇到了同样的问题，不做eject，我可以用workbox-generated 替换默认的service-worker，以添加运行时缓存webfonts、api 调用等。

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

你可以找到detailed file changes here。