在 Angular PWA 如何动态缓存 API 请求（带参数），而不是在 ngsw-config.json 中手动添加每个 url

Question

我有一些 API 像 https://api-******y?apikey=sX 4&q=london，其中 q=london 是一个会不断变化的参数，那么如何在 ngsw- 的 urls 列表中添加这个 URL config.json 文件

"dataGroups": [
    {
      "name": "api-performance",
      "urls": [
        "https://api-***************y?apikey=sX******4&q=london",
        "https://api-***************y?apikey=sX******4&q=manchester",
        "https://api-***************y?apikey=sX******4&q=birmingham"
      ],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 100,
        "maxAge": "3d"
      }
    },

我有两个疑惑：

而不是一次又一次地为所有不同的参数添加相同的 url，比如 london/manchester/birmingham 有没有一种方法可以只添加没有参数的基础 URL当用户搜索它时，它会存储所有不同参数的响应？
与其手动添加URL，不如在用户在线搜索时动态存储URL的响应。我的意思是我最初不会在 ngsw-config.json 文件的列表中添加任何 URL，但是当用户请求 url 时，它的响应会自动存储在缓存中。

Answer 1

我得到了这个，实际上我有点愚蠢认为我必须在 ngsw-config.json 文件中提供完整的 url，其实我们可以简单地给基础 url，我们既不需要给 apiKey 参数也不需要任何其他参数，比如 london/manchester/birmingham，构建后 dist 文件夹中的 ngsw.json 文件，存储 url 作为模式，它只匹配基础 url 并存储用户对 url 进行的所有不同参数的所有查询。上面的代码可以像下面这样重写。只要用户搜索它们，它就会通过缓存所有商店的数据 london/manchester/birmingham 来正常工作。

"dataGroups": [
    {
      "name": "api-performance",
      "urls": [
        "https://api-***************y
      ],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 100,
        "maxAge": "3d"
      }
    },

在 Angular PWA 如何动态缓存 API 请求（带参数），而不是在 ngsw-config.json 中手动添加每个 url

In Angular PWA How to Cache the API request( with paramter ) dynamically instead of manually adding each and every url in ngsw-config.json

api

caching

dynamic

angular-pwa

ngsw-config