1. 前端离线缓存概述1.1 基本概念前端离线缓存是一种允许网页在没有网络连接的情况下依然能够正常访问的技术。通过将网页的资源如 HTML、CSS、JavaScript、图片等存储在本地浏览器中当用户再次访问该网页时浏览器可以直接从本地缓存中读取资源而不需要重新从服务器下载从而提高网页的加载速度和可用性。1.2 应用场景网络不稳定环境在移动网络信号弱或网络波动较大的地区用户可以在有网络时缓存网页资源之后即使网络不佳也能正常浏览。例如电商系统中用户在地铁等网络不稳定区域仍可查看商品详情。节省流量对于数据流量有限的用户离线缓存可以减少不必要的网络请求节省流量费用。比如电商系统的商品图片、促销信息等资源可以缓存避免重复下载。1.3 常见实现方式AppCache已逐渐被弃用HTML5 引入的应用缓存机制通过一个.appcache文件来指定需要缓存的资源。Service Worker现代浏览器支持的一种更强大、灵活的离线缓存解决方案它可以拦截网络请求实现更精细的缓存控制。2. 离线缓存操作步骤 - 使用 Service Worker2.1 注册 Service Worker在主 HTML 文件中注册 Service Worker这是使用 Service Worker 的第一步。注册过程会告诉浏览器在后台运行一个 Service Worker 脚本。!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title电商系统离线缓存示例/title/headbodyh1电商商品列表/h1ulidproduct-list!-- 商品列表内容 --/ulscriptif(serviceWorkerinnavigator){window.addEventListener(load,function(){navigator.serviceWorker.register(/service-worker.js).then(function(registration){console.log(Service Worker 注册成功作用域为,registration.scope);}).catch(function(error){console.log(Service Worker 注册失败,error);});});}/script/body/html2.2 安装 Service Worker在service - worker.js文件中监听install事件在该事件中缓存需要的资源。// service - worker.jsconstCACHE_NAMEecommerce-cache-v1;consturlsToCache[/,/index.html,/styles.css,/script.js,/product1.jpg,/product2.jpg// 可以添加更多需要缓存的电商系统资源如商品图片、样式文件、脚本文件等];self.addEventListener(install,function(event){event.waitUntil(caches.open(CACHE_NAME).then(function(cache){console.log(打开缓存);returncache.addAll(urlsToCache);}));});2.3 激活 Service Worker 并处理缓存更新监听activate事件在该事件中可以清理旧的缓存确保只保留最新版本的缓存。同时监听fetch事件当浏览器发起网络请求时Service Worker 可以拦截该请求并根据缓存情况进行处理。// service - worker.jsself.addEventListener(activate,function(event){event.waitUntil(caches.keys().then(function(cacheNames){returnPromise.all(cacheNames.filter(function(cacheName){// 过滤出需要删除的旧缓存returncacheName.startsWith(ecommerce-)cacheName!CACHE_NAME;}).map(function(cacheName){returncaches.delete(cacheName);}));}));});self.addEventListener(fetch,function(event){event.respondWith(caches.match(event.request).then(function(response){// 如果缓存中存在请求的资源直接返回缓存的响应if(response){returnresponse;}// 否则从网络获取资源returnfetch(event.request);}));});← 上一篇 Java进阶——常用类及常用方法详解记得点赞、关注、收藏哦下一篇 Java进阶——数组超详细整理 →
使用Service Worker 是实现前端离线缓存，提高响应速度详解
发布时间：2026/7/31 18:58:50
1. 前端离线缓存概述1.1 基本概念前端离线缓存是一种允许网页在没有网络连接的情况下依然能够正常访问的技术。通过将网页的资源如 HTML、CSS、JavaScript、图片等存储在本地浏览器中当用户再次访问该网页时浏览器可以直接从本地缓存中读取资源而不需要重新从服务器下载从而提高网页的加载速度和可用性。1.2 应用场景网络不稳定环境在移动网络信号弱或网络波动较大的地区用户可以在有网络时缓存网页资源之后即使网络不佳也能正常浏览。例如电商系统中用户在地铁等网络不稳定区域仍可查看商品详情。节省流量对于数据流量有限的用户离线缓存可以减少不必要的网络请求节省流量费用。比如电商系统的商品图片、促销信息等资源可以缓存避免重复下载。1.3 常见实现方式AppCache已逐渐被弃用HTML5 引入的应用缓存机制通过一个.appcache文件来指定需要缓存的资源。Service Worker现代浏览器支持的一种更强大、灵活的离线缓存解决方案它可以拦截网络请求实现更精细的缓存控制。2. 离线缓存操作步骤 - 使用 Service Worker2.1 注册 Service Worker在主 HTML 文件中注册 Service Worker这是使用 Service Worker 的第一步。注册过程会告诉浏览器在后台运行一个 Service Worker 脚本。!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title电商系统离线缓存示例/title/headbodyh1电商商品列表/h1ulidproduct-list!-- 商品列表内容 --/ulscriptif(serviceWorkerinnavigator){window.addEventListener(load,function(){navigator.serviceWorker.register(/service-worker.js).then(function(registration){console.log(Service Worker 注册成功作用域为,registration.scope);}).catch(function(error){console.log(Service Worker 注册失败,error);});});}/script/body/html2.2 安装 Service Worker在service - worker.js文件中监听install事件在该事件中缓存需要的资源。// service - worker.jsconstCACHE_NAMEecommerce-cache-v1;consturlsToCache[/,/index.html,/styles.css,/script.js,/product1.jpg,/product2.jpg// 可以添加更多需要缓存的电商系统资源如商品图片、样式文件、脚本文件等];self.addEventListener(install,function(event){event.waitUntil(caches.open(CACHE_NAME).then(function(cache){console.log(打开缓存);returncache.addAll(urlsToCache);}));});2.3 激活 Service Worker 并处理缓存更新监听activate事件在该事件中可以清理旧的缓存确保只保留最新版本的缓存。同时监听fetch事件当浏览器发起网络请求时Service Worker 可以拦截该请求并根据缓存情况进行处理。// service - worker.jsself.addEventListener(activate,function(event){event.waitUntil(caches.keys().then(function(cacheNames){returnPromise.all(cacheNames.filter(function(cacheName){// 过滤出需要删除的旧缓存returncacheName.startsWith(ecommerce-)cacheName!CACHE_NAME;}).map(function(cacheName){returncaches.delete(cacheName);}));}));});self.addEventListener(fetch,function(event){event.respondWith(caches.match(event.request).then(function(response){// 如果缓存中存在请求的资源直接返回缓存的响应if(response){returnresponse;}// 否则从网络获取资源returnfetch(event.request);}));});← 上一篇 Java进阶——常用类及常用方法详解记得点赞、关注、收藏哦下一篇 Java进阶——数组超详细整理 →
