使用Service Worker缓存慢API请求并定期重取（带JWT认证）是否可行？

方案可行性 #

完全可行。Service Worker的核心能力之一就是缓存网络请求响应，针对你这种数据变更频率极低（每周一次）的慢速API，用Service Worker缓存能大幅减少重复请求、提升页面加载速度，同时结合定期更新机制可以保证数据的新鲜度。

关键注意事项 #

1. 缓存策略与缓存键设计

• 采用Cache First策略优先返回缓存数据，同时在后台定期触发更新（而非每次请求都校验），匹配数据低变更的特性。
• 缓存键必须包含完整的API请求URL（包括param1、param2等查询参数），避免不同参数的请求复用同一缓存条目。示例：

  // 缓存时使用完整URL作为键
  caches.open('api-cache-v1').then(cache => {
    cache.put('/data?param1=option1&param2=option2', response.clone());
  });
  

2. JWT认证的传递与处理

• Service Worker无法直接访问localStorage，如果JWT存在localStorage中，需要通过页面与SW的postMessage机制传递JWT；若JWT存储在Cookie中，需确保Cookie不是HttpOnly（否则SW无法读取），或依赖浏览器自动携带Cookie（需API支持Cookie认证）。
• 定期更新时要处理JWT过期的情况：若更新请求返回401/403，需通知前端页面重新获取有效JWT，避免后续更新失败。

3. 可靠的定期更新机制

• 不要依赖Service Worker的后台存活能力（浏览器会自动终止闲置的SW），更可靠的方式是：
  • 每次页面加载时，检查缓存条目的创建时间，若超过7天则触发更新请求；
  • 利用Cache StorageAPI给缓存条目附加时间戳，示例：

    // 缓存时存入时间戳
    const responseData = await response.json();
    const responseWithTimestamp = new Response(JSON.stringify({
      data: responseData,
      timestamp: Date.now()
    }));
    cache.put(request.url, responseWithTimestamp);
    
    // 读取时判断是否过期
    const cachedResponse = await cache.match(request.url);
    const cachedData = await cachedResponse.json();
    if (Date.now() - cachedData.timestamp > 7 * 24 * 60 * 60 * 1000) {
      // 触发更新逻辑
    }
    

• 可选使用Workbox的Background Sync功能，确保更新请求在网络恢复时自动重试。

4. 缓存有效期与清理

• 定期清理过期缓存，避免缓存膨胀占用存储空间。可以在SW激活时遍历缓存条目，删除超过7天的内容：

  self.addEventListener('activate', event => {
    event.waitUntil(
      caches.open('api-cache-v1').then(cache => {
        return cache.keys().then(keys => {
          return Promise.all(
            keys.map(async key => {
              const cachedResponse = await cache.match(key);
              const cachedData = await cachedResponse.json();
              if (Date.now() - cachedData.timestamp > 7 * 24 * 60 * 60 * 1000) {
                return cache.delete(key);
              }
            })
          );
        });
      })
    );
  });
  

5. 错误处理与降级

• 当更新请求失败（网络错误、API异常）时，必须保留旧缓存，避免用户无法获取数据；
• 对不支持Service Worker的浏览器，直接发起API请求做降级处理。

6. HTTPS环境要求

• Service Worker仅在HTTPS环境下生效（localhost开发环境除外），确保生产部署环境满足HTTPS要求。

内容的提问来源于stack exchange，提问作者Mikita Shautsou