Angular ngsw-config.json配置glob规则排除指定js文件缓存

问题原因 #

Angular Service Worker 的 ngsw-config.json 文件匹配采用受限glob模式，不支持正则断言、字符类取反等正则语法，仅支持基础的glob通配符：

• * 匹配当前路径下任意数量的字符（不包含路径分隔符/）
• ** 匹配任意层级路径
• ? 匹配单个任意字符
• ! 作为规则开头表示排除匹配到的文件
  你之前使用的正则语法、[^_]这类字符类规则都不在支持范围内，所以配置不生效。

正确配置方案 #

不需要修改文件名，直接在files数组里追加排除规则即可，规则按顺序处理，后写的规则会覆盖前面的匹配结果：

"assetGroups": [
  {
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/manifest.webmanifest",
        "/*.css",
        "/*.js",
        "!/config*.js"
      ]
    }
  }
]

规则说明 #

• /*.js 先匹配所有根目录下的js文件
• !/config*.js 排除根目录下所有文件名以config开头的js文件，!开头表示这是排除规则，*匹配config后面的任意字符
  如果是要排除下划线开头的js文件，把排除规则改成!/_*.js即可。

生效验证 #

配置修改后重新构建项目，在浏览器开发者工具的「应用」标签页，找到Service Worker对应的缓存存储，查看缓存的文件列表确认目标文件已经被排除即可。

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