如何配置 Create React Apps 默认 Service Worker 以缓存不在 react src 上下文（公共文件夹）中的资产？答案

【问题标题】：How to configre Create React Apps default Service Worker to cache assets that are not in react src Context (public Folder)?如何配置 Create React Apps 默认 Service Worker 以缓存不在 react src 上下文（公共文件夹）中的资产？
【发布时间】：2020-09-16 08:40:18
【问题描述】：

今天我尝试了 Create React App 的 ServiceWorker，除了在 public/img/favicon.ico 中定义的我的页面的 Favicon 之外，所有内容都被缓存，所以当页面脱机时，Favicon 消失并且连接错误显示在控制台中，那么有没有人有经验如何配置Service Worker的网页插件来缓存这个呢？

【问题讨论】：

标签： reactjs create-react-app service-worker workbox-webpack-plugin

【解决方案1】：

我有一个 CRA 项目here。我不预缓存我的网站图标，我让默认处理程序运行时缓存它，但我会预缓存一个备用图像，你应该能够这样做来预缓存你的网站图标。

CRA 创建了一个我认为我没有触及的默认软件。为了获得更多控制权，我在 sw-addendum 文件中使用了 workbox，我将其附加到构建中的默认 sw 中。在附录中，您可以预先缓存您需要的内容并设置路由等。

请参阅package.json 了解部署后脚本

"postdeploy": "cp src/face.69232788.jpg docs/face.69232788.jpg && cat src/swAddendum.js >> docs/service-worker.js",

sw-附录here

workbox.precaching.precache([
  './face.69232788.jpg',
]);

【讨论】：

是的，我知道如何做 Workbox mamual 但是 cra 使用 workox webpack generatew 来完全生成 sw，甚至无法将文件添加到 webpack 配置中的预缓存，所以我尝试了像你这样的东西来创建我的自己的 sw.js 的实现，但是 Webpack 没有用 Workbox 的 InjectManifest 插件找到它
我不确定我是否理解您的意思，听起来除了网站图标之外的所有内容都已缓存，如果您按照我的做法进行操作，您应该能够预缓存它。
是的，我需要了解 Workbox，现在我明白了你在说什么，谢谢