Angular 15 PWA离线模式本地配置文件加载失败及ngsw.json请求异常

1. 检查ngsw-config.json资源配置 #

确保你的本地配置文件（如serverconfig.json）已添加到assetGroups的resources列表中——Service Worker仅会缓存此处声明的资源。
示例配置：

{
  "$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",
          "/assets/serverconfig.json" // 替换为你的配置文件实际路径
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**/*"
        ]
      }
    }
  ]
}

注意路径需与文件实际位置完全匹配，若配置文件在根目录则写/serverconfig.json。

2. 验证Service Worker缓存状态 #

• 执行生产构建：ng build --prod（或ng build --configuration production）
• 用静态服务器启动构建产物：npx http-server dist/你的项目名
• 打开Chrome DevTools → Application → Service Workers，确认Service Worker已激活
• 查看Cache Storage，检查配置文件是否在缓存列表内

3. 修复ngsw.json请求失败问题 #

ngsw.json?ngsw-cache-bust请求失败多因构建后ngsw.json未正确生成或路径错误：

• 确认dist目录下存在ngsw.json文件
• 检查angular.json中PWA配置的ngswConfigPath指向正确：

"projects": {
  "你的项目名": {
    "architect": {
      "build": {
        "options": {
          "serviceWorker": true,
          "ngswConfigPath": "src/ngsw-config.json"
        }
      }
    }
  }
}

4. 统一动态加载路径 #

若配置文件通过HTTP请求动态加载，确保请求路径与ngsw-config.json中声明的完全一致——./serverconfig.json与/serverconfig.json会被视为不同资源，需避免路径变种。

5. 清除旧缓存重试 #

旧缓存可能导致异常：

• 在Chrome DevTools → Application → Storage，点击"Clear site data"
• 重启浏览器后重新加载应用，让Service Worker重新安装并缓存资源

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