Service Worker 忽略获取缓存设置

Question

在我的网页上：

let response = await fetch(url, { cache: "no-store"});

然后在 service worker 中我有：

function handleFetch(event) {
    console.log(event.request.cache)  // Always prints 'reload', should be 'no-store'
}
self.addEventListener("fetch", handleFetch);

我需要将缓存设置为 no-store 而不是 reload，即它设置的值。 Chrome 忽略该值并始终将其更改为 reload。我是不是做错了什么，或者这是 Chrome 强制执行其自身价值的情况？

进一步证明根据我尝试的请求正确设置了缓存：

const init = { cache: "no-store"};
let request = new Request(url, init);
console.log(request.cache);  // Prints 'no-store'
let request = new Request(url, init);

Answer 1

来自 MDN 文档：

no-store — The browser fetches the resource from the remote server without first looking in the cache, and will not update the cache with the downloaded resource.
reload — The browser fetches the resource from the remote server without first looking in the cache, but then will update the cache with the downloaded resource.

https://developer.mozilla.org/en-US/docs/Web/API/Request/cache

因此 Chrome 似乎希望在内部缓存所有内容，因为某些原因，这可能是一些内部优化，因此会用他们自己的缓存设置取代您的缓存设置，但尊重您希望的愿望通过将其更改为重新加载来获得“最新鲜的数据”。

因此您获得了“最新的未缓存数据”，chrome 可以自行缓存它。两全其美。

Answer 2

我认为这是一个 Chrome 错误： https://bugs.chromium.org/p/chromium/issues/detail?id=1317680

我想我会使用自定义 header 或 Cache-Control header 直到它被整理出来。

Service Worker 忽略获取缓存设置

Service worker ignores the fetch cache setting

javascript

service-worker