Angular PWA и API кеширования

Question

Я сделал PWA, используя Angular. PWA работает нормально, кеширование работает. В автономном режиме все необходимые вызовы API сохраняются в кеше и доступны работнику службы.

У меня простой вопрос, как мне получить доступ к этим данным по команде.

Здорово, что Сервис-работник делает это для меня, когда PWA переходит в автономный режим, однако эти данные в кеше - это данные, которые я хочу использовать для других компонентов. Учитывая, что он уже находится в кеше, я не хочу повторять вызов API.

Я изучал различные варианты и не мог найти что-то убедительное. API кэширования показался интересным, но я понятия не имею, так ли это Angular PWA сохраняет свои данные.

Итак, кто-нибудь знает, как получить доступ к кэшированным данным, которые использует сервисный работник?

Answer 1

Внутри моего файла ngsw-config. json, где я удалил свои группы данных. Я дал группе имя, в данном случае 'mission-api'.

"dataGroups": [
  {
  "name": "mission-api",
  "urls": ["https://12goappapi.azurewebsites.net/api"],
  "cacheConfig": {
    "strategy": "freshness",
    "maxSize": 20,
    "maxAge": "1h",
    "timeout": "5s"
    }
  }
]

Используя API кэширования, вы можете читать кэшированные данные. Служащий фактически использует те же самые звонки. Для доступа к данным, которые вы сохраняете, все, что вам нужно, это имя кэширования.

Теперь я боролся с этим, имя это не просто имя, которое вы указываете. Ngsw-worker. js добавляет несколько префиксов перед именем, чтобы быть уверенным, что имя уникально.

Лично мне лично пришлось открыть браузер и проверить, что имя было.

Когда вы найдете соответствующее имя, вы можете использовать API кеша для извлечения ваших данных. Я чувствую, что их должен быть лучший способ найти / определить это имя. Если кто-то находит, что вы можете обновить мой ответ или предоставить свой собственный!

, например:

if ('caches' in window) {
  console.log('CACH API ENABLED IN BROWSER');
  caches.open('ngsw:/:1:data:dynamic:mission-api:cache').then(cache => {
    cache.match('https://12goappapi.azurewebsites.net/api/missions').then(res => {
      res.json().then(result => {
        console.log(result);
        this.missions = result;
      });
    })
  });
}