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

因此 create-react-app 包含 Service Worker 功能默认情况下 https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app，这很可爱 - 我的所有静态资源都被缓存以供离线使用，开箱即用。很酷，但现在我想更进一步，使用 indexedDB 来缓存一些动态内容。

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

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

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

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

有一些关于这种方法的信息here https://github.com/facebookincubator/create-react-app/issues/3132#issuecomment-330610440，总体思路是修改你的npm脚本看起来像这样：

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

With sw-precache-config.js 配置好的 https://github.com/GoogleChromeLabs/sw-precache#options-parameter根据您的需求，但包括

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

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