如何解决旧访客浏览器缓存及Service Worker导致的网站显示异常问题

核心原因 #

旧版网站启用了Angular Service Worker，它会在浏览器本地缓存静态资源和页面内容，即使用户访问的域名已经重定向到新版网站，Service Worker仍会优先加载本地缓存的旧版内容，不会主动请求新版资源。

具体解决方案 #

1. 拦截旧Service Worker请求 #

在AWS负载均衡器或CloudFront（若使用）中添加规则：

• 当请求路径包含service-worker.js时，直接返回444无响应状态码或空响应。这会强制浏览器终止旧Service Worker的运行，因为它无法获取有效脚本，浏览器会自动卸载该Worker。

2. 配置严格的HTTP缓存头 #

在新版网站的AWS部署配置（如S3+CloudFront）中设置缓存策略：

• 对index.html设置Cache-Control: no-cache, no-store, must-revalidate，确保浏览器每次都请求最新版本。
• 对JS/CSS/图片等静态资源，设置Cache-Control: public, max-age=31536000, immutable，同时确保新版资源使用内容哈希命名（Nuxt默认支持），避免新旧资源冲突。

3. 触发旧Service Worker自动更新 #

若还能临时访问旧版部署环境，修改旧版ngsw-config.json中的版本号后重新部署：

{
  "appData": {
    "version": "v2" // 设置为比旧版本更高的编号
  }
}

Angular Service Worker会检测到版本更新，自动清理缓存并引导用户刷新页面，之后再彻底下线旧版部署。

4. 页面级兜底提示 #

在新版网站入口页面添加检测逻辑，提示用户刷新：

if (navigator.serviceWorker) {
  caches.keys().then(keys => {
    const hasOldCache = keys.some(key => key.startsWith('ngsw:'));
    if (hasOldCache) {
      const updatePrompt = document.createElement('div');
      updatePrompt.style.cssText = 'position:fixed;top:0;left:0;right:0;background:#ff4444;color:white;padding:10px;text-align:center;';
      updatePrompt.innerHTML = '网站已更新，请 <button onclick="location.reload(true)">点击刷新</button> 获取最新版本';
      document.body.appendChild(updatePrompt);
    }
  });
}

这段代码会自动检测旧版Angular的Service Worker缓存，显示提示引导用户刷新。

5. 强制卸载旧Service Worker #

在AWS DNS或负载均衡层，针对www.jobs.af的请求，除重定向到jobs.af外，添加响应头Service-Worker-Allowed: /，配合对service-worker.js请求返回444状态码，彻底让浏览器卸载旧Service Worker。

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