如何强制客户端浏览器清除PWA的worker缓存以更新老用户访问内容

核心解决方案：部署注销用Service Worker文件 #

这是唯一不需要用户操作就能自动清理旧缓存的方案，核心逻辑是利用旧Service Worker会定期拉取注册路径下的sw.js更新的机制，替换为清理逻辑：

• 在新服务器的根目录部署名为sw.js的文件，写入以下代码：

// 跳过等待直接激活新sw
self.addEventListener('install', () => {
  self.skipWaiting();
});

self.addEventListener('activate', async () => {
  // 清理所有Cache Storage缓存
  const cacheKeys = await caches.keys();
  await Promise.all(cacheKeys.map(key => caches.delete(key)));
  
  // 注销当前所有Service Worker实例
  await self.registration.unregister();
  
  // 强制刷新所有打开的站点页面，拉取新站点内容
  const clients = await self.clients.matchAll({ type: 'window' });
  clients.forEach(client => client.navigate(client.url));
});

• 若排查到旧站点的Service Worker注册路径不是根目录的sw.js（比如为/assets/sw.js、/pwa/sw.js等），需要在对应路径也部署相同内容的同名文件。
• 给sw.js的响应头添加Cache-Control: no-cache，确保每次请求都拉取最新版本，不会被HTTP缓存拦截。
• 若旧站点使用了已废弃的Application Cache机制，同步在旧的.appcache manifest文件路径下部署空的manifest文件，且设置响应头Expires: 0强制过期。

兜底补充方案 #

在新站点的所有HTML页面的<head>最顶部添加内联JS，优先执行以下逻辑，覆盖第一次加载到新HTML的用户场景：

(async () => {
  // 注销所有已注册的Service Worker
  if ('serviceWorker' in navigator) {
    const registrations = await navigator.serviceWorker.getRegistrations();
    await Promise.all(registrations.map(reg => reg.unregister()));
  }
  // 清理所有Cache Storage缓存
  if ('caches' in window) {
    const cacheKeys = await caches.keys();
    await Promise.all(cacheKeys.map(key => caches.delete(key)));
  }
  // 清理完成后刷新页面加载新站点
  window.location.reload();
})();

生效逻辑说明 #

旧Service Worker默认最长24小时会自动检查一次注册路径的sw.js文件更新，只要用户的设备联网触发一次更新检查、拉取到新的注销用sw.js，就会自动执行所有缓存清理逻辑，无需用户手动操作。90%以上的活跃用户会在3天内自动完成更新，剩余低活跃用户打开站点时也会第一时间触发更新流程。

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