Angular 6中带版本参数的资源无法被Service Worker离线处理

你遇到的核心问题是Angular Service Worker默认的资源缓存规则不会匹配带查询参数的文件（比如FontAwesome字体末尾的?v=4.7.0），导致离线时这些资源找不到缓存，返回504错误。下面是具体的解决步骤：

1. 修改ngsw-config.json的资源匹配规则 #

Angular Service Worker的配置文件ngsw-config.json里的assetGroups负责定义需要缓存的静态资源，默认规则是精确匹配路径，不包含查询参数。你需要添加能覆盖带参数资源的匹配规则：

打开项目根目录的ngsw-config.json，找到assetGroups下的resources -> files数组，添加针对字体文件（或更通用的带参数资源）的匹配模式：

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js",
          // 新增：匹配带版本参数的字体文件
          "/*.woff2?*",
          "/*.woff?*",
          "/*.ttf?*"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ]
      }
    }
  ]
}

如果你想覆盖所有带查询参数的静态资源，可以添加更通用的**/*?*模式，但建议尽量精准匹配，避免缓存不必要的资源。

2. 重新构建生产环境应用 #

修改配置后必须重新构建生产版本的应用，因为Service Worker的缓存清单是在构建阶段生成的：

ng build --prod

3. 验证缓存效果 #

部署新构建的应用后，打开浏览器开发者工具的Application -> Service Workers面板，查看缓存的资源列表，确认那些带?v=4.7.0的字体文件已经被纳入缓存。之后切换到离线模式刷新页面，就能正常加载这些资源了。

另外，确保你的Angular CLI版本和@angular/pwa、@angular/service-worker版本保持一致（均为6.x系列），避免版本不兼容导致的异常。

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