caching - 如何获取 ServiceWorker 缓存中元素的大小和/或数量？

Question

ServiceWorker 是 Chrome 中可用的新 api。它让您做的许多事情之一是拦截网络请求并使用缓存版本进行响应。我正在实现一个“脱机”按钮，它可以动态地将内容添加到缓存中。我想向用户报告我正在使用多少空间，以及我在缓存中放入了多少条目。

是否可以查询缓存以获取其中的项目数？我可以报告缓存在其中的东西的总大小吗？

Answer 1

您可以执行以下操作来查找缓存的大致大小：

// returns approximate size of a single cache (in bytes)
function cacheSize(c) {
  return c.keys().then(a => {
    return Promise.all(
      a.map(req => c.match(req).then(res => res.clone().blob().then(b => b.size)))
    ).then(a => a.reduce((acc, n) => acc + n, 0));
  });
}

// returns approximate size of all caches (in bytes)
function cachesSize() {
  return caches.keys().then(a => {
    return Promise.all(
      a.map(n => caches.open(n).then(c => cacheSize(c)))
    ).then(a => a.reduce((acc, n) => acc + n, 0));
  });
}

有一些注意事项：

• 仅计算响应正文的大小。（这可以部分修复。）
• 计算非透明响应。（这无法修复。）

Answer 2

显然，您可以使用cacheName.keys().length如受过训练的刺激，您还可以循环单个条目并计算总重量。