如何获取 ServiceWorker 缓存中大小 and/or 个元素？

Question

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

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

Answer 1

显然您可以使用 cacheName.keys().length，如 trained to thrill 所示，您也可以在单个条目上循环并计算总重量。

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

有几点注意事项：

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

如何获取 ServiceWorker 缓存中大小 and/or 个元素？

How can I get the size and/or number of elements in a ServiceWorker cache?

caching

quota

service-worker