pwa最佳实战：安装，选择性缓存与过期资源删除

作为一名站长，近十年来没有赚到过什么钱，但是互联网精神是什么？无私的奉献，下面我就将我这三年来的pwa技术应用经验分享给大家，希望给大家带来一些启示。
一个成熟的sw.js文件
const cache_name = 'cnj8com999';
/*安装程序*/。
self.addeventlistener('install',function(event) {
event.waituntil(
caches.open(cache_name)
then(function(cache) {
return cache.addall([]);
})
);
});
/*自定义缓存*/。
self.addeventlistener('fetch',function(event) {
if (event.request.method!= 'get'|| event.request.url.indexof(".com/h") >0) return false;
event.respondwith(caches.match(event.request)
then(response =>{
if (response) return response;
return fetch(event.request)
then(response =>{
if (!response.ok) return response;
const newresponse = response.clone();
if (event.request.url.indexof("http") === 0) {
/*自动缓存*/。
caches.open(cache_name)
then(cache =>cache.put(event.request,newresponse));
}
return response;
});
}));
});
/*删除过期缓存*/。
self.addeventlistener('activate',function(event) {
// 激活事件处理函数。
event.waituntil(
caches.keys()
then(function(cachenames) {
return promise.all(
cachenames.map(function(cachename) {
if (cachename!== cache_name) { // 排除自定义的缓存名称。
return caches.delete(cachename);
}
})
);
})
);
});
这里面已经包含了选择性缓存，安装，激活代码及缓存删除程序。
需要注意的是activate 事件
pwa（progressive web apps）中的 activate 事件是 service worker 生命周期中的一个重要事件。当 service worker 完成安装并准备激活时，会触发 activate 事件。
在 activate 事件处理函数中，你可以执行一些清理和优化操作，例如删除过期的缓存、更新缓存列表等。这样可以确保你的 pwa 在使用最新资源的同时，也保持性能和响应性。
单页面的更新代码
const cache_name = 'cnj8com999';
if ('serviceworker'in navigator) {
fetch(location.href + '?&t='+ math.round(number(new date()) / 120000),{cache:"no-cache"}).then(response =>{
if (response.ok){
const newresponse = response.clone();
caches.open(cache_name).then(cache =>cache.put(location.href,newresponse));
}
});
}
这里的cache_name要与sw.js的相同。其实pwa是一项很不错的技术，大家可以慢慢研究。想要查看效果，可以打开
中文静网，浏览器自动缓存，断网可用，全静态托管，速度快。
本文链接：pwa最佳实战：安装，选择性缓存与过期资源删除 - 编程计算机 - 中文静网