我只是在测试服务工作线程功能,以了解它的工作原理。所以现在我遇到了一个问题。
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 和 JavaScript(我在网络选项卡中检查了禁用缓存)。下面的图像显示服务工作者调用了 img 文件夹中的所有图像。
![输入图像描述](https://istack.dev59.com/iMtRu.webp)
![输入图像描述](https://istack.dev59.com/4a24V.webp)