Service Worker 无法监听页面关闭，仅通过 activate/install 事件感知自身状态；页面需用 beforeunload 监听关闭并 postMessage 通知 SW，SW 仅可执行轻量操作，配合 skipWaiting() 和 clients.claim() 可实现无缝热更新。
Service Worker 本身不直接监听页面关闭（如用户关闭标签页或刷新页面），但它能通过生命周期事件感知自身状态变化，尤其是激活（activate） 和 安装（install） 阶段；而页面关闭行为需由页面脚本（而非 Service Worker）监听，两者职责不同、运行环境隔离。
下面分两部分说明：一是 Service Worker 如何响应自身激活事件，二是如何配合页面脚本处理关闭/刷新场景。
Service Worker 的激活事件监听
激活发生在 Service Worker 成功安装、旧版本被替换、并开始接管页面控制权时。这是关键时机，常用于清理旧缓存、更新资源策略。
// service-worker.js
self.addEventListener('activate', (event) => {
console.log('Service Worker 已激活');
// 清理旧缓存（例如删除 v1 缓存，保留 v2）
event.waitUntil(
caches.keys().then(keys => {
return Promise.all(
keys
.filter(key => !key.includes('v2'))
.map(key => caches.delete(key))
);
})
);
});⚠️ 注意：
立即学习“Java免费学习笔记（深入）”；
-
activate事件只在 Service Worker 进入activated状态时触发一次； - 若有旧 Service Worker 正在控制页面，新 SW 会先进入
waiting状态，直到所有客户端页面关闭或调用skipWaiting()才能激活； -
event.waitUntil()必须包裹异步操作，确保清理完成后再正式激活。
页面关闭/刷新时的配合逻辑
Service Worker 无法监听页面关闭（它没有 window 或 document 对象），但页面可以主动通知它，比如在关闭前同步状态或触发后台任务：
1. 页面中监听 beforeunload（提示用户或发送轻量数据）
// 页面脚本中
window.addEventListener('beforeunload', (e) => {
// 可选：提示用户保存
e.preventDefault();
e.returnValue = '确定要离开吗？';
// 可选：向 SW 发送消息（需 SW 已激活）
if ('serviceWorker' in navigator && navigator.serviceWorker.controller) {
navigator.serviceWorker.controller.postMessage({
type: 'PAGE_UNLOAD',
timestamp: Date.now()
});
}
});2. Service Worker 接收页面消息（非阻塞、不可保证送达）
// service-worker.js
self.addEventListener('message', (event) => {
if (event.data.type === 'PAGE_UNLOAD') {
console.log('收到页面卸载通知', event.data.timestamp);
// ⚠️ 注意：此时不能执行耗时或需要持久化的操作（如写 IndexedDB 可能被中断）
// 适合记录日志、触发后台 sync（需配合 background sync API）
}
});✅ 补充说明：
-
beforeunload是唯一可拦截页面跳转/关闭的前端事件，但现代浏览器已限制其弹窗内容，仅支持默认提示； -
unload事件几乎不可靠（Chrome 等已禁用其大部分能力），不推荐依赖； - Service Worker 收到
message后无法保证执行完成——页面可能瞬间销毁，因此只适合触发轻量、幂等操作（如backgroundFetch或sync事件注册）。
如何让新 Service Worker 立即激活（避免 waiting）
若希望更新后立刻生效（比如修复严重 bug），可在 install 阶段主动跳过等待：
// service-worker.js
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('my-cache-v2').then(cache =>
cache.addAll(['/index.html', '/app.js'])
)
);
// 强制跳过 waiting 状态
self.skipWaiting();
});
self.addEventListener('activate', () => {
// 此时新 SW 已接管，可安全清理
clients.claim(); // 让当前页面立即受控
});✅
clients.claim()会让当前打开的页面立刻使用新 SW，无需刷新；搭配skipWaiting()可实现无缝热更新。
Service Worker 和页面是解耦的两个运行环境，各司其职：页面管 UI 与用户交互，SW 管网络、缓存与后台任务。理解这个边界，才能合理设计关闭响应与激活逻辑。
