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中加载，安装服务工作人员。当我执行第二次加载时，服务工作人员将请求和所有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如果我在“网络”选项卡中选中“禁用缓存”复选框，则all all load会执行相同的操作(确保每次加载后清除控制台)。
现在的问题是:当浏览器缓存未禁用时，在几次加载之后，服务工作人员将只打印以下内容：
fetching: https://service-worker-test.app.baqend.com/没别的事了。此外，在调试服务工作人员时，只有HTML请求在fetch事件侦听器中被处理。
我的问题是，为什么chrome中的服务工作人员在从浏览器缓存中处理请求时不能看到这些请求？
顺便说一句。该代码在firefox中运行良好。
我在Mac 10.11.6版(15G 1421)上使用Chrome版本59.0.3071.86。
回答 1
Stack Overflow用户
发布于 2018-10-23 15:16:22
上面描述的行为是由Chrome的呈现引擎 眨眼中的内存缓存引起的。来自内存缓存的所有请求都不会通过服务工作人员，因为它们实际上不是作为请求发出的，因为它们仍然在服务工作人员面前的内存缓存中。
杰克·阿奇博尔德关于服务器推送的这篇文章也说明了在请求击中服务工作人员之前的“图像缓存”。
内存缓存遵循HTTP缓存语义，其作用域为当前选项卡。除了图像，它还存储样式、脚本和字体。除此之外，几乎没有关于这个缓存的实现的信息。但是有一些奇怪的事情：闪烁内存缓存存储什么？
https://stackoverflow.com/questions/44421110
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号