1

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

当我更改一个资产,特别是一个 js 文件时,我修改了我的 service worker 中的至少一个字节来触发它的本地更新:service worker 更新并检索它之前缓存的所有资产来刷新它的缓存。

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

如何防止浏览器缓存服务工作者缓存的资源?对文件进行版本控制

"?v="+version

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

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

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

4

1 回答 1

1

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

下面是一些代码,展示了如何简洁地为可以传递到的 URL 数组执行此操作cache.addAll()

async addAllBypassCache(cacheName, urls) {
  const cache = await caches.open(cacheName);
  const requests = urls.map((url) => new Request(url, {
    cache: 'reload',
  }));
  await cache.addAll(requests);
}
于 2021-06-21T13:38:08.630 回答