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

Question

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

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

Answer 1

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

Answer 2

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

​

// 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));
  });
}

​

有几个注意事项：

• 只计算响应体的大小。(这可以部分修复。)
• 计算非不透明的反应。(这个问题无法解决。)