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

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

我认为您有点误解：）

您的第一个图像仅显示在Cache API中保存/缓存的缓存名称。如果单击“ api-cache”或“ workbox-precache-v2 ...”，则会在右侧看到内部的内容。这些是缓存名称，而不是缓存的内容。

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

这会让您更清楚吗？

（那么什么是内存缓存？那是一个更快的缓存，它已将​​其文件存储在RAM中。磁盘比内存慢，有时浏览器决定将文件放在磁盘上而不是磁盘上。更快的内存缓存。您无法自己控制，浏览器处于完全控制状态。它通常使用启发式方法，例如文件的新鲜度和使用的最新性。）