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

Question

迄今为止我发现的旧的Cache Buster技术有:

1. 链接中的查询字符串src:/mstylesheet.css?cache_buster = 12345
2. 每次更改文件名:/mstylesheet-12345.css
Apache: Cache-Control "must-revalidate"与no-cache结合使用

我注意到所有这些顽固的浏览器缓存拒绝获得更新的资产的问题?

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

• /mstylesheet.css
• /mstylesheet.css吗?cache_buster = 12345
• /mstylesheet.css吗?cache_buster = 54321

那么问题是:下面的javascript是否可以强制通过link标签链接的现有样式表在浏览器缓存中更新，而不需要缓存buster查询字符串?

fetch("/mstylesheet.css",{ method: "GET",headers: {"Cache-Control": "no-cache"}});

(我想让这个运行一个每隔一段时间。

Answer 1

从fetch()的Referrer和缓存控制api中，您希望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年仍然有效。然而，真正的问题是你是否想要支持旧的浏览器或旧的或行为不端的服务器，这些服务器可能不支持这些指令。服务器可以选择忽略这些头，或者service worker可以选择一开始就不把你的请求转发给服务器。大概，你在控制这两个，所以他们不会是一个问题，但仍然值得一提的是，这些标准总是依赖于你的应用程序的所有部分和堆栈正确使用它们。

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

这是正确的。至少，完整的URL被用作缓存键。其他东西可能会添加到键和Chrome实现缓存分区意味着不同的来源通常不共享他们的缓存，即使它是完全相同的URL。