Question

我有一个简单的测试网站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>

服务工作者只包含fetch事件的处理程序，该事件打印出它看到的请求的url：

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

就是这样。现在，chrome中的第一次加载会安装服务工作者。当我执行第二次加载时，服务工作者会将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/

，没有别的。此外，在调试服务工作程序时，只在fetch事件侦听器中处理HTML请求。

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

顺便说一下。代码在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之前的“图像缓存”。

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

Chrome服务工作者不会拦截缓存的请求

1 个答案: