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

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

news 2025/11/6 4:21:47

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 的限制较多。

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

相关文章：

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

MuMu模拟器安卓12安装Xposed 框架

高级数据结构——hash表与布隆过滤器

【网络】什么是交换机？switch

软件测试 —— 自动化基础

深入解析 OpenHarmony 构建系统-4-OHOSLoader类

【Android、IOS、Flutter、鸿蒙、ReactNative 】实现 MVP 架构

排序算法（基础）大全

Pytest从入门到精通

《C++ 实现生成多个弹窗程序》

react 中 useRef Hook 作用

Scala-键盘输入（StdIn）-用法详解

力扣(LeetCode)283. 移动零(Java)

ESP32C3单片机使用笔记---烧录MicroPython

Matter1.4重磅来袭，智能家居进入“互联”新纪元

tdengine学习笔记

机器学习-36-对ML的思考之机器学习研究的初衷及科学研究的期望

Linux 进程信号的产生

CentOS8 在MySQL8.0 实现半同步复制

数据分析——Python绘制实时的动态折线图

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

shell脚本--常见案例

CMake控制VS2022项目文件分组

USB Over IP专用硬件的5个特点

JVM 内存结构详解

RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

脑机新手指南（七）：OpenBCI_GUI：从环境搭建到数据可视化（上）

tomcat入门

9-Oracle 23 ai Vector Search 特性知识准备

五子棋测试用例