浏览器缓存存储问题

Question

我正在使用cache.put（）在缓存存储中存储40,000多个图像。我可以看到缓存存储中的所有图像已成功存储。但是当我离线使用我的React js网站时，有些图像正在显示，而有些则没有显示。浏览器决定是否显示图像。我找不到原因。谁能帮我吗？

Answer 1

我有解决方案。只是我们在Service worker中需要一个事件侦听器。如果有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);
  }());
});