Service Worker：前端离线化与性能优化的核心技术

Service Worker 是运行在浏览器后台的独立线程，与网页主线程分离，能在离线状态下处理网络请求、缓存资源，是实现 PWA（渐进式 Web 应用）的核心技术。它为前端应用带来了离线访问、消息推送、后台同步等能力，极大提升了 Web 应用的用户体验。

一、Service Worker 的核心特性

1. 独立运行环境

   Service Worker 运行在单独的线程中，不阻塞主线程，也无法直接操作 DOM。它通过 postMessage 与页面通信，实现间接的数据交互。

2. 生命周期管理

   拥有完整的生命周期：安装（Install）→ 激活（Activate）→ 运行（Idle）→ 销毁（Terminated），每个阶段都可通过事件监听执行特定逻辑。

3. 网络代理能力

   能拦截页面发出的所有网络请求（fetch 事件），决定是返回缓存资源还是请求网络，实现离线访问和请求优化。

4. 持久化存储

   结合 CacheStorage API 实现资源缓存，即使关闭浏览器后缓存数据也不会丢失。

5. 跨域限制

   只能在 HTTPS 环境（本地 localhost 除外）运行，且脚本文件必须与页面同源。

二、Service Worker 的基本使用流程

1. 注册 Service Worker

在页面主线程（通常是 main.js 或入口文件）中注册 Service Worker：

// 检查浏览器是否支持 Service Worker
if ('serviceWorker' in navigator) {
  // 页面加载完成后注册
  window.addEventListener('load', async () => {
    try {
      // 注册 service-worker.js 文件
      const registration = await navigator.serviceWorker.register('/service-worker.js', {
        scope: '/' // 控制的页面范围，默认为 Service Worker 文件所在目录
      });
      console.log('Service Worker 注册成功:', registration.scope);
    } catch (error) {
      console.log('Service Worker 注册失败:', error);
    }
  });
}

2. 编写 Service Worker 脚本

创建 service-worker.js 文件，处理安装、激活、请求拦截等核心逻辑：

// 缓存名称（版本化缓存，更新时修改名称）
const CACHE_NAME = 'my-app-cache-v1';
// 需要缓存的静态资源列表
const ASSETS_TO_CACHE = [
  '/',
  '/index.html',
  '/src/main.js',
  '/src/style.css',
  '/favicon.ico'
];

// 1. 安装阶段：缓存静态资源
self.addEventListener('install', (event) => {
  // 等待缓存完成后再完成安装
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(ASSETS_TO_CACHE))
      .then(() => self.skipWaiting()) // 强制激活新的 Service Worker
  );
});

// 2. 激活阶段：清理旧缓存
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((name) => {
          // 删除与当前版本不符的旧缓存
          if (name !== CACHE_NAME) {
            return caches.delete(name);
          }
        })
      ).then(() => self.clients.claim()) // 立即控制所有打开的页面
    })
  );
});

// 3. 拦截网络请求：实现缓存策略
self.addEventListener('fetch', (event) => {
  // 只处理 GET 请求
  if (event.request.method !== 'GET') return;

  // 缓存优先策略：先读缓存，缓存未命中再请求网络
  event.respondWith(
    caches.match(event.request)
      .then((response) => {
        // 缓存命中，直接返回缓存资源
        if (response) return response;

        // 缓存未命中，请求网络
        return fetch(event.request).then((networkResponse) => {
          // 将新请求的资源存入缓存（更新缓存）
          caches.open(CACHE_NAME).then((cache) => {
            cache.put(event.request, networkResponse.clone());
          });
          return networkResponse;
        }).catch(() => {
          // 网络错误时的降级处理（如返回离线页面）
          return caches.match('/offline.html');
        });
      })
  );
});

三、常用缓存策略

Service Worker 可以通过 fetch 事件实现多种缓存策略，根据场景选择合适的策略：

1. 缓存优先（Cache First）

   优先使用缓存资源，适用于不常变化的静态资源（如图片、CSS、JS）。

2. 网络优先（Network First）

   优先请求网络，网络失败时使用缓存，适用于实时性要求高的内容（如新闻列表）。

3. 只缓存（Cache Only）

   仅使用缓存资源，适用于完全离线的应用。

4. 只网络（Network Only）

   仅使用网络请求，适用于不需要缓存的动态内容（如用户个人数据）。

5. ** stale-while-revalidate（先缓存后更新）**

   先返回缓存资源保证速度，同时请求网络更新缓存，适用于非关键数据（如商品列表）。

四、Service Worker 的更新机制

Service Worker 不会自动更新，需要手动触发更新检查：

// 在页面中检查 Service Worker 更新
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js').then((registration) => {
    // 定期检查更新
    setInterval(() => {
      registration.update();
    }, 24 * 60 * 60 * 1000); // 每天检查一次

    // 监听更新事件
    registration.addEventListener('updatefound', () => {
      const newWorker = registration.installing;
      newWorker.addEventListener('statechange', () => {
        if (newWorker.state === 'installed') {
          // 提示用户有更新可用
          if (confirm('有新内容可用，是否刷新？')) {
            // 激活新的 Service Worker
            newWorker.postMessage({ type: 'SKIP_WAITING' });
          }
        }
      });
    });
  });
}

在 Service Worker 中处理更新消息：

// service-worker.js
self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting(); // 跳过等待，立即激活新的 Service Worker
  }
});

五、适用场景与注意事项

典型应用场景

• 离线应用：实现网页在无网络时仍可访问（如文档阅读器、离线表单）
• 性能优化：缓存静态资源，减少重复请求，提升页面加载速度
• 后台同步：在网络恢复后自动同步离线时产生的数据（如提交表单）
• 消息推送：结合 Push API 实现浏览器推送通知（即使页面关闭）

注意事项

1. 调试工具 ：在 Chrome 开发者工具的 Application > Service Workers 中调试
2. 缓存管理 ：通过版本化缓存名称（如 v1、v2）避免缓存冲突
3. HTTPS 要求 ：生产环境必须使用 HTTPS（本地 localhost 除外）
4. 更新延迟 ：新的 Service Worker 需等待旧的被销毁才能激活，可通过 skipWaiting() 强制激活
5. 兼容性：大部分现代浏览器支持，但需注意旧浏览器（如 IE）不支持

总结

Service Worker 为 Web 应用带来了接近原生应用的体验，特别是离线访问和性能优化方面。通过合理使用缓存策略和生命周期管理，可以显著提升应用的可靠性和用户体验。虽然初期配置有一定复杂度，但对于需要离线功能或高性能要求的应用来说，Service Worker 是不可或缺的技术。

随着 PWA 生态的成熟，Service Worker 已成为现代前端开发的重要技能，掌握它能让你的应用在各种网络环境下都保持出色的表现。