前言
serviceWorker是前端领域中一种比较少见的缓存方式，可是网络上大部分的文章都是用的一套代码，一般只会无差别的对全量前端文件都进行缓存，且不对清除缓存的方式进行解释，针对此情况，我在这里提出一种通过白名单配置的方式来对缓存文件进行控制的方法。
代码
const cacheName = 'my-cache'
//允许走缓存的判断
const enableCache = (url)=>{
console.log(window.cacheList)
if(!cacheList) return false
return cacheList.some(item=>url.indexOf(item) !== -1)
}
//判断res是否正常
const isResponseCorrect = (response)=>{
return response.status === 200
}
self.addEventListener('fetch', async function(event) {
console.log(event.request.url)
//符合规则，进入缓存匹配
if(enableCache(event.request.url)){
event.respondWith(
caches.open(cacheName).then(function(cache) {
//获取缓存
return cache.match(event.request).then(function(response) {
//异步请求资源，尝试更新缓存
fetch(event.request).then(function(networkResponse) {
if(isResponseCorrect){
//返回正常则更新缓存
cache.put(event.request, networkResponse.clone());
}
return networkResponse;
});
return response
});
})
);
}
});
解释
在常规使用serviceWorker的过程中，新增了两个判断逻辑。
1.enableCache缓存使用判断，可根据该函数返回的值，来对文件是否使用缓存进行判断，该例子中使用的是白名单的方式，只要该文件名存在于全局变量window.cacheList中即进行缓存获取；在此基础上可以进行扩展，cacheList的值可改为从接口获取，以达到“动态”缓存的效果。
2.isResponseCorect缓存数据的正确性判断，可根据新获取的数据，自定义逻辑对起进行判断，判断是否使用该缓存；后续尝试对该函数进行扩展，尝试使用该请求中的数据来进行缓存使用的判断。
