设计动态内容优先的 PWA 离线缓存策略与更新机制

题目

设计动态内容优先的 PWA 离线缓存策略与更新机制

信息

• 类型：问答
• 难度：⭐⭐⭐

考点

Service Worker 高级缓存策略, 动态内容更新机制, 离线用户体验优化, 缓存版本控制, 错误回退处理

快速回答

实现动态内容优先的 PWA 离线策略需要：

• 使用 Stale-While-Revalidate 混合策略平衡实时性与离线能力
• 通过版本化缓存键和激活期清理实现缓存更新
• 实现后台同步和用户触发的更新机制
• 添加缓存健康检查和回退策略
• 使用 IndexedDB 存储动态数据配合 Cache API

核心挑战与设计原则

在动态内容应用中（如新闻/社交平台），需解决：1) 首次加载性能 2) 内容实时性 3) 复杂离线场景 4) 缓存更新一致性。核心原则：优先展示最新内容，无缝降级到缓存，后台静默更新。

分层缓存策略实现

// Service Worker 安装阶段 - 预缓存核心静态资源
const CORE_CACHE = 'core-v2';
const DYNAMIC_CACHE = 'dynamic-v2';

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CORE_CACHE).then(cache => {
      return cache.addAll([
        '/css/main.css',
        '/js/app.js',
        '/offline.html'
      ]);
    })
  );
});

// 拦截 fetch 请求 - 动态内容优先策略
self.addEventListener('fetch', event => {
  // 动态 API 请求处理
  if (event.request.url.includes('/api/')) {
    event.respondWith(
      // 混合策略：立即返回缓存 + 后台更新
      caches.match(event.request).then(cachedResp => {
        const fetchPromise = fetch(event.request)
          .then(networkResp => {
            // 更新动态缓存
            caches.open(DYNAMIC_CACHE).then(cache => {
              cache.put(event.request, networkResp.clone());
            });
            return networkResp;
          })
          .catch(err => { /* 错误处理见下文 */ });

        // 返回缓存（如有）或等待网络
        return cachedResp || fetchPromise;
      })
    );
  } 
  // 静态资源处理（Cache First）
  else {
    event.respondWith(
      caches.match(event.request).then(resp => {
        return resp || fetch(event.request).then(response => {
          return caches.open(DYNAMIC_CACHE).then(cache => {
            cache.put(event.request, response.clone());
            return response;
          });
        });
      })
    );
  }
});

// 激活阶段清理旧缓存
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys => {
      return Promise.all(keys.map(key => {
        if (key !== CORE_CACHE && key !== DYNAMIC_CACHE) {
          return caches.delete(key); // 清理旧版本缓存
        }
      }));
    })
  );
});

关键机制详解

1. 动态内容更新策略

• Stale-While-Revalidate：对 API 请求优先返回缓存，同时后台更新
• 版本控制：通过缓存名称版本号管理更新周期
• 差异化缓存：核心静态资源（core-v2）与动态内容（dynamic-v2）分离

2. 后台同步与用户触发更新

// 注册后台同步
self.addEventListener('sync', event => {
  if (event.tag === 'update-content') {
    event.waitUntil(updateDynamicContent());
  }
});

// 前端触发更新
function triggerUpdate() {
  navigator.serviceWorker.ready.then(registration => {
    registration.sync.register('update-content');
  });
}

// 更新逻辑
async function updateDynamicContent() {
  const cache = await caches.open(DYNAMIC_CACHE);
  const requests = await cache.keys();

  await Promise.all(requests.map(async request => {
    if (!request.url.includes('/api/')) return;

    try {
      const networkResp = await fetch(request);
      await cache.put(request, networkResp);
    } catch (err) {
      console.error(`更新失败: ${request.url}`, err);
    }
  }));
}

3. 错误处理与降级方案

• 网络失败：捕获 fetch 错误返回缓存或离线页面
• 缓存健康检查：定期验证缓存有效性
• 降级策略：

  // 在 fetch 事件中
  .catch(err => {
    // 检查是否存在旧缓存
    return caches.match(event.request).then(cachedResp => {
      // 返回缓存或通用离线页面
      return cachedResp || caches.match('/offline.html');
    });
  })

最佳实践

• 缓存时效控制：对动态数据设置 max-age（如 10 分钟）
• 存储配额管理：监控 navigator.storage.estimate() 避免超出配额
• 更新提示：通过 postMessage 通知前端刷新 UI
• 关键请求标记：使用 workbox 的 warmStrategyCache 预加载

常见错误

• 缓存膨胀：未设置缓存上限或清理机制
• 版本冲突：Service Worker 更新后未清理旧缓存
• 内存泄漏：未关闭 IndexedDB 连接或缓存大文件
• 更新死锁：并行更新请求未做队列管理

扩展知识

• Workbox 高级策略：

  import {registerRoute} from 'workbox-routing';
  import {StaleWhileRevalidate} from 'workbox-strategies';
  
  registerRoute(
    ({url}) => url.pathname.startsWith('/api/'),
    new StaleWhileRevalidate({
      cacheName: 'api-cache',
      plugins: [/* 可添加过期插件 */]
    })
  );

• 后台定期同步：使用 periodicSync API（需浏览器支持）
• 预测性预加载：基于用户行为预取资源
• 离线数据分析：通过 Background Fetch 延迟提交