利用服务工作线程serviceWorker缓存静态文件css,html,js,图片等的方法，以及更新和删除及版本控制

news2024/11/17 7:30:44

Service Worker 是一种运行在浏览器背后的独立线程，可以用来处理推送通知、后台同步、缓存等任务。以下是使用 Service Worker 来缓存图片的一个基本示例：
1、注册 Service Worker: 首先，你需要在你的 JavaScript 文件中注册 Service Worker。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
        <title>测试serviceworker添加缓存，并删除缓存，并更新缓存</title>
        <link rel="stylesheet" href="serviceworker2.css" type="text/css">
        
    </head>
    <body>
        <div id="container">
            <div class="imgTitle">图片展示</div>
            <div class="imgContainer"><img src="images/123.jpg" alt="Img 1"></div>
        </div>
        <script type="text/javascript">
            window.addEventListener('load',()=>{
                if('serviceWorker' in navigator){
                // 由于 127.0.0.1:8000 是所有测试 Demo 的 host，如果你是phpstudy那么要用localhost才行
        		// 为了防止作用域污染，将安装前注销所有已生效的 Service Worker
        		//这里只是查看注册了那些版本的service Worker
                    navigator.serviceWorker.getRegistrations()
                    .then(regs=>{
                        for(let reg of regs)
                        {
                        	//查看注册的service worker
                            console.log(reg);
                            //如果你要删除所有已经注册的生效的service worker,可以用下面的
                            //reg.unregister();
                        }
                        //注册新的service worker
                        navigator.serviceWorker.register('serviceWorker.js')
                        .then(registration=>console.log(registration))
                        .catch(error=>console.log);
                    })
                }
            })
        </script>
    </body>
</html>

2、编写 Service Worker 脚本 (serviceWorker.js): 在 Service Worker 中，你可以监听 install 事件来缓存资源，以及 fetch 事件来拦截网络请求并提供缓存的资源。

//这里是版本控制，以后在cache.addAll中的静态文件有修改，我们修改完后，只需要改CACHE_NAME的值即可，比如cache_v5改成cache_v6
const CACHE_NAME='cache_v5';
//install事件监控，因为返回的都是期约异步，所以都用异步函数，在这里我们添加缓存
self.addEventListener('install',async event=>{
    console.log('install',event);
    //开启一个缓存，得到一个缓存对象
    const cache=await caches.open(CACHE_NAME);
    //添加需要缓存的文件
    await cache.addAll([
        '/images/123.jpg',
        '/serviceWorker.html',
        '/serviceworker2.css'
    ]);
    //这段话是立即执行， 会让 service worker 跳过等待，直接进入到 activate 状态
    await self.skipWaiting();
});

//监控激活activate事件，在这里我们可以删除旧的缓存
self.addEventListener('activate',async event=>{
    console.log('activate',event);
    
    //获取所有的缓存版本，就是我们上面的CACNE_NAME,如果你有其它的缓存版本都会在keys中
    const keys=await caches.keys();
    //循环出每个版本的缓存键
    keys.forEach(key=>{
    	//如果键不等于cache_v5,都删除掉，就是其它版本cache_v4等或你自定义mycachev1/2/3等版本
        if(key!==CACHE_NAME){
            return caches.delete(key)
        }
    })
    //  self.clients.claim() 表示 service worker 激活后，立即获得执行权
    await self.clients.claim();
    
})

//监控fetch事件，会拦截所有的请求: 走网络或缓存
self.addEventListener('fetch',event=>{
    console.log('fetch',event);
    const req=event.request;
   //返回一个新创建的URL对象
    const url=new URL(req.url);
    //只缓存同源的内容，当然你也可以不要这段，就可以缓存CDN或其它源的js文件
    if(url.origin !==self.origin)
    {
        return;
    }
	//这里的api只是判断走网络还是走缓存；如果没有api文件夹也不影响
	//接口请求优先走网络，静态资源优先走缓存
    if(req.url.includes('/api'))
    {
        event.respondWith(networkFirst(req));
    }else
    {
        event.respondWith(cacheFirst(req));
    }
})

//走网络资源
async function networkFirst(req)
{
    const cache=await caches.open(CACHE_NAME);
    try{
        const fresh=await fetch(req);
      //此处一定要添加 clone，因为它只是一个流，请求只有一次，如果是第一次需要先克隆里你请求键request里面，下次访问就是缓存response
        cache.put(req,fresh.clone());
        return fresh;
    }catch(e)
    {
        const cached=await cache.match(req);
        return cached;
    }
}
//走静态资源
async function cacheFirst(req)
{
    const cache=await caches.open(CACHE_NAME);
    const cached=await cache.match(req);
    if(cached)
        {
            return cached;
        }else{
            const fresh=await fetch(req);
            cache.put(req,fresh.clone());
            return fresh;
        }
}