Service Worker 的生命周期是怎样的？-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

1. 注册 (Registration)

Service Worker 的生命周期从注册开始。开发者通过 navigator.serviceWorker.register() 方法注册一个 Service Worker 脚本。注册成功后，浏览器会下载并解析该脚本。

// www.javascriptcn.com code example
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('Service Worker 注册成功:', registration);
    })
    .catch(error => {
      console.log('Service Worker 注册失败:', error);
    });
}

2. 安装 (Installation)

注册成功后，Service Worker 进入安装阶段。在这个阶段，Service Worker 会触发 install 事件。开发者可以在这个事件中缓存静态资源。

// www.javascriptcn.com code example
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => {
      return cache.addAll([
        '/index.html',
        '/styles.css',
        '/script.js'
      ]);
    })
  );
});

3. 激活 (Activation)

安装完成后，Service Worker 进入激活阶段。在这个阶段，Service Worker 会触发 activate 事件。开发者可以在这个事件中清理旧的缓存。

// www.javascriptcn.com code example
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.filter(cacheName => {
          return cacheName !== 'v1';
        }).map(cacheName => {
          return caches.delete(cacheName);
        })
      );
    })
  );
});

4. 空闲 (Idle)

激活完成后，Service Worker 进入空闲状态。在这个状态下，Service Worker 不会执行任何操作，但会保持运行状态，等待被调用。

5. 终止 (Termination)

如果 Service Worker 长时间处于空闲状态，浏览器可能会终止它以节省资源。当再次需要 Service Worker 时，浏览器会重新启动它。

6. 获取/拦截请求 (Fetch/Intercept)

当 Service Worker 处于激活状态时，它可以拦截网络请求并决定如何处理这些请求。开发者可以在 fetch 事件中实现自定义的缓存策略。

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

通过以上阶段，Service Worker 能够有效地管理缓存、拦截网络请求，并提升 Web 应用的性能和离线体验。

Service Worker 的生命周期是怎样的？

推荐答案