什么是 Service Worker？如何用于性能优化？

推荐答案

Service Worker 是一种运行在浏览器后台的脚本，独立于网页主线程，能够拦截网络请求、缓存资源、推送消息等。它主要用于实现离线功能、缓存策略和后台同步，从而显著提升 Web 应用的性能和用户体验。

通过 Service Worker，开发者可以：

1. 缓存静态资源：将常用的静态资源（如 HTML、CSS、JS、图片等）缓存到本地，减少网络请求，加快页面加载速度。
2. 离线访问：在用户离线时，仍然可以访问缓存的资源，提供无缝的离线体验。
3. 网络请求拦截：拦截并处理网络请求，优先从缓存中获取资源，减少对服务器的依赖。
4. 后台同步：在用户重新联网时，自动同步数据，确保数据的完整性。

本题详细解读

什么是 Service Worker？

Service Worker 是浏览器提供的一种 JavaScript 脚本，运行在独立的线程中，与主线程分离。它能够拦截网络请求、管理缓存、处理推送通知等，是 Progressive Web App (PWA) 的核心技术之一。

Service Worker 的生命周期

Service Worker 的生命周期包括以下几个阶段：

1. 注册：通过 navigator.serviceWorker.register() 方法注册 Service Worker。
2. 安装：在安装阶段，Service Worker 会缓存所需的静态资源。
3. 激活：激活阶段会清理旧的缓存，确保新的 Service Worker 生效。
4. 运行：Service Worker 在后台运行，拦截网络请求并处理缓存。

如何用于性能优化？

1. 缓存策略：

   • 预缓存：在安装阶段缓存关键资源，确保首次加载时资源可用。
   • 运行时缓存：在用户访问时动态缓存资源，减少后续请求的响应时间。
   • 缓存更新：通过版本控制或缓存失效策略，确保用户获取最新的资源。

2. 离线支持：

   • 通过缓存关键资源，Service Worker 可以在用户离线时提供基本的功能支持，提升用户体验。

3. 网络请求优化：

   • 使用 fetch 事件拦截网络请求，优先从缓存中获取资源，减少网络延迟。
   • 对于动态内容，可以结合服务器端渲染（SSR）或静态生成（SSG）技术，进一步提升性能。

4. 后台同步：

   • 在用户重新联网时，Service Worker 可以自动同步未完成的操作，确保数据一致性。

示例代码

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

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

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