Angular PWA中index.html无法离线缓存的问题解决问询

核心问题分析 #

你的情况是index.html未被Service Worker纳入缓存（未出现在ngsw.json的urls列表），但手动添加到angular.json的assets后，又导致Angular无法自动注入runtime脚本标签。这是因为错误地将index.html标记为静态资源，绕过了Angular的构建注入流程。

正确配置步骤 #

1. 修正ngsw-config.json配置 #

确保ngsw-config.json的assetGroups中明确包含index.html，让Service Worker自动缓存它：

{
  "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/**"
        ]
      }
    }
  ]
}

• 重点：index字段要指向你的入口index.html，同时在app组的resources.files里明确列出/index.html。

2. 重新构建并验证 #

执行构建命令重新生成ngsw.json：

ng build --prod

构建完成后，检查dist/[你的项目名]/ngsw.json，确认index.html出现在assetGroups对应的urls列表中。

3. 移除错误配置：不要把index.html加入angular.json的assets #

将index.html添加到angular.json的assets数组会让Angular把它当作纯静态文件处理，跳过构建时的runtime脚本注入逻辑，这就是你遇到脚本标签消失的原因。务必移除这个配置：

// angular.json 中要删除的配置项
"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/index.html" // 删掉这一行
]

验证离线可用性 #

1. 启动本地服务（比如用npx http-server dist/[你的项目名]）
2. 在Chrome中打开页面，打开DevTools的Application > Service Workers，勾选Offline
3. 刷新页面，确认能正常加载index.html及相关资源

内容的提问来源于stack exchange，提问作者Wouter van Koppen