Service Worker通过拦截网络请求实现离线访问，首先注册sw.js文件，在install事件中缓存静态资源，activate时清理旧缓存，fetch事件中优先返回缓存响应并动态缓存新资源，通过版本号更新缓存并使用skipWaiting和clients.claim实现快速激活。
Service Worker 是现代 Web 应用中实现离线访问、资源缓存和后台任务的关键技术。它本质上是一个运行在浏览器后台的脚本，独立于网页主线程，能拦截网络请求、管理缓存、推送消息等。下面从实际应用场景出发，带你一步步掌握 Service Worker 的核心用法。
注册并激活 Service Worker
要在页面中启用 Service Worker，首先需要在主 JavaScript 文件或 HTML 的脚本中注册它。
注册代码通常放在页面加载时：
if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js') .then(registration => { console.log('SW 注册成功，作用域为:', registration.scope); }) .catch(error => { console.log('SW 注册失败:', error); }); });}
这段代码检查浏览器是否支持 Service Worker，如果支持，则在页面加载完成后注册根目录下的 sw.js 文件。注意：Service Worker 文件必须能被正确访问，且处在有效的作用域路径下（通常为网站根目录或子目录）。
立即学习“Java免费学习笔记（深入）”；
缓存静态资源实现离线访问
最常见的用途是缓存关键静态资源（如 HTML、CSS、JS、图片），让用户在无网络时仍可访问页面。
在 sw.js 中监听 install 和 activate 事件：
const CACHE_NAME = 'my-site-v1';const urlsToCache = [ '/', '/styles/main.css', '/scripts/app.js', '/images/logo.png'];self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => cache.addAll(urlsToCache)) );});self.addEventListener('activate', event => { // 清理旧缓存 event.waitUntil( caches.keys().then(keys => Promise.all( keys.filter(key => key !== CACHE_NAME) .map(key => caches.delete(key)) ) ) );});
install 阶段打开缓存并预加载资源；activate 阶段清理过期缓存，避免占用用户存储空间。
拦截请求并返回缓存内容
通过监听 fetch 事件，可以控制每个网络请求的响应策略。
常用策略：优先读取缓存，若无则发起网络请求并缓存结果。
self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(cachedResponse => { // 如果缓存中有，直接返回 if (cachedResponse) { return cachedResponse; } // 否则发起网络请求 return fetch(event.request).then(response => { // 只缓存成功响应，且仅限同源请求 if (!response || response.status !== 200 || !isSameOrigin(event.request)) { return response; } // 克隆响应流并缓存 const responseToCache = response.clone(); caches.open(CACHE_NAME).then(cache => { cache.put(event.request, responseToCache); }); return response; }); }) );});// 判断请求是否同源function isSameOrigin(request) { const url = new URL(request.url); return url.origin === self.location.origin;}
这样配置后，用户第二次访问时资源将从缓存加载，显著提升加载速度，并支持离线使用。
更新缓存版本与热更新机制
当应用更新时，需确保 Service Worker 能检测到变化并升级缓存。
关键是修改 CACHE_NAME 版本号，例如改为 my-site-v2。浏览器会发现新的 SW 文件内容不同，触发 install 新实例。
注意：新 Service Worker 安装完成后不会立即接管页面，直到所有已打开的页面关闭旧 SW 控制的会话。可通过跳过等待（skipWaiting）和客户端控制（clients.claim）加速切换：
self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME).then(cache => cache.addAll(urlsToCache)) ); // 安装完成后立即激活，跳过 waiting 状态 self.skipWaiting();});self.addEventListener('activate', event => { event.waitUntil( caches.keys().then(keys => Promise.all(keys.map(key => { if (key !== CACHE_NAME) return caches.delete(key); })) ) ); // 激活后立即控制所有客户端 self.clients.claim();});
这能让新版本快速生效，适合频繁迭代的应用。
基本上就这些。Service Worker 强大但需谨慎使用，合理设计缓存策略才能真正提升用户体验。调试时建议使用 Chrome DevTools 的 Application 面板查看缓存和 SW 状态。不复杂但容易忽略细节，比如路径问题、缓存更新逻辑、跨域处理等。掌握之后，PWA 就近在眼前了。
以上就是JavaScript Service Worker实战的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1530375.html
微信扫一扫 
支付宝扫一扫 
