9

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

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

以上段落来自官方文档

提前致谢！

4

2 回答 2

4

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

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

于 2017-11-20T15:57:06.810 回答
2

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

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

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

于 2017-09-06T20:43:24.003 回答