Workbox не будет кэшировать динамически загруженные изображения

Question

Я пытаюсь создать PWA с рабочей коробкой. Я хочу, чтобы он кэшировал изображения, которые отображаются в результате вызова API остальных. Так что я получаю ссылки и отображаю результаты, но изображения не кэшируются рабочим столом, и я не знаю почему. Я очень плохо знаком с рабочим столом, но я думал, что концепция basi c будет очень простой. Я добавил предварительное кэширование и следующие маршруты:

workbox.routing.registerRoute(
  /\.css$/,
  new workbox.strategies.NetworkFirst()
);

workbox.routing.registerRoute(
  /\.js$/,
  new workbox.strategies.NetworkFirst()
);

workbox.routing.registerRoute(
  /\.(?:png|jpg|jpeg|svg|gif)$/,
  new workbox.strategies.StaleWhileRevalidate()
);

На вкладке «Сеть» инструментов разработчика я вижу, что предварительно кэшированные файлы помечены как «Served from service worker». Но REST-образы всегда загружаются по сети. Изображения REST также не отображаются в кеше времени выполнения.

Как заставить рабочий ящик тоже кэшировать эти изображения?

Answer 1

Стратегия StaleWhileRevalidate Workbox действительно предполагает, что каждый раз для каждого ресурса выполняется сетевой запрос, потому что он делает два запроса параллельно как из кэша, так и из сети. Вот почему вы видите эти сетевые запросы в Chrome Dev Tools. Подробнее об этой стратегии читайте здесь https://developers.google.com/web/tools/workbox/reference-docs/latest/workbox.strategies.StaleWhileRevalidate. Поэтому, если вы хотите извлечь изображения только из кэша (если они там есть), вы можете использовать стратегию CacheFirst (https://developers.google.com/web/tools/workbox/reference-docs/latest/workbox.strategies.CacheFirst).

Я также рекомендую вам включить Workbox отладка, чтобы вы знали, что происходит и почему в вашем Service Worker.

workbox.setConfig({
  debug: true
});

Надеюсь, это поможет вам!