服务工作者响应缓存 Headers

Question

我正在尝试弄清楚服务工作者在响应中缓存 headers 方面的工作方式。我现在已经实现了几个服务工作者，但从来不用担心缓存 headers，项目应该缓存多长时间等。我现在正在企业生产站点上实现它，这些东西实际上真的很重要。

基本上在使用service worker的时候，http缓存是不是完全绕过了？

然后我是否需要构建一个框架来处理资源 expiration/invalidation，就像过去为我们做的 http 缓存一样？还是我在胡说八道？

如果有人可以对此提供一些说明，那将非常有帮助。在我看来，有 3 种可能的情况：

A）。网络请求 => Service worker fetch =>（浏览器缓存？）<=> Server

B）。网络请求 <=>（浏览器缓存？）<=> Service worker 获取 <=> Server

C)。网络请求 => Service worker fetch <=> Server

我已经在本地测试过了，似乎是 C)。是正确的实现，我们开发人员因此牺牲了缓存 header/duration 控制抽象。

我对此很好，只是想在我运行关闭之前澄清一下，并在服务工作者中构建一个用于读取和遵守缓存的框架 headers。

Answer 1

A) 是正确的模型。如果服务工作者控制页面，则所有网络请求都将在查询浏览器缓存或网络之前触发服务工作者的 fetch 事件处理程序。

反过来，任何时候 service worker 发出网络请求，无论是显式地通过 fetch() 还是隐式地通过 cache.add()/cache.addAll()，浏览器的 "traditional" 缓存是先征求意见。仅当浏览器缓存中没有有效响应时才会向服务器发出网络请求。

这有时对您有利，但如果您不希望出现这种行为，有时会使您暴露在细微的错误中。

中对此交互有非常详细的解释

Answer 2

这取决于您如何配置请求。使用 Fetch API，您可以控制请求如何与浏览器 HTTP 缓存交互。

例如，您可以将请求的缓存模式设置为no-store，这样它将绕过 HTTP 缓存。或者您可以将请求的缓存模式设置为 force-cache 这样浏览器将 return 缓存响应，即使它是陈旧的：

fetch("some.json", {cache: "force-cache"})
  .then(function(response) { /* consume the response */ });

默认请求的缓存模式是default。在这种情况下，请求将照常进行。显然，只有当 service worker 实际执行请求而不是 returning 一些硬编码响应时才会这样。

Service Worker Response Cache Headers