В Angular PWA Как динамически кэшировать запрос API (с параметром) вместо того, чтобы вручную добавлять каждый URL-адрес в ngsw-config.json

Question

У меня есть API, например https: // api - ******y? Apikey=sX4 & q=london, где q=london - параметр, который будет постоянно меняться, так как я могу добавить этот URL-адрес в список URL-адресов в файле ngsw-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"
      }
    },

У меня есть два сомнения:

1. Вместо того, чтобы снова и снова добавлять один и тот же URL-адрес для всех разных параметров, таких как Лондон / Манчестер / Бирмингем, есть ли способ, которым я могу просто добавить базовый URL-адрес без параметра, и он будет хранить ответы для всех различных параметров, когда пользователь будет искать его?

2. Вместо того, чтобы добавлять URL-адреса вручную, ответ URL-адреса должен храниться динамически, когда пользователь искал его, когда он был в сети. Я имею в виду, что изначально я не буду добавлять какой-либо URL-адрес в список в файле ngsw-config.json, НО, когда пользователь запросил этот URL-адрес, его ответ автоматически сохраняется в кеше.

Answer 1

У меня есть это, на самом деле я немного глупо с моей стороны думать, что я должен указать полный URL-адрес в файле ngsw-config.json. На самом деле мы просто можем просто указать базовый URL-адрес, нам не нужно указывать параметр apiKey или любой другой параметр, например файл london/manchester/birmingham, ngsw.json в папке dist после сборки, сохраняет URL-адрес в виде шаблонов, он просто соответствует базовому URL-адресу и сохраняет все запросы со всеми различными параметрами, сделанными для этого URL-адреса пользователем. приведенный выше код можно переписать, как показано ниже. он будет нормально работать, кэшируя данные для всех магазинов лондон / манчестер / бирмингем, когда пользователь их ищет.

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