Chrome服务工作线程未拦截缓存的请求 [英] Chrome service worker not intercepting cached requests
本文介绍了Chrome服务工作线程未拦截缓存的请求的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个简单的测试网站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
推荐答案
上述现象是由Chrome渲染引擎内存缓存Blink引起的。 从内存缓存处理的所有请求都不会通过服务工作进程，因为它们仍在服务工作进程之前的内存缓存中，因此它们实际上并不是作为请求发出的。
This article，杰克·阿奇博尔德关于服务器推送的文章还说明了在请求命中Service Worker之前的"映像缓存"。
内存中的缓存遵循HTTP缓存语义，其作用域为当前选项卡。除了图像，它还存储样式、脚本和字体。除此之外，关于这个缓存的实现的信息非常少。但也有一些奇怪的事情：What does Blink in-memory cache store?这篇关于Chrome服务工作线程未拦截缓存的请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
