caching - 来自 ServiceWorker 的获取调用是否使用常规浏览器缓存

Question

我想知道 ServiceWorker 中的 fetch 调用是使用正常的浏览器缓存还是绕过它并始终将请求发送到服务器

例如。第 5 行的 fetch 调用是否首先查看浏览器缓存。

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.open('mysite-dynamic').then(function(cache) {
      return cache.match(event.request).then(function (response) {
        return response || fetch(event.request).then(function(response) {
          cache.put(event.request, response.clone());
          return response;
        });
      });
    })
  );
});

Answer 1

这是个好问题。答案是:在 SW 中获取就像在浏览器上下文中获取一样。这意味着将检查浏览器的 HTTP 缓存，并且仅在检查网络之后。从 SW 获取不会绕过 HTTP 缓存。

如果您对静态 Assets 的命名方式不小心，这可能会导致竞争条件。

例子:

1. asset.css 由服务器提供，max-age: 1y
2. 在第一次请求后，浏览器的 HTTP 缓存拥有它
3. 现在文件的内容已经更新；文件不同但名称仍然相同 (asset.css)
4. 对文件 asset.css 的任何获取事件现在都由 HTTP 缓存提供，并且 SW 为检查来自服务器的文件而实现的任何逻辑实际上导致从 HTTP 缓存中获取步骤 1 中的初始文件
5. 此时服务器上的文件可能与缓存的其他一些文件不兼容，有些东西会损坏

缓解措施:1.当内容改变时总是改变静态 Assets 的名称2. 包含一个查询字符串(不要求 asset.css，但要求 asset.css?timestamporsomething)

需要非常好的阅读:https://jakearchibald.com/2016/caching-best-practices/