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

Question

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

  

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

以上段落来自官方doc

提前致谢！

Answer 1

我们最近在处理一个项目时遇到了类似的问题，我们并不想＆＃34;弹出＆＃34;。我们创建了一个小工具，允许您将自定义服务工作者代码附加到CRA生成的代码。

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

Answer 2

您可以运行npm run eject并访问基础Webpack配置。

执行此操作后，可以修改webpack.config.prod.js文件以调整生成的服务工作者。寻找section that configures SWPrecacheWebpackPlugin。

您可以在该部分添加额外的runtimeCaching configuration option以满足您的运行时缓存需求。