当前位置: 首页 > news >正文

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

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 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(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里面,下次访问就是缓存responsecache.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;}
}

至于serviceworker2.css和图片你自己写和选图,要查看缓存,chrome浏览器按F12,–应用–>缓存空间;即可看到三个缓存文件

更新缓存策略: 当你的网站更新了图片资源后,你需要更新 Service Worker 的缓存策略。在上面的代码中,缓存的名称是 ‘cache-v5’。当你需要更新缓存时,只需更改这个名称(例如,改为 ‘cache-v6’);

然后重新部署 Service Worker。新的 Service Worker 将会注册,并且 install 事件将会使用新的缓存名称来缓存资源——>这句话的意思就是让你关闭测试中的页面,重新再打开,不然,看不到修改后的页面,因为是缓存页面;

请注意,Service Worker 的注册和脚本需要在 HTTPS 环境下运行,因为 Service Worker 需要访问缓存等敏感功能。此外,Service Worker 的调试和测试可能需要在本地服务器上进行,因为浏览器对 Service Worker 的限制较多。


http://www.mrgr.cn/news/71883.html

相关文章:

  • Springboot集成ElasticSearch实现minio文件内容全文检索
  • 【云计算】腾讯云架构高级工程师认证TCP--考纲例题,知识点总结
  • 数据库类型介绍
  • 使用php和Xunsearch提升音乐网站的歌曲搜索效果
  • 操作系统大会2024 | 麒麟信安根植openEuler社区,持续技术创新 共拓新应用 探索新机遇
  • 蓝桥杯模拟
  • 力扣 LeetCode 59. 螺旋矩阵II(Day1:数组)
  • AlphaFold3中文安装教程
  • Nous Chat:AI 领域的又一惊艳之作,未来潜力不可忽视
  • 【Python Tips】Python内置函数isinstance——检测数据类型:处理多种类型的输入参数(对比type)
  • C/C++ 模板与so
  • 十六、多版本并发控制
  • 【大数据测试HBase数据库 — 详细教程(含实例与监控调优)】
  • 速盾:CDN和OBS能共用流量包吗?
  • 解决MySQL中整型字段条件判断禁用不生效的问题
  • excel常用技能
  • 电商系统表的1-n如何设计?情景分析
  • 基于Multisim温度计温度测量检测测量系统电路(含仿真和报告)
  • 【AI日记】24.11.12 东京贫困女子读后感 | 未来学习工作时间分配
  • Python模块练习2(dict)
  • arcgis for js实现popupTemplate弹窗field名称和值转义
  • MySQl基础----Linux下数据库的密码和数据库的存储引擎(内附 实操图和手绘图 简单易懂)
  • PCL 点云分割 基于超体素的分割
  • 线上问题的排查之MySQL死锁如何排查
  • 25浙江省考-专项刷题(资料分析)-错题本
  • 力扣 LeetCode 142. 环形链表II(Day2:链表)