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

Question

create-react-app默认包含服务工作器功能，这很棒-我的所有静态资源都可以直接离线缓存使用。但现在我想进一步使用indexedDB缓存一些动态内容。

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

是否有一种方法可以添加其他逻辑而不必弹出create-react-app或重做所有不错的静态缓存内容？

- Daniel Loiterton

---

据我所知，在编辑service-worker之前，您需要弹出应用程序。 - BlackBeard

尝试使用Sass与Create React App（无需弹出），您还可以参考medium.com的这篇文章获取有关Sass的其他详细信息。有关Sass的详细信息，请访问此网站以进行研究。 - MαπμQμαπkγVπ.0

Answer 1

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

如果您不想 eject，但仍希望进行一些自定义，则另一个选项是修改 create-react-app 的构建过程，以在常规构建完成后显式调用 sw-precache CLI，覆盖默认生成的 service-worker.js。由于这涉及修改本地的 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被覆盖。

- Jeff Posnick

---

啊哈...谢谢，Jeff。这看起来很有前途。那么，使用这种方法，我该如何将自己的代码放入service-worker.js文件中呢？看一下sw-precache文档，也许可以使用importScripts选项？sw-toolbox看起来也很有前途...我是不是走在正确的道路上？ - Daniel Loiterton

实际上，@Jeff，我刚刚看了你在ChromeDevSummit的演讲，关于Workbox。看起来很棒。不知道我是否可以使用类似"build": "react-scripts build && workbox-cli generate:sw --config-file=workbox-config.js"这样的东西来覆盖service-worker.js文件？ - Daniel Loiterton

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

参见：https://github.com/facebook/create-react-app/issues/9141 - Jeff Posnick

嘿，杰夫，你知道如何合并两个服务工作者吗？我想为 PWA 添加通知功能，但是没有太多资源告诉我该如何实现。 - Art

Answer 2

我遇到了同样的问题，但是没有使用 eject 命令，我可以用由 workbox 生成的默认 service-worker 替换掉默认的 service-worker，以实现在运行时缓存 webfonts、api 调用等功能。

以下是具体步骤：

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

你可以在这里查看详细的文件更改内容。

- bob