Angular 6 PWA在Safari中HTML5音频播放器显示Live Broadcast问题

这个问题我之前也碰到过，确实是Angular Service Worker在生产环境下的一个小坑——当它拦截音频资源请求时，返回的响应会带上Transfer-Encoding: chunked头，而Safari浏览器会把带有这个头的音频判定为直播流，所以才会显示那个烦人的“Live Broadcast”提示；Chrome的处理逻辑不同，因此不会出现这个问题。

下面给你几个靠谱的解决办法，按易用性和维护性排序：

1. 修改Angular Service Worker配置，让音频资源绕过SW的特殊处理 #

最简单的方案是在ngsw-conf.json中添加一个dataGroups，专门处理你的音频资源，让Service Worker采用网络优先的策略获取资源，这样就能避免返回带chunked编码的响应：

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "audio-resources",
      "urls": [
        "https://firebasestorage.googleapis.com/**/*.mp3"
      ],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 10,
        "maxAge": "30d",
        "timeout": "3s"
      }
    }
  ]
}

这里的freshness策略会优先从网络获取音频资源，同时也会缓存一份，既保证了响应头符合Safari的要求，又不影响PWA的离线体验。

2. 为Firebase存储中的音频文件设置正确的响应头 #

如果不想修改SW配置，也可以直接在Firebase控制台调整音频文件的元数据：

1. 打开Firebase存储，找到目标音频文件
2. 点击文件右侧的三个点，选择「文件元数据」
3. 添加Content-Length头，值设为文件的实际大小（可在本地查看文件属性获取）
4. 如果存在Transfer-Encoding头，直接删除或修改为identity

这样Safari就不会把该音频识别为直播流了。

3. 临时测试方案：给音频URL添加随机参数（不推荐长期使用） #

如果只是临时验证，可以在音频的src末尾添加一个随机参数（比如?t=1698765432），这样Service Worker会把它当成新请求，不会返回缓存的带chunked编码的响应。但这个方法仅适合临时测试，长期维护成本很高。

验证步骤 #

修改配置后，重新执行生产构建：

ng build --prod

将构建产物重新部署到Firebase，用Safari访问验证，音频播放器应该就不会再显示“Live Broadcast”提示了。

内容的提问来源于stack exchange，提问作者Daniel Muñoz