Angular PWA离线可用但刷新返回504问题求助

问题根源 #

离线刷新页面返回504错误的核心原因是ngsw-config.json中navigationRequestStrategy设置为freshness：

• 该策略会优先尝试通过网络获取导航请求（比如页面刷新操作），当处于离线状态时，网络请求直接失败，因此返回504错误。
• 之前访问过的页面能正常工作，是因为Service Worker已经缓存了该页面的资源，但刷新时的导航请求严格遵循freshness规则，不会 fallback 到缓存内容。

解决步骤 #

1. 修改导航策略为performance #

将navigationRequestStrategy改为performance，该策略会优先使用缓存中的资源，仅当缓存不存在时才尝试网络请求，完全适配离线场景下的页面刷新需求。

修改后的ngsw-config.json核心片段：

{
  "$schema": "../../node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "navigationRequestStrategy": "performance", // 替换原有的freshness
  "assetGroups": [
    // 原有assetGroups配置保持不变
  ],
  "dataGroups": [
    // 原有dataGroups配置保持不变
  ]
}

2. 适配预渲染静态页面（可选） #

如果你的预渲染生成了独立的静态HTML文件（如/about.html），需要确保这些文件被Service Worker缓存，在app组的files数组中添加"/**/*.html"：

"assetGroups": [
  {
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/manifest.webmanifest",
        "/*.css",
        "/*.js",
        "/**/*.html" // 加入预渲染的静态HTML文件
      ]
    }
  },
  // 其他assetGroups配置不变
]

3. 重新构建部署 #

修改配置后，重新构建生产环境包并部署，确保Service Worker更新生效：

ng build --prod

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