使用 Service Worker 实现离线缓存与资源优化

题目描述
Service Worker 是一种在浏览器后台独立运行的脚本，它充当网络代理的角色，可以拦截和处理页面的网络请求。通过 Service Worker 我们可以实现可靠的离线缓存、资源预加载、消息推送等功能。请你详细说明如何利用 Service Worker 优化前端资源加载性能并实现离线可用性。

知识解析

1. Service Worker 的特性

   • 独立于主线程运行，不会阻塞页面渲染
   • 需要 HTTPS 环境（本地开发可用 localhost）
   • 具有完整的生命周期（安装→等待→激活）
   • 可拦截作用域内的网络请求（包括 HTML/CSS/JS/图片等）

2. 核心实现步骤
   步骤1：注册 Service Worker
   在主线程中检测浏览器支持情况并完成注册：

   if ('serviceWorker' in navigator) {
     // 注意作用域范围：默认作用于 sw.js 所在目录及子目录
     navigator.serviceWorker.register('/sw.js')
       .then(registration => {
         console.log('SW 注册成功，作用域:', registration.scope);
       })
       .catch(error => {
         console.log('SW 注册失败:', error);
       });
   }
   

   步骤2：安装阶段缓存关键资源
   在 sw.js 中监听 install 事件，使用 Cache API 存储静态资源：

   const CACHE_NAME = 'v1-static-cache';
   const urlsToCache = [
     '/',
     '/css/main.css',
     '/js/app.js',
     '/images/logo.png'
   ];
   
   self.addEventListener('install', event => {
     // 强制跳过等待阶段，直接激活新 SW
     self.skipWaiting();
   
     event.waitUntil(
       caches.open(CACHE_NAME)
         .then(cache => {
           return cache.addAll(urlsToCache); // 原子操作：全部成功或失败
         })
     );
   });
   

   步骤3：拦截请求并返回缓存策略
   通过 fetch 事件实现多种缓存策略（以下展示"缓存优先，网络回退"策略）：

   self.addEventListener('fetch', event => {
     event.respondWith(
       caches.match(event.request) // 匹配缓存
         .then(response => {
           if (response) {
             return response; // 返回缓存副本
           }
   
           // 克隆请求（流式数据只能使用一次）
           const fetchRequest = event.request.clone();
   
           return fetch(fetchRequest).then(response => {
             // 校验响应有效性
             if (!response || response.status !== 200) {
               return response;
             }
   
             // 动态缓存新资源（注意避免缓存跨域请求）
             if (event.request.url.startsWith(self.location.origin)) {
               const responseToCache = response.clone();
               caches.open(CACHE_NAME)
                 .then(cache => {
                   cache.put(event.request, responseToCache);
                 });
             }
   
             return response;
           });
         })
     );
   });
   

   步骤4：版本更新与缓存清理
   监听 activate 事件，删除旧版本缓存：

   self.addEventListener('activate', event => {
     event.waitUntil(
       caches.keys().then(cacheNames => {
         return Promise.all(
           cacheNames.map(cacheName => {
             if (cacheName !== CACHE_NAME) {
               return caches.delete(cacheName); // 清理旧缓存
             }
           })
         );
       })
     );
   });
   

3. 高级优化技巧

   • 预缓存策略：在 install 阶段缓存所有关键路径资源
   • 运行时缓存：对动态请求进行缓存（如 API 数据使用"网络优先"策略）
   • 缓存容量管理：通过 LRU（最近最少使用）算法控制缓存数量
   • 后台同步：使用 Background Sync 实现离线操作队列

4. 实际注意事项

   • 避免缓存跨域请求的 opaque response（会导致资源不可读）
   • 对 HTML 文档使用"网络优先"策略确保内容时效性
   • 通过更新 CACHE_NAME 强制刷新所有缓存
   • 在 unload 事件中清理临时资源

总结
Service Worker 通过缓存策略将静态资源存储在本地，减少网络请求延迟，显著提升重复访问性能。配合适当的更新机制，既能保证离线可用性，又能确保用户获取最新内容。这种技术特别适合 PWA（渐进式网页应用）场景，是实现原生应用体验的核心技术之一。