浏览器缓存存储问题

Question

我使用 cache.put() 在缓存存储中存储了 40,000 多张图像。我可以看到缓存存储中的所有图像都已成功存储。但是当我离线使用我的 react js 网站时，有些图像显示，有些不显示。浏览器自行决定是否显示图像。我找不到原因。谁能帮帮我？

Answer 1

我找到了解决办法。只是我们需要在 Service worker 中有一个事件监听器。如果有GET请求，首先会先check in缓存然后return从那里

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

浏览器缓存存储问题

Browser Cache Storage issue

caching

browser-cache

reactjs

cacheapi