Angular PWA访问/index.html离线可用，访问/报错504求助

核心问题是Angular Service Worker（NGSW）未将根路径 / 的请求映射到已缓存的 /index.html，导致离线刷新时无法命中缓存，触发504错误。以下是针对性的解决步骤：

1. 更新ngsw-config.json缓存规则 #

在assetGroups的app资源组中，将根路径 / 添加到files数组，确保NGSW缓存根路径请求对应的响应：

{
  "$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"
        ]
      }
    },
    // 其余配置保持不变
  ]
}

2. 验证缓存条目 #

修改配置后重新构建并部署应用，通过浏览器DevTools的Application > Cache Storage > ngsw-cache查看：

• 确认存在/和/index.html两个缓存条目
• 检查两个条目的响应内容是否一致（均为index.html的内容）

3. 额外排查点 #

• 确认Service Worker已正确激活：在Application > Service Workers中检查SW处于activated状态，无更新错误
• 清除旧缓存：部署新版本前，手动清除浏览器旧缓存，避免旧SW规则干扰

原因说明 #

NGSW默认只会缓存files数组中明确列出的路径，虽然index属性指定了/index.html作为SPA入口，但根路径 / 并未被显式加入缓存列表，因此离线时SW无法匹配该请求，转而尝试网络请求导致504。添加/到缓存列表后，SW会将根路径请求映射到已缓存的index.html内容。

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