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

Question

ServiceWorker is a new api available in Chrome. One of the many things it lets you do is intercept network requests and respond with a cached version. I'm implementing a "take this offline" button which dynamically adds things to the cache. I'd like to report to the user how much space I'm using, and how many entries I've put in the cache.

Is it possible to query a cache to get the number of items in it? Can I report the total size of things cached in it?

Answer 1

You can do something like the following to find the approximate size of the cache:

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

There's a few caveats:

• Counts the size of the response body only. (This could be partially fixed.)
• Counts non-opaque responses. (This can't be fixed.)