Angular Service Worker配置URL通配符匹配不生效如何解决？

配置失效原因 #

你遇到的匹配失效是两个常见规则误解导致的：

• 相对路径（比如/data/currencies、/data/*）仅会匹配和Angular应用同源的请求，不会命中跨域的外部接口域名
• 单个*通配符只能匹配单段路径内的字符（无法跨/匹配子路径），所以https://backend.ourserver.com/data/*只能匹配/data/下的一级子路径，无法覆盖多层路径，路径末尾的全匹配需要用**才能覆盖所有子层级

正确配置示例 #

要匹配https://backend.ourserver.com/data/下所有层级的GET请求，配置如下：

{
  "dataGroups": [
    {
      "name": "backend-data",
      "urls": ["https://backend.ourserver.com/data/**"],
      "cacheConfig": {
        "maxSize": 100, // 最大缓存条目数，按需调整
        "maxAge": "1d", // 缓存有效期，按需调整
        "strategy": "performance" // 优先返回缓存，需要实时数据可改为freshness
      }
    }
  ]
}

通配符规则说明 #

Angular Service Worker使用glob风格匹配，三种常用通配符作用如下：

• *：匹配单路径段内的任意字符，不能跨/，例如https://backend.ourserver.com/data/*.json可匹配/data/currencies.json，无法匹配/data/v2/currencies.json
• **：匹配任意多层路径，可跨/，例如https://backend.ourserver.com/data/**可匹配/data路径下所有层级的所有请求
• ?：匹配单个任意字符，仅用于精确匹配单字符差异的路径

生效注意事项 #

• 匹配规则按从上到下的顺序命中，更精确的规则需要写在靠前的位置
• 修改配置后需要重新构建应用，刷新页面触发Service Worker更新后规则才会生效，测试时建议使用无痕模式避免旧Service Worker缓存干扰
• dataGroups默认仅缓存GET请求，如需缓存其他请求类型可在cacheConfig同级添加"methods": ["GET", "POST"]按需指定

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