Question

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

例如。第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缓存。

如果您不注意静态资产的命名方式，则会出现竞争条件。

示例：

asset.css由服务器提供，其中包含max-age：1y
在第一次请求之后，浏览器的HTTP缓存就有了它
现在文件的内容已更新;文件不同但名称仍然相同（asset.css）
现在，文件asset.css的任何提取事件都是从HTTP缓存提供的，SW实现从服务器检查文件的任何逻辑实际上都是从HTTP缓存中获取步骤1中的初始文件
此时服务器上的文件可能与其他一些缓存的文件不兼容，并且有一些中断

缓解措施： 1.始终在内容更改时更改静态资产的名称 2.包含查询字符串（不要求asset.css，但是对于asset.css？timestamporsomething）

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

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

1 个答案: