Frontend Academy · 课时

Service Worker 注册与生命周期

Service Worker 注册与生命周期 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是服务工作线程

服务工作线程是一个在独立浏览器工作线程中运行的 JavaScript 文件（不在主线程中运行），可以拦截针对您来源的网络请求。它是离线 PWA、推送通知和后台同步功能的基础。

注册服务工作线程

请从主脚本中注册它。服务工作线程要求使用 HTTPS（localhost 除外）。

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js', { scope: '/' })
      .then(reg => console.log('SW registered:', reg.scope))
      .catch(err => console.error('SW registration failed:', err));
  });
}

作用域

服务工作线程会控制其作用域内的请求（也就是提供该文件的目录）。位于根目录的 /sw.js 会控制所有内容。位于 /app/sw.js 的 SW 只会控制 /app/*。

生命周期：安装 → 激活 → 获取

三个核心事件：install（仅执行一次，建立缓存）、activate（仅执行一次，清理旧缓存）、fetch（每次请求都会执行，用于决定使用缓存还是网络）。

// sw.js
self.addEventListener('install', (event) => {
  console.log('SW installing');
  event.waitUntil(
    caches.open('v1').then(cache =>
      cache.addAll(['/', '/index.html', '/styles.css', '/app.js'])
    )
  );
});

self.addEventListener('activate', (event) => {
  console.log('SW active');
  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(keys.filter(k => k !== 'v1').map(k => caches.delete(k)))
    )
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(res => res || fetch(event.request))
  );
});

skipWaiting()

默认情况下，更新后的 SW 会等待所有标签页关闭后才激活。在安装处理程序中调用 self.skipWaiting() 可以强制立即激活——更新更快，但可能导致新旧资源混用。

self.addEventListener('install', (event) => {
  self.skipWaiting(); // activate immediately on next reload
  // ... cache setup
});

clients.claim()

激活后，新的 SW 不会控制在它加载前就已打开的页面。在激活处理程序中调用 self.clients.claim() 可以立即取得控制权。

self.addEventListener('activate', (event) => {
  event.waitUntil(self.clients.claim());
});

更新服务工作线程

浏览器每次导航时都会检查新的 sw.js（最长缓存时间为 24 小时）。如果文件内容发生变化（字节级不同），它会作为新的 SW 安装，并等待激活。重新加载页面即可触发激活。

从应用检测更新

监听 updatefound，以显示更新提示。

navigator.serviceWorker.register('/sw.js').then(reg => {
  reg.addEventListener('updatefound', () => {
    const newSW = reg.installing;
    newSW.addEventListener('statechange', () => {
      if (newSW.state === 'installed' && navigator.serviceWorker.controller) {
        // New version ready
        showUpdateBanner(() => {
          newSW.postMessage('SKIP_WAITING');
          window.location.reload();
        });
      }
    });
  });
});

取消注册

要停止失控的服务工作线程（例如开发过程中出现问题时），请取消注册。

navigator.serviceWorker.getRegistrations().then(regs => {
  for (const reg of regs) reg.unregister();
});

浏览器 DevTools

Chrome DevTools → 应用 → 服务工作线程可以显示已注册的 SW，让您取消注册、模拟重新加载时更新，并逐步查看生命周期事件。

常见陷阱

1）SW 文件必须位于根作用域或更高层级。2）必须使用 HTTPS。3）开发过程中，SW 变更需要强制重新加载。4）只缓存一次，并通过版本控制更新，不要让缓存无限增长。5）不要缓存 POST 请求（不支持此操作）。

Workbox——提升效率的库

Google 的 Workbox 抽象了生命周期，并提供现成的缓存策略。大多数生产环境中的 PWA 都使用 Workbox，而不是手写 SW 代码。

快速检查

在服务工作线程的 install 处理程序中，self.skipWaiting() 有什么作用？

回顾：服务工作线程生命周期

拦截针对您来源的网络请求的 JavaScript 工作线程。通过 navigator.serviceWorker.register 注册。生命周期包括安装（建立缓存）、激活（清理）和获取（拦截请求）。使用 skipWaiting 和 clients.claim 立即更新。监听 updatefound 以提示用户。Workbox 抽象了样板代码。必须使用 HTTPS（localhost 除外）。

常见问题解答

「Service Worker 注册与生命周期」课时是免费的吗？

是的 — 「Service Worker 注册与生命周期」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「Service Worker 注册与生命周期」这节课中我会学到什么？

注册 Service Worker 脚本，了解安装、激活和获取生命周期事件，并使用 skipWaiting 和 clients.claim。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「Service Worker 注册与生命周期」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy