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

Question

我正在使用“缓存”在服务工作线程中缓存我的 PWA Assets 并使其可以离线使用。

当我更改 Assets (特别是 js 文件)时，我会修改服务工作线程中的至少一个字节以触发其 native 更新:服务工作线程更新并检索其之前缓存的所有 Assets 以刷新其缓存。

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

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

对文件进行版本控制

"?v="+version

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

由于“caches.addAll”不允许以任何方式指定 http 请求 header (例如像 fetch 或 XMLHttpRequest 那样的 Cache-Control)，我如何防止对我的资源进行额外的激进缓存阶段？

我正在使用纯 JavaScript，如果可能的话，我需要在没有任何额外库的情况下完成它。另请注意，元 http-equiv 标记无法解决除完整 html 之外的资源的问题。

Answer 1

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

下面的一些代码展示了如何针对可传递给 cache.addAll() 的 URL 数组简洁地执行此操作:

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