Service Worker 是什么？
Service Worker 是一种浏览器技术，允许网页在后台运行脚本，独立于主网页线程。它在网络请求和浏览器之间充当代理服务器，可实现可靠的离线体验和资源缓存。核心功能包括缓存管理、离线支持、后台同步以及推送通知。
缓存策略
缓存优先（Cache First）：优先从缓存返回资源，若无则请求网络。
网络优先（Network First）：优先从网络获取，失败时使用缓存。
仅缓存/仅网络：根据需求选择单一来源。
基本用法
- 注册 Service Worker：
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(registration => console.log('SW 注册成功'))
.catch(error => console.log('SW 注册失败:', error));
}
- 编写 Service Worker（sw.js）
const CACHE_NAME = 'v1';
const urlsToCache = ['/', '/style.css', '/script.js'];
// 安装阶段：预缓存资源
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.map(key => {
if (key !== CACHE_NAME) return caches.delete(key);
}))
)
);
});
// 拦截请求：缓存优先策略
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
);
});
更新机制
修改 Service Worker 文件会触发更新检测（字节比对）。
新版本安装后进入等待状态，直到所有旧标签页关闭才激活，或可通过 skipWaiting() 强制立即激活。
注意事项
仅支持 HTTPS 环境（localhost 除外）。
缓存内容需自行管理更新，避免长期存储过期资源。
谨慎使用全局变量，Service Worker 可能被随时终止。
评论区