覆盖 PWA Service Worker 中的浏览器缓存

如何解决覆盖 PWA Service Worker 中的浏览器缓存

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

当我更改一个资产，特别是一个 js 文件时，我会修改我的 Service Worker 中的至少一个字节以触发其原生更新：Service Worker 更新并检索其之前缓存的所有资产以刷新其缓存。

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

如何防止浏览器缓存 Service Worker 缓存资源？使用

对文件进行版本控制

"?v="+version

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

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

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

解决方法

您可以通过显式构造一个 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);
}