Проблема с кешем в браузере

Question

Я храню более 40 000 изображений в кэш-памяти, используя cache.put (). Я вижу все изображения в кэш-памяти, успешно сохраненные. Но когда я использую свой реагирующий js веб-сайт в автономном режиме, некоторые изображения отображаются, а некоторые не отображаются. Браузер решает сам показать изображение или нет. Я не могу найти причину. Кто-нибудь может мне помочь?

Answer 1

У меня есть решение. Просто нам нужен слушатель событий в Сервисном работнике. Если есть запрос GET, он сначала проверяет кеш и возвращает оттуда

  self.addEventListener('fetch', event => {
  // Let the browser do its default thing
  // for non-GET requests.
  if (event.request.method !== 'GET') return;
  // Prevent the default, and handle the request ourselves.
  event.respondWith(async function() {
    // Try to get the response from a cache.
    const cache = await caches.open('images');
    const cachedResponse = await cache.match(event.request);
    if (cachedResponse) {
      // If we found a match in the cache, return it, but also
      // update the entry in the cache in the background.
      event.waitUntil(cache.add(event.request));
      return cachedResponse;
    }
    // If we didn't find a match in the cache, use the network.
    return fetch(event.request);
  }());
});