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

Question

我正在使用“缓存”将我的PWA资产缓存到service worker中，并使其脱机可用。

当我改变一个资产，特别是一个js文件，我修改至少一个字节在我的服务工作人员触发其本机更新：服务工作人员更新和检索所有以前缓存的资产，以刷新其缓存。

然而，服务器以文件的缓存版本响应，尽管我拥有所服务的文件，但我无法控制缓存控制http头。

如何防止在服务工作者缓存的资源上进行浏览器缓存？使用

"?v="+version

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

由于“caches.addAll”不允许AFAIK以任何方式将http请求头（如缓存控制）指定为fetch或XMLHttpRequest所做的，我如何防止在我的资产上进行额外的攻击性缓存阶段？

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

Answer 1

通过将缓存属性设置为适当的缓存模式，显式构造请求对象，可以绕过浏览器的缓存<代码>'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);
}