请解释 Service Worker 的注册、安装和激活过程

推荐答案

Service Worker 的注册

Service Worker 的注册是通过 navigator.serviceWorker.register() 方法完成的。这个方法接受两个参数：Service Worker 脚本的 URL 和一个可选的配置对象。注册成功后，Service Worker 脚本会被下载并开始安装。

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

Service Worker 的安装

在 Service Worker 注册成功后，浏览器会触发 install 事件。开发者可以在这个事件中执行一些初始化操作，比如缓存静态资源。

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

Service Worker 的激活

当 Service Worker 安装完成后，它会进入 waiting 状态，直到所有已打开的页面都关闭后，新的 Service Worker 才会被激活。激活时会触发 activate 事件，开发者可以在这个事件中清理旧的缓存。

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

本题详细解读

Service Worker 的注册

Service Worker 的注册是异步的，通常在主线程中进行。注册成功后，Service Worker 脚本会被下载并开始安装。注册过程中，开发者可以通过 registration 对象来管理 Service Worker 的生命周期。

Service Worker 的安装

在 install 事件中，开发者可以执行一些初始化操作，比如缓存静态资源。event.waitUntil() 方法用于确保在安装完成之前，Service Worker 不会进入下一个阶段。如果安装失败，Service Worker 会被丢弃。

Service Worker 的激活

当 Service Worker 安装完成后，它会进入 waiting 状态，直到所有已打开的页面都关闭后，新的 Service Worker 才会被激活。在 activate 事件中，开发者可以清理旧的缓存，确保新的 Service Worker 能够正常工作。