Angular PWA已安装应用更新后HTML缓存未刷新问题求助

1. 修正ngsw-config.json配置 #

你当前配置中的顶级cacheConfig字段不符合Angular Service Worker的配置规范，属于无效配置，缓存策略需要对应到具体资源组。修改后的配置如下：

{
  "version": 4,
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 100,
        "maxAge": "3d"
      },
      "resources": {
        "files": ["/favicon.ico", "/index.html", "/manifest.webmanifest", "/*.css", "/*.js"]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": ["/assets/**", "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"]
      }
    }
  ]
}

注意每次发布新版本都要手动提升version字段值，确保Service Worker能识别配置变更。

2. 优化Service Worker更新逻辑 #

原逻辑仅在应用初始化时执行一次更新检查，且没有处理异步执行时序问题，修改后的代码如下：

constructor(public baseService: BaseService, public webapi: WebapiService, private swUpdate: SwUpdate) {
  this.baseService.initialize();
  this.baseService.setWidth(window.innerWidth);
  if (this.swUpdate.isEnabled) {
    // 新版本可用时触发更新
    this.swUpdate.available.subscribe(async () => {
      try {
        await this.swUpdate.activateUpdate();
        // 可在此处添加用户提示，由用户主动触发刷新，避免打断操作
        window.location.reload();
      } catch (error) {
        console.error('更新激活失败', error);
      }
    });
    // 定时检查更新：每10分钟检查一次
    setInterval(() => {
      this.swUpdate.checkForUpdate().catch(error => {
        console.error('检查更新失败', error);
      });
    }, 10 * 60 * 1000);
    // 页面获焦时检查更新，覆盖用户长期后台挂起场景
    window.addEventListener('focus', () => {
      this.swUpdate.checkForUpdate().catch(error => {
        console.error('检查更新失败', error);
      });
    });
    // 初始化时检查更新
    this.swUpdate.checkForUpdate().catch(error => {
      console.error('检查更新失败', error);
    });
  }
}

3. 配置服务器响应头 #

务必在服务器/CDN层对以下3个文件设置不缓存的响应头，避免中间节点缓存旧配置导致更新失效：

• /index.html
• /ngsw.json
• /manifest.webmanifest
  响应头配置值：

Cache-Control: no-cache, no-store, must-revalidate
Expires: 0

4. 兜底缓存清理逻辑 #

如果仍有用户出现旧缓存无法更新的问题，可添加强制清理逻辑，打包时在environment.ts中维护当前版本号，调用后端接口获取线上最新版本号，版本不匹配时执行缓存清理：

// 版本不匹配时执行
async function clearOldCache() {
  const cacheKeys = await caches.keys();
  for (const key of cacheKeys) {
    if (key.startsWith('ngsw:')) {
      await caches.delete(key);
    }
  }
  window.location.reload();
}

5. 打包配置校验 #

Angular构建时添加--output-hashing=all参数，确保所有静态资源带哈希后缀，避免资源重名导致的缓存命中问题，构建命令示例：

ng build --prod --output-hashing=all

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