Chrome 服务工作者没有拦截缓存的请求答案

【问题标题】：Chrome service worker not intercepting cached requestsChrome 服务工作者没有拦截缓存的请求
【发布时间】：2017-06-07 19:19:06
【问题描述】：

我有一个简单的测试网站https://service-worker-test.app.baqend.com/，它显示 200 张图像并排排列。它注册了一个非常简单的服务工作者。 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);
});

就是这样。现在 chrome 中的 first 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 时，在 fetch 事件监听器中只处理 HTML 请求。

我的问题是，为什么 chrome 中的服务人员在从浏览器缓存提供请求时看不到请求？

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

我在 Mac OS 版本 10.11.6 (15G1421) 上使用 Chrome 版本 59.0.3071.86

【问题讨论】：

听起来您在描述 Chrome 中的错误。在bugs.chromium.org/p/chromium/issues/entry 提供详细信息可能是最好的下一步。
谢谢，做到了：bugs.chromium.org/p/chromium/issues/detail?id=732344
我投票决定将此问题作为离题结束，因为它是 Chrome 的错误报告。

标签： javascript google-chrome caching service-worker baqend

【解决方案1】：

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

This article 由 Jake Archibald 撰写，关于服务器推送也说明了请求到达 Service Worker 之前的“图像缓存”。

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

【讨论】：