Angular Service Worker部署异常：特定页面404、离线504（本地正常）

一、特定页面（如/jobs）报404但返回正确HTML内容的原因及解决 #

原因分析 #

• 服务器路由配置错误：Angular是单页应用（SPA），所有前端路由请求都需要重定向到index.html。如果服务器仅返回index.html内容但未修正HTTP状态码（仍返回404），就会出现控制台报404但页面内容正常的情况。比如Nginx未正确配置try_files，或者托管平台的重写规则未生效。
• Service Worker导航预缓存配置缺失：ngsw-config.json中的navigationUrls数组未包含/jobs这类路由，导致Service Worker尝试从网络获取该页面，服务器返回404状态码后才返回index.html内容。

解决建议 #

• 修正服务器重写规则：
  • 以Nginx为例，在配置文件中添加：

    location / {
      try_files $uri $uri/ /index.html;
    }
    

    确保所有路由请求都指向index.html，且返回200状态码。
  • 若使用托管平台，需在平台设置中开启SPA重定向规则（如勾选"Rewrite all requests to /index.html"）。
• 更新ngsw-config.json的导航配置：
  在navigationUrls中明确包含/jobs或使用通配符覆盖所有前端路由（注意排除API、静态资源等不需要导航缓存的路径）：

  "navigationUrls": [
    "/",
    "/jobs",
    "/**",
    "!/**/*.{png,jpg,jpeg,gif,svg}",
    "!/**/*.{css,js}",
    "!/**/*?*" // 排除带查询参数的API请求
  ]
  

二、离线加载时Service Worker返回504网关超时的原因及解决 #

原因分析 #

• 导航请求未被正确缓存：Service Worker的预缓存清单或缓存组未包含/jobs等导航页面的资源，离线时无法从缓存读取，只能尝试网络请求，最终超时返回504。
• 缓存策略配置错误：针对导航请求使用了NetworkFirst策略，离线时网络不可用导致请求超时；或者缓存组的匹配规则未覆盖目标路由。
• 部署路径配置错误：若应用部署在子路径下，未指定base-href，导致Service Worker无法正确加载缓存清单，无法完成资源缓存。

解决建议 #

• 确保导航资源被缓存：
  在ngsw-config.json的cacheGroups中配置导航缓存规则：

  "cacheGroups": {
    "navigation": {
      "matches": "/jobs/**",
      "strategy": "CacheFirst",
      "resources": {
        "navigationUrls": ["/jobs"]
      }
    },
    "app-shell": {
      "matches": "/",
      "strategy": "CacheFirst",
      "resources": {
        "files": ["/index.html", "/*.css", "/*.js"]
      }
    }
  }
  

• 修正构建时的base href：
  若部署在子路径（如https://example.com/my-app/），构建时需指定：

  ng build --prod --base-href /my-app/
  

• 清除旧的Service Worker和缓存：
  部署新版本后，手动在浏览器开发者工具的Application面板中清除Service Worker和缓存存储，确保新的Service Worker生效。

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