javascript - 缓存数据量不累加

Question

我认为正在缓存的数据与 Chrome 开发工具告诉我已缓存的数据量之间似乎存在巨大差异。

我尝试使用 workbox 缓存 Firebase 存储中的图像，以及使用缓存 API 和拦截获取请求的普通服务工作线程代码。然而，我总是得到这样的结果 /image/4S9XQ.jpg ， 不管我做什么。我的服务工作人员代码几乎从工作箱文档中删除以进行缓存(尽管结果与普通 JS 相同)。

workbox.routing.registerRoute(
/.*firebasestorage.googleapis.com.*\/chaptail.appspot.com.*\/Users.*media&token/,
  new workbox.strategies.CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 300,
        maxAgeSeconds: 365* 24 * 60 * 60,
      })
    ],
  })
);

老实说，我开始觉得 Chrome 开发工具是错误的，尽管这似乎不太可能。然而，我实在无法接受这样一个事实:它显示了 100MB 的存储数据，而实际上它看起来还不到 100KB。我是不是做错了什么，或者是 Chrome 开发工具搞乱了我？

Answer 1

这是设计使然。

当您缓存来自其他域的资源时，软件会将它们作为不透明响应进行处理。不透明的响应限制了响应中的某些信息，并通过将其伪造为约 7 兆左右来隐藏实际大小。

看看这个 What limitations apply to opaque responses?