Service Worker的基本概念与使用

Service Worker是一种在浏览器后台独立运行的脚本，与网页主线程分离，能够拦截网络请求、缓存资源、推送消息等。它使得Web应用具备离线能力，显著提升用户体验。下面从基本概念到实际应用逐步展开。

Service Worker的基本概念

Service Worker本质上是一个JavaScript文件，运行在Worker上下文中，没有DOM访问权限。它充当浏览器与网络之间的代理服务器，可以控制页面请求的处理方式。Service Worker的生命周期包括注册、安装、激活等阶段，每个阶段都有特定事件触发。

Service Worker依赖于Promise机制处理异步操作，例如缓存读写、网络请求等。由于它独立于页面运行，即使关闭浏览器标签页，Service Worker仍可能继续执行任务。这种特性使得后台同步、定时通知等功能成为可能。

注册与安装Service Worker

使用前需要先注册Service Worker，通常在页面JavaScript中完成。以下代码展示基本注册流程：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js')
      .then(function(registration) {
        console.log('ServiceWorker注册成功:', registration.scope);
      })
      .catch(function(err) {
        console.log('ServiceWorker注册失败:', err);
      });
  });
}

安装阶段在Service Worker脚本中监听install事件。这个阶段适合预缓存关键资源：

const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        return cache.addAll(urlsToCache);
      })
  );
});

拦截请求与缓存策略

Service Worker的核心功能是拦截网络请求。通过监听fetch事件，可以实现多种缓存策略：

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        if (response) {
          return response; // 缓存命中
        }
        return fetch(event.request); // 回退到网络请求
      })
  );
});

更复杂的缓存策略包括"网络优先"、"缓存优先"等。以下是"网络优先，失败回退缓存"的实现：

self.addEventListener('fetch', function(event) {
  event.respondWith(
    fetch(event.request).catch(function() {
      return caches.match(event.request);
    })
  );
});

更新Service Worker

更新Service Worker需要改变其文件内容（如修改版本号）。新Worker安装后会进入等待状态，直到所有相关页面关闭后激活：

self.addEventListener('activate', function(event) {
  const cacheWhitelist = ['my-site-cache-v2'];
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (!cacheWhitelist.includes(cacheName)) {
            return caches.delete(cacheName); // 清理旧缓存
          }
        })
      );
    })
  );
});

后台同步与推送通知

Service Worker支持后台同步功能，即使用户关闭页面也能完成任务：

self.addEventListener('sync', function(event) {
  if (event.tag === 'sync-data') {
    event.waitUntil(sendDataToServer());
  }
});

function sendDataToServer() {
  // 实现数据发送逻辑
}

推送通知需要结合Push API实现：

self.addEventListener('push', function(event) {
  const options = {
    body: event.data.text(),
    icon: 'images/icon.png',
    badge: 'images/badge.png'
  };
  event.waitUntil(
    self.registration.showNotification('新消息', options)
  );
});

调试与问题排查

Chrome DevTools提供专门的Service Worker调试面板。常见问题包括：

• 未使用HTTPS（localhost除外）
• Service Worker文件路径不正确
• 缓存策略过于激进导致内容不更新

调试时可以监听message事件进行通信：

// 页面代码
navigator.serviceWorker.controller.postMessage('调试信息');

// Service Worker代码
self.addEventListener('message', function(event) {
  console.log('收到消息:', event.data);
});

性能优化实践

合理使用Service Worker可以显著提升性能：

• 预缓存关键资源
• 实现智能缓存策略
• 减少不必要的网络请求

示例：按需缓存大型资源

self.addEventListener('fetch', function(event) {
  if (event.request.url.includes('/large-assets/')) {
    event.respondWith(
      caches.open('large-assets').then(function(cache) {
        return cache.match(event.request).then(function(response) {
          return response || fetch(event.request).then(function(response) {
            cache.put(event.request, response.clone());
            return response;
          });
        });
      })
    );
  }
});

安全注意事项

使用Service Worker需注意：

• 确保HTTPS安全连接
• 验证缓存内容的完整性
• 限制缓存大小和时长
• 及时清理不再需要的缓存

// 设置缓存过期时间
const MAX_AGE = 86400; // 24小时
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.open('time-limited-cache').then(function(cache) {
      return cache.match(event.request).then(function(response) {
        if (response) {
          const cacheDate = new Date(response.headers.get('date'));
          if ((Date.now() - cacheDate) / 1000 < MAX_AGE) {
            return response;
          }
        }
        return fetchAndCache(event.request);
      });
    })
  );
});

实际应用案例

电商网站可以利用Service Worker实现：

• 商品列表离线浏览
• 购物车数据本地保存
• 价格变动推送通知
• 图片懒加载与缓存

// 商品详情页缓存策略
self.addEventListener('fetch', function(event) {
  if (event.request.url.includes('/products/')) {
    event.respondWith(
      caches.open('product-details').then(function(cache) {
        return cache.match(event.request).then(function(response) {
          const fetchPromise = fetch(event.request).then(function(networkResponse) {
            cache.put(event.request, networkResponse.clone());
            return networkResponse;
          });
          return response || fetchPromise;
        });
      })
    );
  }
});