Chrome service worker 没有拦截缓存的请求

Question

我有这个简单的测试网站 https://service-worker-test.app.baqend.com/，可以并排显示 200 张图片。它注册了一个非常简单的 service worker。 HTML 看起来像这样：

<html>
<style>
  img {
    width: 50px;
    width: 50px;
    float: left;
    padding: 5px;
 }
</style>
<head>
    <title>Service Worker Test</title>
    <script type="text/javascript">
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('sw.js');
      }
    </script>
</head>
<body>
  <div class="row">
    <img src="/img/1.jpg"/>
    <img src="/img/2.jpg"/>
    ...
    <img src="/img/200.jpg"/>
  </div>
</body>
</html>

service worker 只包含一个 fetch 事件的处理程序，打印出它看到的 url 个请求：

self.addEventListener('fetch', (event) => {
  console.log('fetching: ' + event.request.url);
});

就是这样。现在 first load in chrome 安装 service worker。当我执行 second load 时，service worker 将 HTML 请求和所有 200 个图像请求打印到控制台，如下所示：

fetching: https://service-worker-test.app.baqend.com/
fetching: https://service-worker-test.app.baqend.com/img/1.jpg
fetching: https://service-worker-test.app.baqend.com/img/2.jpg
fetching: https://service-worker-test.app.baqend.com/img/3.jpg
....
fetching: https://service-worker-test.app.baqend.com/img/200.jpg

如果我选中“网络”选项卡中的禁用缓存复选框，所有进一步加载做同样的事情（确保在每次加载后清除控制台）。

现在的问题是：当 浏览器缓存未被禁用时 ，在几次加载后，service worker 只会打印以下内容：

fetching: https://service-worker-test.app.baqend.com/

仅此而已。同样在调试 service worker 时，只有 HTML 请求在 fetch 事件监听器中被处理。

我的问题是为什么 chrome 中的 service worker 在从浏览器缓存提供请求时看不到请求？

顺便说一句。该代码在 Firefox 中运行良好。

我在 Mac OS 版本 10.11.6 (15G1421)

上使用 Chrome 版本 59.0.3071.86

Answer 1

上述行为 由 Chrome 渲染引擎 Blink 中的内存缓存引起。从内存中缓存提供的所有请求都不会通过 Service Worker，因为它们实际上并未作为请求发出，因为它们仍在位于 Service Worker 之前的内存中缓存中。

Jake Archibald 关于服务器推送的

This article 也说明了请求到达 Service Worker 之前的 "image cache"。

内存中的缓存遵循 HTTP 缓存语义并限定为当前选项卡。除了图像，它还存储样式、脚本和字体。除此之外，关于这个缓存的实现的信息很少。虽然有一些奇怪的事情：What does Blink in-memory cache store?

Chrome service worker 没有拦截缓存的请求

Chrome service worker not intercepting cached requests

javascript

google-chrome

caching

service-worker

baqend