JavaScript 中 Service Worker 怎么监听页面关闭与激活事件-js教程-PHP中文网

service worker 无法监听页面关闭，仅通过 activate/install 事件感知自身状态；页面需用 beforeunload 监听关闭并 postmessage 通知 sw，sw 仅可执行轻量操作，配合 skipwaiting() 和 clients.claim() 可实现无缝热更新。

javascript 中 service worker 怎么监听页面关闭与激活事件

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))
      );
    })
  );
});

⚠️ 注意：

activate 事件只在 Service Worker 进入 activated 状态时触发一次；
若有旧 Service Worker 正在控制页面，新 SW 会先进入 waiting 状态，直到所有客户端页面关闭或调用 skipWaiting() 才能激活；
event.waitUntil() 必须包裹异步操作，确保清理完成后再正式激活。

页面关闭/刷新时的配合逻辑

Service Worker 无法监听页面关闭（它没有 window 或 document 对象），但页面可以主动通知它，比如在关闭前同步状态或触发后台任务：

js2java

JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...

下载

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(); // 让当前页面立即受控
});