Reactjs 使用create react app添加更多服务人员功能

因此，CreateReact应用程序包含服务人员功能，这很可爱——我所有的静态资产都会被缓存起来，以便脱机使用。很酷，但现在我想更进一步，使用indexedDB缓存一些动态内容

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

---

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

正如您所观察到的，

create react app的配置被锁定，服务工作者逻辑完全在配置中定义

如果您不想弹出，但想进行一些定制，另一个选项是修改
create-react-app
build过程，在正常构建完成后显式调用
sw-precache
CLI，覆盖默认情况下
create-react-app
生成的
service worker.js
。因为这涉及到修改本地的
package.json
，所以不需要先弹出

这里有一些关于这种方法的信息，总体思路是修改
npm
脚本，使其看起来像：

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

根据您的需要使用
sw precache config.js
，但包括

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

为了确保内置的
service worker.js
被覆盖。
我也有同样的问题，在不执行
eject
的情况下，我可以将默认的
service worker
替换为
workbox
生成的，以添加运行时缓存webfonts、api调用等

安装
workbox build
准备
src/sw template.js
以添加您的
registerRoute
调用
准备
/build sw.js
将workbox文件复制到“build”文件夹和
injectManifest
修改
package.json
脚本以在
build sw.js
修改
src/registerServiceWorker.js
以替换默认的
您可以找到。
AFIK您必须先弹出您的应用程序，然后才能编辑它的
service worker
Try，您还可以按照此处了解有关Sass的更多详细信息。有关Sass的详细信息，您可以添加您的研究。哈哈。。。谢谢，杰夫。这看起来很有希望。因此，使用这种方法，我将如何将自己的代码放入service-worker.js文件中？查看sw precache文档，可能类似于importScripts选项？软件工具箱看起来也很有前途。。。我走对了吗？事实上@Jeff，我刚刚看了你的节目。看起来棒极了。不知道我是否可以使用类似于
“build”：“react scripts build&&workbox cli generate:sw--config file=workbox config.js”
的内容来覆盖service-worker.js文件？是的，绝对可以。您也可以这样做。另请参见：