优化前端应用中的 Service Worker 缓存策略与动态内容处理

描述
Service Worker 是浏览器在后台运行的脚本，可拦截网络请求并实现灵活的缓存策略。对于动态内容（如 API 数据或用户个性化信息），不当的缓存可能导致数据过期或逻辑错误。本知识点探讨如何设计 Service Worker 缓存策略，平衡动态内容的实时性与性能。

解题过程

1. 理解动态内容的挑战

   • 动态内容通常需要频繁更新（如用户消息、实时股价），但直接使用缓存可能返回旧数据。
   • 目标：在减少网络请求的同时，确保内容及时性。

2. 选择缓存策略：网络优先 vs. 缓存优先

   • 网络优先（Network First）：优先请求网络，失败时回退到缓存。
     • 适用场景：需要高实时性的数据（如支付结果）。
     • 缺点：若网络慢，用户需等待超时才能看到缓存内容。
   • 缓存优先（Cache First）：优先使用缓存，缺失时再请求网络。
     • 适用场景：静态资源或可容忍短暂过期的数据（如用户头像）。
     • 风险：动态内容可能过期。

3. 动态内容的混合策略：Stale-While-Revalidate

   • 步骤：
     1. 同时返回缓存中的旧数据（若存在）以快速渲染。
     2. 在后台发起网络请求，更新缓存以备下次使用。
   • 优势：兼顾加载速度和数据更新。
   • 示例代码：

     self.addEventListener('fetch', (event) => {
       if (event.request.url.includes('/api/')) {
         event.respondWith(
           caches.open('dynamic-cache').then((cache) => {
             return fetch(event.request).then((networkResponse) => {
               cache.put(event.request, networkResponse.clone()); // 更新缓存
               return networkResponse;
             }).catch(() => {
               return cache.match(event.request); // 网络失败时回退缓存
             });
           })
         );
       }
     });
     

4. 缓存失效与版本控制

   • 问题：动态内容更新后，旧缓存需及时清除。
   • 解决方案：
     • 在 Service Worker 安装时使用版本号标记缓存（如 dynamic-cache-v2），淘汰旧版本。
     • 通过 API 响应头（如 Cache-Control: max-age=60）控制缓存有效期。

5. 处理用户敏感数据

   • 避免缓存私有数据（如身份信息），可在缓存前检查请求头或 URL 规则。
   • 示例：对含 Authorization 头的请求跳过缓存，直接访问网络。

6. 性能权衡与监控

   • 使用 navigator.serviceWorker.controller.postMessage 记录缓存命中率，调整策略。
   • 结合 Performance API 比较策略切换前后的加载时间。

总结
动态内容缓存需根据业务场景选择策略，通过 Stale-While-Revalidate 平衡速度与实时性，同时严格管理缓存生命周期和敏感数据，最终通过监控数据持续优化。