如何获取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中所示的方法，您也可以循环单个条目并计算总重量。