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

Question

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

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

以上段落来自官方文件

提前致谢!

Answer 1

您可以运行npm run eject并访问底层 Webpack 配置。

完成此操作后，webpack.config.prod.js可以修改该文件以调整生成的 Service Worker。查找配置部分SWPrecacheWebpackPlugin。

您可以向该部分添加额外的runtimeCaching配置选项，以满足您的运行时缓存需求。