缓存名称未显示在缓存存储中

Question

我已经定义了缓存图像的工作箱路由，但它在缓存存储中不可见。但是，即使在离线模式下，图像也会被缓存并从 disk cache 提供。

我已按照文档进行操作并完成了其中提到的所有操作。但是，缓存仍然不可用。

已编辑

workbox.routing.registerRoute(
     /\.(?:png|gif|jpg|jpeg)$/,
     new workbox.strategies.CacheFirst({
            cacheName: 'images-cache'
     })
  );

   workbox.routing.registerRoute(
     new RegExp(/.*user\/getAll/),
     new workbox.strategies.StaleWhileRevalidate({
      cacheName: 'api-cache'
     })
   );

Answer 1

我觉得你有点误会:)

您的第一张图片仅显示缓存 API 中缓存 saved/cached 的名称。如果您单击 "api-cache" 或 "workbox-precache-v2..."，您会在右侧看到里面的内容。这些是缓存名称，而不是缓存的内容。

您的第二张图片显示了对文件 1327-m.jpg 的网络请求。该文件是从浏览器的磁盘缓存中找到并从那里提供的。在离线模式下，如果网络请求不成功，则不会显示状态代码 200——您也不会在页面上看到图像。那么这个 磁盘缓存 是什么？浏览器有不同种类的缓存。网络面板 - 显示在您的第二张图片上 - 不会向您显示缓存 API（"api-cache" 等）提供的缓存。相反，网络面板会向您显示浏览器实际获取文件的位置。在这种特殊情况下，它是从磁盘中获取的，这意味着它是从硬盘驱动器中读取的。其他可能的值包括例如。 "memory cache" 和 "ServiceWorker"。浏览器将文件存储在不同的位置，网络面板上的信息会向您显示从何处获取文件以在页面上使用。

这让你更清楚了吗？

（那么什么是内存缓存？这是一个更快的缓存，它在 RAM 中获取文件。磁盘比内存慢并且有时浏览器决定将文件放在磁盘而不是更快的内存缓存。您不能自己控制它，浏览器完全控制它。它通常使用启发式方法，例如文件的新鲜度和最近使用情况。）

缓存名称未显示在缓存存储中

Cache name not displaying inside cache storage

javascript

service-worker

workbox