service-worker - 为什么服务工作者缓存所有图像?
问题描述
我只是在测试 Service Worker 的功能以了解它是如何工作的。所以现在我遇到了一个问题。
var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
'/img/map.jpg',
'/img/chicago.jpg',
];
self.addEventListener('install', function(event) {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
return response;
}
return fetch(event.request);
}
)
);
});
这些是我用来缓存两个图像的代码,但显然服务工作者会缓存所有图像,并且一些 css 和 javascripts(我在网络选项卡中检查了禁用缓存)下图显示 img 文件夹中的所有图像都是由服务工作者调用的。
我也检查了缓存存储,如您所见,也只有两个图像和图像文件夹!我很困惑!!如果有人可以对此提供一些澄清,那将是非常有帮助的。
解决方案
稍后在答案中,但由于您正在拦截所有获取请求,因此即使没有缓存的图像也会被服务工作者返回,因为这一行:
return fetch(event.request)
该标签(from ServiceWorker)
仅表示它已由 Service Worker 返回,无论是来自缓存还是网络。
推荐阅读
- objective-c - AppCode 注释后缩进
- angular - Angular 6:MIME 类型('text/html')不可执行,并且启用了严格的 MIME 类型检查
- r - 将 CSS 加载到闪亮的服务器时延迟
- angular - Angular:如何将 FormGroup.value 转换为 Map?
- visual-studio-2010 - Visual Studio 2017 Linux 控制台添加更多行并始终查看最新行
- python - Google Cloud Pub/Sub Python SDK 一次检索单个消息
- jenkins - 编辑 Jenkins sysconfig 不更改主目录 - RHEL
- ethereum - 重用已部署的库?
- windows - 如何通过命令行使用 gnupg 生成加密文档?
- c# - 在 C# 中更改字典值数组中的元素