建站哪家好论坛,长沙新媒体运营公司,营业执照网上查询官网,wordpress mvcService Worker 是一种运行在浏览器背后的独立线程#xff0c;可以用来处理推送通知、后台同步、缓存等任务。以下是使用 Service Worker 来缓存图片的一个基本示例#xff1a; 1、注册 Service Worker: 首先#xff0c;你需要在你的 JavaScript 文件中注册 Service Worker。…Service Worker 是一种运行在浏览器背后的独立线程可以用来处理推送通知、后台同步、缓存等任务。以下是使用 Service Worker 来缓存图片的一个基本示例 1、注册 Service Worker: 首先你需要在你的 JavaScript 文件中注册 Service Worker。
!DOCTYPE html
htmlheadmeta http-equivcontent-type contenttext/html;charsetUTF-8/title测试serviceworker添加缓存并删除缓存并更新缓存/titlelink relstylesheet hrefserviceworker2.css typetext/css/headbodydiv idcontainerdiv classimgTitle图片展示/divdiv classimgContainerimg srcimages/123.jpg altImg 1/div/divscript typetext/javascriptwindow.addEventListener(load,(){if(serviceWorker in navigator){// 由于 127.0.0.1:8000 是所有测试 Demo 的 host如果你是phpstudy那么要用localhost才行// 为了防止作用域污染将安装前注销所有已生效的 Service Worker//这里只是查看注册了那些版本的service Workernavigator.serviceWorker.getRegistrations().then(regs{for(let reg of regs){//查看注册的service workerconsole.log(reg);//如果你要删除所有已经注册的生效的service worker,可以用下面的//reg.unregister();}//注册新的service workernavigator.serviceWorker.register(serviceWorker.js).then(registrationconsole.log(registration)).catch(errorconsole.log);})}})/script/body
/html2、编写 Service Worker 脚本 (serviceWorker.js): 在 Service Worker 中你可以监听 install 事件来缓存资源以及 fetch 事件来拦截网络请求并提供缓存的资源。
//这里是版本控制以后在cache.addAll中的静态文件有修改我们修改完后只需要改CACHE_NAME的值即可比如cache_v5改成cache_v6
const CACHE_NAMEcache_v5;
//install事件监控因为返回的都是期约异步所以都用异步函数在这里我们添加缓存
self.addEventListener(install,async event{console.log(install,event);//开启一个缓存得到一个缓存对象const cacheawait 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 keysawait 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 reqevent.request;//返回一个新创建的URL对象const urlnew 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 cacheawait caches.open(CACHE_NAME);try{const freshawait fetch(req);//此处一定要添加 clone因为它只是一个流请求只有一次如果是第一次需要先克隆里你请求键request里面下次访问就是缓存responsecache.put(req,fresh.clone());return fresh;}catch(e){const cachedawait cache.match(req);return cached;}
}
//走静态资源
async function cacheFirst(req)
{const cacheawait caches.open(CACHE_NAME);const cachedawait cache.match(req);if(cached){return cached;}else{const freshawait fetch(req);cache.put(req,fresh.clone());return fresh;}
}至于serviceworker2.css和图片你自己写和选图要查看缓存chrome浏览器按F12,–应用–缓存空间即可看到三个缓存文件
更新缓存策略: 当你的网站更新了图片资源后你需要更新 Service Worker 的缓存策略。在上面的代码中缓存的名称是 ‘cache-v5’。当你需要更新缓存时只需更改这个名称例如改为 ‘cache-v6’;
然后重新部署 Service Worker。新的 Service Worker 将会注册并且 install 事件将会使用新的缓存名称来缓存资源——这句话的意思就是让你关闭测试中的页面重新再打开不然看不到修改后的页面因为是缓存页面
请注意Service Worker 的注册和脚本需要在 HTTPS 环境下运行因为 Service Worker 需要访问缓存等敏感功能。此外Service Worker 的调试和测试可能需要在本地服务器上进行因为浏览器对 Service Worker 的限制较多。
