是的，Service Worker 是现代 Web 开发中的关键技术之一，主要用于离线缓存、后台同步、推送通知等功能，广泛应用于 PWA（渐进式 Web 应用）。
- Service Worker 是什么？
独立于 Web 页面的后台脚本，可拦截网络请求、缓存资源、推送消息。
运行在 浏览器的 Worker 线程，不会阻塞 UI。
只能运行在 HTTPS 站点（安全原因）。
生命周期包括 安装（install）、激活（activate）、运行（fetch）。
- Service Worker 能做什么？
✅ 离线缓存（缓存 HTML、CSS、JS、API 数据）
✅ 拦截请求（控制资源加载，减少网络请求）
✅ 后台同步（断网时存储数据，联网后上传）
✅ 推送通知（Web Push API 实现消息推送）
- Service Worker 的基本使用
（1）注册 Service Worker
在 index.js 或 main.js 里注册：
if (‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(’/sw.js’)
.then(reg => console.log(‘Service Worker 注册成功:’, reg))
.catch(err => console.log(‘Service Worker 注册失败:’, err));
}
（2）编写 Service Worker 脚本 (sw.js)
const CACHE_NAME = ‘my-cache-v1’;
const urlsToCache = [
‘/’,
‘/index.html’,
‘/styles.css’,
‘/script.js’,
‘/logo.png’
];
// 监听安装事件，缓存资源
self.addEventListener(‘install’, event => {
event.waitUntil(
caches.open(CACHE_NAME).then(cache => {
console.log(‘缓存资源:’, urlsToCache);
return cache.addAll(urlsToCache);
})
);
});
// 监听 fetch 事件，拦截请求并返回缓存数据
self.addEventListener(‘fetch’, event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});
// 监听激活事件，清除旧缓存
self.addEventListener(‘activate’, event => {
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cache => {
if (cache !== CACHE_NAME) {
console.log(‘删除旧缓存:’, cache);
return caches.delete(cache);
}
})
);
})
);
});
- Service Worker 的生命周期
Service Worker 生命周期有 3 个阶段：
-
安装（install）：缓存资源，准备进入激活状态。
-
激活（activate）：清理旧缓存，准备拦截请求。
-
运行（fetch）：拦截网络请求，返回缓存数据。
- Service Worker 应用场景
- Service Worker 的限制
只能在 HTTPS 运行（安全原因）。
不能直接操作 DOM（在 Worker 线程中运行）。
缓存需要手动管理（如版本更新时删除旧缓存）。
- Service Worker 适合哪些项目？
✅ PWA（渐进式 Web 应用）
✅ 离线可用的 Web 应用（如文档管理、邮件系统）
✅ 缓存优化的 SPA 应用（Vue、React）
✅ Web Push 推送通知
如果你的项目有离线需求、网络优化需求、推送通知需求，那么 Service Worker 是一个很好的选择！
