如何修改Create-React-App中自动生成的service-worker

Question

我已经从Create-React-App库创建了一个示例应用程序。当我运行构建命令时，它会使用“cache-first”策略自动生成服务工作者。 但我需要更多的功能，比如缓存一些API响应等。我不知道如何修改脚本，以便将我的代码包含在自动生成的服务工作者中。 我找到了一些帮助信息，但这些信息还不足以完全理解它。

默认情况下，生成的服务工作者文件不会拦截或缓存任何跨源流量，例如来自不同域的HTTP API请求、图像或嵌入式加载项。如果您想为这些请求使用运行时缓存策略，则可以弹出并在webpack.config.prod.js的SWPrecacheWebpackPlugin部分配置runtimeCaching选项。

上面的段落是来自官方doc。

提前感谢！

- Yash Kochar

Answer 1

我们最近在项目中遇到了类似的问题，但并不希望进行“eject”操作。我们创建了一个小工具，可以让你在CRA生成的service worker代码中添加自定义代码。

请查看这里：https://github.com/bbhlondon/cra-append-sw

- tszarzynski

---

很好的解决方法，谢谢！ （如果在部署期间遇到类似我遇到的 babel-loader 错误，请使用 --skip-compile 标志。） - bplittle

Answer 2

你可以运行 npm run eject 来访问底层的Webpack配置。一旦你这样做了，webpack.config.prod.js文件就可以被修改来调整生成的服务工作者。查找配置SWPrecacheWebpackPlugin的部分。。你可以在该部分中添加一个额外的runtimeCaching 配置选项来适应你的运行时缓存需求。

- Jeff Posnick

---

我不喜欢弹出，因为弹出后我必须自己处理所有事情。我正在考虑分叉 CRA 本身。 - Yash Kochar