服务工作者线程生命周期各阶段的属性或事件（附：controllerchange updatefound activate对比）

本文对比了服务工作者线程（Service Worker）生命周期中的关键事件和属性，包括注册、安装、激活和控制各阶段。

---

通过详细表格展示了不同事件的触发时机、监听位置（主线程/服务线程）和典型用途，并重点分析了事件是否立即生效的特性差异。

---

文章还提供了实际代码示例，说明如何正确处理异步操作（如waitUntil和respondWith），确保服务工作者线程生命周期管理的可靠性。

---

最后总结了不同生效时机的适用场景，帮助开发者优化离线应用的用户体验和功能实现。

服务工作者线程生命周期事件/属性对比表

详细说明与示例代码

主线程监听的事件

// 注册服务工作者 const registration = await navigator.serviceWorker.register('/sw.js'); // 监听控制器变化 navigator.serviceWorker.addEventListener('controllerchange', () => { console.log('页面已被新的服务工作者控制'); }); // 监听更新发现 registration.addEventListener('updatefound', () => { console.log('发现新版本服务工作者'); }); // 检查等待中的SW if (registration.waiting) { // 提示用户更新 }

服务线程内监听的事件

// sw.js 文件内 // 安装事件 self.addEventListener('install', event => { event.waitUntil( caches.open('v1').then(cache => cache.addAll(['/app.css'])) ); }); // 激活事件 self.addEventListener('activate', event => { event.waitUntil( caches.keys().then(keys => Promise.all(keys.map(key => caches.delete(key))) ) ); }); // 拦截请求 self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request).then(response => response || fetch(event.request) ) ); });

生命周期流程图

主线程 服务线程 │ │ ├─ register('sw.js') ──────────────────────▶│ │ │ │ 返回 registration 对象 │ │ │ │─监听 updatefound ────检测到更新───────────▶│ │ │ │ ├─ install 事件 │ │ (预缓存资源) │ │ │ registration.waiting 变为真 │ │ │ │─调用 skipWaiting() ───跳过等待───────────▶│ │ │ │ ├─ activate 事件 │ │ (清理旧缓存) │ │ │─监听 controllerchange ◀─获得控制权───────▶│ │ (页面被新SW控制) │ │ │ │─navigator.serviceWorker.ready───────────▶│ │ (SW准备就绪) │ │ │ └─监听 fetch/push/sync 等事件◄─处理事件─────▶│

重要区别总结

1. 位置不同：

   • 主线程：管理SW注册、更新和状态监控

   • 服务线程：处理具体功能逻辑（缓存、推送等）

2. 时机不同：

   • 主线程事件关注SW与页面的关系变化

   • 服务线程事件关注SW自身状态和功能执行

3. 控制权不同：

   • 主线程可以主动触发更新、跳过等待

   • 服务线程控制资源缓存和请求处理

服务工作者线程事件对比表

详细说明：

controllerchange

• 触发条件：navigator.serviceWorker.controller属性值改变

• 特点：表明页面已被新的服务工作者控制

• 示例使用：

navigator.serviceWorker.addEventListener('controllerchange', () => { console.log('当前页面已被新的服务工作者控制'); });

updatefound

• 触发条件：检测到新的服务工作者脚本并开始安装

• 特点：仅表示发现新版本，不代表已激活

• 示例使用：

registration.addEventListener('updatefound', () => { console.log('发现新版本服务工作者'); });

activate

• 触发条件：服务工作者成功激活，获得控制权

• 特点：这是清理旧资源的理想时机（但还不能控制现有客户端）

• 示例使用：

self.addEventListener('activate', event => { // 清理旧缓存 event.waitUntil(caches.delete('old-cache')); });

生命周期顺序

1. 检测到新版本 →updatefound事件

2. 安装完成后等待激活 → （无特定事件）

3. 激活成功 →activate事件（服务工作者已就绪）

4. 控制页面 →controllerchange事件（页面已被控制）

重要区别

• updatefound和activate在服务工作者线程内监听

• controllerchange在客户端页面（主线程）中监听

• updatefound表示"发现更新"，activate表示"准备就绪"，controllerchange表示"已接管控制"

服务工作者线程生命周期事件/属性对比表（新增“是否立即生效”列）

"是否立即生效" 详细解释

立即生效的情况

// 示例1: 立即生效的属性 if (registration.waiting) { // 立即返回true/false // 已有等待中的SW } // 示例2: 立即触发的事件 navigator.serviceWorker.addEventListener('controllerchange', () => { // 事件触发后立即执行 window.location.reload(); // 可以立即重新加载页面 });

需等待 Promise 的情况

// 示例1: 异步操作 navigator.serviceWorker.ready.then(() => { // 只有SW完全就绪后才会执行 console.log('SW准备就绪'); }); // 示例2: 需要 waitUntil() 的事件 self.addEventListener('install', event => { // 必须等待缓存操作完成 event.waitUntil( caches.open('v1').then(cache => { return cache.addAll(['/app.js', '/style.css']); // 异步操作 }) ); // 只有在Promise完成后，install才完成 });

需等待 respondWith() 的情况

self.addEventListener('fetch', event => { // 必须调用 respondWith() 并提供Promise event.respondWith( caches.match(event.request).then(response => { // 这个Promise完成前，页面请求不会得到响应 return response || fetch(event.request); }) ); });

不同生效时机的使用场景

立即生效→用户界面响应

// 立即更新UI状态 registration.addEventListener('updatefound', () => { // 立即显示更新提示 showUpdateToast('发现新版本，正在下载...'); });

需等待 Promise→确保操作完成

// 确保SW激活后再发送消息 navigator.serviceWorker.ready.then(registration => { registration.active.postMessage('SW已就绪，开始工作'); });

需 waitUntil→保证生命周期完整性

self.addEventListener('activate', event => { // 保证清理完成前，SW不会进入下一步 event.waitUntil( caches.keys().then(cacheNames => { return Promise.all( cacheNames.map(cacheName => { if (cacheName !== 'current-v2') { return caches.delete(cacheName); // 删除旧缓存 } }) ); }) ); });

关键要点总结

1. 立即生效：主要用于状态查询和UI更新，不涉及异步操作

2. 等待 Promise：用于确保操作顺序，避免竞态条件

3. waitUntil/respondWith：服务线程生命周期管理的关键机制，保证异步操作完成

4. 实际影响：是否立即生效直接影响用户体验和代码执行逻辑