如何强制缓存的网页资产在 2023 年重新加载答案

【问题标题】：How to force cached web page assets to reload in 2023如何强制缓存的网页资产在 2023 年重新加载
【发布时间】：2023-01-11 02:00:53
【问题描述】：

迄今为止我发现的旧 Cache Buster 技术是：

链接 src 中的查询字符串：/mstylesheet.css?cache_buster=12345
每次更改文件名：/mstylesheet-12345.css
Apache：缓存控制“必须重新验证”与无缓存结合使用
我注意到所有这些顽固的浏览器缓存拒绝获取更新资产的问题？

如果我理解正确，浏览器缓存似乎将以下 URL 视为完全不同的实体？
- /mstylesheet.css
- /mstylesheet.css?cache_buster=12345
- /mstylesheet.css?cache_buster=54321
所以问题是：以下 javascript 是否会强制通过链接标记链接的现有样式表在浏览器缓存中更新，而没有缓存破坏查询字符串？
```
fetch("/mstylesheet.css",{ method: "GET",headers: {"Cache-Control": "no-cache"}});
```
（我想让它时不时地运行一次。不是在每次加载页面时）。

【问题讨论】：

no-cache 是服务器端，。如果你想控制缓存，而不是服务器端，你可以考虑使用 service worker，你决定如何缓存资产。
Service Worker 是否也会违反获取缓存？ stackoverflow.com/a/33266296/19248673 看起来像是使用缓存破坏查询字符串的提议？
对，就是这样。 Service Worker 会大量缓存你的整个应用程序。在 Angular 中，我们必须增加 ngsw-config.json 中的 version 字段并调用 SwUpdate。然而，不知道它是如何在本地完成的。

标签： javascript html css browser-cache

【解决方案1】：

来自Referrer and cache control APIs for fetch()，您希望reload 或no-store 绕过本地存储的缓存：

  // Download a resource with cache busting, to bypass the cache
  // completely.
  fetch("some.json", {cache: "no-store"})
    .then(function(response) { /* consume the response */ });

  // Download a resource with cache busting, but update the HTTP
  // cache with the downloaded resource.
  fetch("some.json", {cache: "reload"})
    .then(function(response) { /* consume the response */ });

这在 2023 年仍然有效。但是，真正的问题是您是否要支持可能不支持这些指令的旧版浏览器或旧版或行为不端的服务器。服务器可以选择忽略这些标头，或者服务工作者可以选择不首先将您的请求转发给服务器。据推测，您可以控制这两者，因此它们不会成为问题，但仍然值得一提的是，这些标准始终依赖于您应用程序的所有部分并正确使用它们。

如果我理解正确，浏览器缓存似乎将以下 URL 视为完全不同的实体？

这是对的。至少，完整的 URL 被用作缓存键。其他内容可能会添加到密钥和 Chrome implemented cache partitioning 中，这意味着不同来源通常不会共享它们的缓存，即使它是完全相同的 URL。

【讨论】：