1

我有一个简单的测试网站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 中的第一次加载安装了 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

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

现在的问题是：当浏览器缓存未禁用时，在几次加载后，服务工作者将只打印以下内容：

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

4

1 回答 1

2

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

Jake Archibald 的这篇关于服务器推送的文章还说明了请求到达 Service Worker 之前的“图像缓存”。

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

于 2018-10-23T15:16:22.883 回答