Angular PWA主屏幕图标更新失败？Firebase部署后重装仍无效

我之前也碰到过一模一样的情况，PWA图标更新后死活不生效，哪怕卸载重装都没用，折腾了好久才摸清楚几个靠谱的解决办法，结合你的Angular + Firebase环境，给你梳理一下：

1. 先搞定Service Worker的缓存问题 #

Angular自带的Service Worker（就是你配置的ngsw-config.json）会自动缓存静态资源，包括图标和manifest文件。如果只是替换了图标内容但没改文件名，SW可能会判定这是同一个资源，继续调用旧缓存。

• 最稳妥的办法：修改图标文件名
  给你的图标加上版本标识，比如把cash-money-wallet_64.png改成cash-money-wallet_v2_64.png，然后同步更新manifest.json和index.html里的所有图标引用。这样构建部署后，SW会把新图标当成全新资源，不会再沿用旧缓存。

• 主动触发SW更新
  如果你不想改文件名，可以在Angular应用里加一段代码，让SW主动检查更新。在app.component.ts中添加：

import { SwUpdate } from '@angular/service-worker';

constructor(private swUpdate: SwUpdate) {
  if (swUpdate.isEnabled) {
    // 页面加载时检查更新
    swUpdate.checkForUpdate().then(() => {
      swUpdate.available.subscribe(() => {
        if (confirm('应用有新版本啦，要不要刷新一下？')) {
          window.location.reload();
        }
      });
    });
  }
}

这样用户打开应用时，SW会自动检查并提示更新，更新完成后新图标就会生效。

2. 禁止Firebase缓存Manifest和图标 #

Firebase Hosting的CDN会默认缓存静态资源，哪怕你更新了文件，CDN可能还在返回旧版本。需要修改firebase.json的缓存规则，让manifest和图标不被缓存：

打开你的firebase.json，添加headers配置：

{
  "hosting": {
    // 保留你原有的其他配置
    "headers": [
      {
        "source": "/manifest.json",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          }
        ]
      },
      {
        "source": "/assets/icons/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          }
        ]
      }
    ]
  }
}

然后重新部署：firebase deploy --only hosting，这样浏览器每次都会请求最新的文件。

3. 清理设备端的顽固缓存 #

有些安卓系统在卸载PWA后，还会偷偷保留图标缓存。可以试试这两步：

• 打开手机设置 → 应用 → 找到你用的浏览器（比如Chrome） → 存储 → 清除缓存和数据；
• 或者在Chrome里打开你的应用页面，点击地址栏的锁图标 → 站点设置 → 清除存储，彻底删掉这个站点的所有缓存。

4. 验证更新是否生效 #

最后可以用Chrome DevTools确认一下：

• 打开应用页面，按F12进入DevTools；
• 切换到Application标签，点击左侧的Manifest，看看显示的图标是不是新的；
• 直接访问你配置的图标路径，确认新图标已经成功上传到Firebase服务器。

按照这些步骤来，应该就能解决图标不更新的问题了！

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