reactjs - 浏览器缓存存储问题

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);
  }());
});