Angular添加PWA后iPhone等设备无法加载且控制台无报错求助

问题根因 #

你的故障完全是Angular Service Worker（NGSW）的预取资源加载失败导致的，核心触发点有两个：

1. 你已经移除了Google Tag，但ngsw.config.json里仍然保留了https://www.googletagmanager.com/**作为prefetch模式的预取资源。国内网络环境下该域名无法正常访问，而NGSW的prefetch安装模式要求所有标记的资源全部加载成功才能完成服务工作者的安装，只要有一个资源加载失败，整个应用初始化就会卡住。
2. iOS Safari对Service Worker的失败容错机制比PC端浏览器严格得多，且旧的Service Worker会长期缓存在用户端，普通的清理缓存操作无法完全移除已注册的Service Worker，所以才会出现PC正常、iOS白屏、必须挂VPN才能加载的现象。
   另外开发模式下无报错是因为默认Angular仅在生产构建时启用Service Worker，你看到的白屏仍然是用户端残留的旧Service Worker导致的，新的开发构建代码没有被加载。

修复步骤 #

1. 修正NGSW配置 #

删除ngsw.config.json中已经废弃的Google Tag相关预取资源，如果你部署在国内环境，建议同时将谷歌字体、FontAwesome等海外CDN资源替换为国内可用源，或者将installMode改为lazy避免预取失败影响应用启动。
修改后的assetGroups示例：

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ],
        "urls": [
          // 替换为国内可访问的谷歌字体替代CDN
          // 替换为国内可访问的FontAwesome替代CDN
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

2. 强制清理用户端残留的旧Service Worker #

如果后续不需要使用PWA功能，可以直接在index.html的<head>中加入以下脚本，主动卸载所有已注册的Service Worker，彻底清除历史缓存影响：

<script>
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.getRegistrations().then(function(registrations) {
    for(let registration of registrations) {
      registration.unregister();
    }
  });
}
</script>

如果需要保留PWA功能，可以在应用初始化时注入SwUpdate服务，主动触发版本更新，强制替换旧的Service Worker：

// app.component.ts
import { SwUpdate } from '@angular/service-worker';
constructor(private swUpdate: SwUpdate) {
  if (this.swUpdate.isEnabled) {
    this.swUpdate.checkForUpdate();
    this.swUpdate.versionUpdates.subscribe(event => {
      if (event.type === 'VERSION_READY') {
        window.location.reload();
      }
    });
  }
}

3. 重新构建部署 #

修改完成后使用ng build --prod构建生产包重新部署即可，部署后首次访问可能需要1-2次刷新完成旧Service Worker的替换。

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