覆盖 PWA 服务工作者中的浏览器缓存答案

【问题标题】：Override browser cache in PWA service worker覆盖 PWA 服务工作者中的浏览器缓存
【发布时间】：2021-09-02 12:24:27
【问题描述】：

我正在使用“缓存”在 Service Worker 中缓存我的 PWA 资产并使其离线可用。

当我更改资产（特别是 js 文件）时，我会修改我的 service worker 中的至少一个字节以触发其本机更新：service worker 更新并检索其所有先前缓存的资产以刷新其缓存。

然而，服务器以文件的缓存版本进行响应，而我拥有所服务的文件，但我无法控制 Cache-Control http 标头。

如何防止浏览器缓存 Service Worker 缓存的资源？使用 a 对文件进行版本控制

"?v="+version

后缀不起作用，因为此版本无法传递给引用 html 文件中的缓存文件的 or 或标记，这些文件是静态的，缓存将无法识别和提供脱机未版本化的文件名。

由于“caches.addAll”不允许 AFAIK 以任何方式将 Cache-Control 等 http 请求标头指定为 fetch 或 XMLHttpRequest，如何防止对我的资产进行额外的激进缓存阶段？

我使用的是纯 Javascript，如果可能的话，我需要在没有任何额外库的情况下完成它。另请注意，元 http-equiv 标记不会解决完整 html 以外的资产问题。

【问题讨论】：

标签： caching progressive-web-apps service-worker cachestorage

【解决方案1】：

您可以通过显式构造一个Request 对象并将cache 属性设置为适当的cache mode 来绕过浏览器的缓存。 'reload' 是一个不错的选择，因为它会绕过浏览器对传出请求的缓存，但它会使用响应更新浏览器的缓存（因此您将拥有一个更新鲜的浏览器缓存）。如果您甚至不想执行该更新，可以使用'no-store'。

这里有一些代码简明扼要地展示了如何为一组可以传递给cache.addAll() 的 URL 执行此操作：

async addAllBypassCache(cacheName, urls) {
  const cache = await caches.open(cacheName);
  const requests = urls.map((url) => new Request(url, {
    cache: 'reload',
  }));
  await cache.addAll(requests);
}

【讨论】：