已安装PWA应用图标更新失败，求解决方法

• 更新manifest版本号
  在manifest.json里新增或修改version字段，比如从"version": "1.0"改成"version": "1.1"。浏览器会通过版本号识别manifest更新，进而重新拉取相关资源。

• 清理service worker缓存
  旧图标大概率被service worker缓存了，得在serviceWorker.js里处理缓存清理：

  self.addEventListener('activate', (event) => {
    event.waitUntil(
      caches.keys().then((cacheNames) => {
        return Promise.all(
          cacheNames.filter((cacheName) => {
            // 过滤掉旧缓存，比如带旧版本标识的缓存
            return cacheName.startsWith('my-app-') && cacheName !== 'my-app-v1.1';
          }).map((cacheName) => {
            return caches.delete(cacheName);
          })
        );
      })
    );
  });
  

  另外在页面里主动触发service worker更新：

  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/serviceWorker.js').then((registration) => {
      registration.update();
    });
  }
  

• 分设备针对性处理

  • Windows Chrome：直接卸载PWA再重装。Windows会把图标缓存到本地应用数据目录，光更新manifest没法触发替换。
  • iPhone Safari：
    1. 确保manifest.json里所有尺寸的图标都加了缓存破折号（比如?v=2），路径和文件名正确。
    2. 打开Safari访问应用，点分享按钮选“添加到主屏幕”，重新添加一次就能覆盖旧图标。
    3. 检查index.php里的苹果专属meta标签，同步更新缓存破折号：

       <link rel="apple-touch-icon" href="/appicon.png?v=2">
       <link rel="apple-touch-icon" sizes="180x180" href="/appicon-180.png?v=2">
       

  • Android Chrome：
    1. 要么清Chrome应用的缓存，要么卸载PWA后重新安装。
    2. 确认manifest.json里的icons字段包含Android需要的尺寸（比如192x192、512x512），路径无误。

• 手动验证缓存状态
  用浏览器开发者工具（Application -> Cache Storage）检查有没有旧图标缓存，手动删掉后刷新页面，再重装PWA试试。

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