无法完全清除PWA缓存问题排查求助

你遇到的旧资源出现在新缓存里的问题，核心原因有两个：

1. HTTP 缓存干扰：cache.addAll 和 fetch 默认会复用浏览器的 HTTP 缓存。如果服务器给静态资源设置了较长缓存有效期，浏览器会直接从本地 HTTP 缓存读取旧资源，哪怕清空了 Service Worker 缓存，这些旧资源依然会被重新写入新缓存。
2. Service Worker 激活与页面控制滞后：旧 Service Worker 在新 SW 完成激活前仍会控制已打开页面，若旧 SW 的 fetch 事件还在向缓存写入资源，会和新 SW 的操作冲突；且新 SW 激活后若未立即接管页面，当前页面请求仍由旧 SW 处理，导致旧资源流入新缓存。

策略1 & 策略2：删除缓存后重新缓存 #

• 依赖同名缓存，无法彻底隔离新旧缓存，旧 SW 未替换前可能仍在向该缓存写入资源。
• 未处理 HTTP 缓存问题，cache.addAll 会直接复用 HTTP 缓存的旧资源。

策略3：版本化缓存（方向正确但细节有误） #

• 用日期作为版本号有风险：短时间内多次部署可能导致版本号重复，建议用固定版本字符串（如v1、v2）或构建时注入的哈希值。
• activate 阶段未调用 self.clients.claim()，新 SW 激活后无法立即控制所有页面，旧 SW 仍会处理请求。
• 同样未处理 HTTP 缓存，cache.addAll 依然可能拉取旧资源。

1. 服务器端缓存头配置（关键前提） #

• 给 Service Worker 脚本（如sw.js）设置：Cache-Control: no-cache，确保浏览器每次检查 SW 更新。
• 给静态资源（JS/CSS/图片等）添加内容哈希到文件名（如app.abc123.js），并设置Cache-Control: max-age=31536000, immutable，让浏览器永久缓存资源，文件名变化时自动拉取新资源。

2. 修正版本化缓存的 Service Worker 代码 #

// 用固定版本号或构建时注入的哈希值，避免日期重复问题
const CACHE_VERSION = 'v2';
const CACHE_NAME = `appCache-${CACHE_VERSION}`;
const PRECACHE_ASSETS = [
  // 你的预缓存资源列表
  '/',
  '/index.html',
  '/app.abc123.js'
];

self.addEventListener('install', (e) => {
  e.waitUntil(
    // 强制绕过 HTTP 缓存，拉取最新资源
    caches.open(CACHE_NAME).then(cache => {
      return cache.addAll(
        PRECACHE_ASSETS.map(url => new Request(url, { cache: 'reload' }))
      );
    }).then(() => {
      // 安装完成后立即跳过等待，进入激活阶段
      self.skipWaiting();
    })
  );
});

self.addEventListener('activate', (e) => {
  e.waitUntil(
    Promise.all([
      // 删除所有旧版本缓存
      caches.keys().then(cacheKeys => {
        return Promise.all(
          cacheKeys.filter(key => key !== CACHE_NAME).map(key => caches.delete(key))
        );
      }),
      // 立即接管所有打开的页面
      self.clients.claim()
    ])
  );
});

// 修正后的 Network-First 策略
self.addEventListener('fetch', (e) => {
  // 跳过非同源请求或非GET请求
  if (!e.request.url.startsWith(self.location.origin) || e.request.method !== 'GET') {
    return;
  }

  e.respondWith(
    caches.open(CACHE_NAME).then(cache => {
      return fetch(e.request, { cache: 'no-cache' }) // 强制验证资源新鲜度
        .then(networkResponse => {
          // 更新缓存为最新网络响应
          cache.put(e.request, networkResponse.clone());
          return networkResponse;
        })
        .catch(() => {
          // 网络失败时从缓存读取
          return cache.match(e.request);
        });
    })
  );
});

3. 额外注意事项 #

• 预缓存资源列表要准确，避免缓存不必要的资源。
• 测试时可打开浏览器 DevTools「Application」面板，勾选「Disable cache」确保获取最新资源。
• 部署新 SW 版本时，需确保 SW 脚本内容有变化（如修改版本号），否则浏览器不会触发更新。

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