我最近刚刚开始摆弄服务 worker ,并且遇到一种情况,无论我告诉它添加什么文件到缓存,它都会添加所有内容。现在,这通常意味着我对离线应用程序的工作量减少了,但我有点困惑。所以缓存似乎有两种向其添加请求的方法,.add()
和.addAll()
,后者能够接收请求数组,但即使只有 .add()
并将请求硬编码到其中,所有请求似乎最终都会进入缓存。
我的代码如下:
if ('serviceWorker' in navigator) {
//console.log('CLIENT: service worker registration in progress.');
navigator.serviceWorker.register('/sw.js').then(function() {
//console.log('CLIENT: service worker registration complete.');
}, function() {
//console.log('CLIENT: service worker registration failure.');
});
} else {
console.log('CLIENT: service worker is not supported.');
}
...这是在调用服务工作人员的实际页面中,以及服务工作人员本身:
var cacheName = 'cache';
self.addEventListener('install', (e) => {
console.log('[Service Worker] Install');
var appShellFiles = [
];
e.waitUntil(
caches.open(cacheName).then((cache) => {
console.log('[Service Worker] Caching all: app shell and content');
return cache.add('assets/images/boy.svg').then(function() {
// requests have been added to the cache
console.log('added')
});
})
);
});
self.addEventListener('fetch', (e) => {
e.respondWith(
caches.match(e.request).then((r) => {
console.log('[Service Worker] Fetching resource: '+e.request.url);
return r || fetch(e.request).then((response) => {
return caches.open(cacheName).then((cache) => {
console.log('[Service Worker] Caching new resource: '+e.request.url);
cache.put(e.request, response.clone());
return response;
});
});
})
);
});
self.addEventListener('activate', (e) => {
e.waitUntil(
caches.keys().then((keyList) => {
return Promise.all(keyList.map((key) => {
if(key !== cacheName) {
return caches.delete(key);
}
}));
})
);
});
...但在这里 .add('assets/images/boy.svg')
曾经是 .addAll(appShellFiles)
,它本身曾经包含单个文件,但似乎忽略了列表并仍然缓存所有内容。我错过了什么?
最佳答案
这很简单。看一下这段代码:
self.addEventListener('fetch', (e) => {
e.respondWith(
caches.match(e.request).then((r) => {
console.log('[Service Worker] Fetching resource: '+e.request.url);
return r || fetch(e.request).then((response) => {
return caches.open(cacheName).then((cache) => {
console.log('[Service Worker] Caching new resource: '+e.request.url);
cache.put(e.request, response.clone());
return response;
});
});
})
);
});
它动态/即时/自动地将所有内容保存在缓存中。您的代码是正确的 - 最初它只缓存您提到的一个文件。但当应用程序启动时,软件会立即缓存所有内容。
看待“缓存所有内容”问题的另一种方式:缓存所有内容甚至并不意味着任何内容。浏览器无法知道“一切”对于特定站点意味着什么。可能是 4 或 4000 项 Assets 。一旦实现这一点,只需找到正确的代码即可。
关于javascript - Service Worker 正在抓取一切,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60242959/