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

In Service Workers, the size and number of cached items are not directly provided, but we can indirectly obtain this information by writing scripts. The following outlines steps and example code to retrieve the number of items and size in a ServiceWorker cache:

How to Retrieve the Number of Items in the Cache

To retrieve the number of items in the cache, we need to open a specific cache and retrieve all requests within it.

javascript
// Open a specific cache
caches.open("my-cache-name").then(cache => {
  // Retrieve all requests in the cache
  cache.keys().then(keys => {
    console.log("Number of requests in the cache:", keys.length);
  });
});

How to Retrieve the Size of Items in the Cache

Since the Service Workers API does not directly provide the size of each cached item, we can indirectly obtain it by retrieving the response body and converting it to a Blob object.

javascript
// Open a specific cache
caches.open("my-cache-name").then(cache => {
  // Retrieve all requests in the cache
  cache.keys().then(keys => {
    // Iterate through all requests and calculate their sizes
    let totalSize = 0;
    let count = keys.length;
    keys.forEach((request, index) => {
      cache.match(request).then(response => {
        response.blob().then(blob => {
          totalSize += blob.size;
          // When the last request is completed, log the total size
          if (index === count - 1) {
            console.log("Total cache size:", totalSize);
          }
        });
      });
    });
  });
});

This code will open a cache named 'my-cache-name', iterate through all request objects in the cache, retrieve the corresponding responses, and calculate their sizes. Once all cache item sizes are computed, the total is logged to the console.

Important Considerations

• The cache size is estimated using the Blob size of the Response object, which may not equate to the actual network transfer size, as Blob size represents uncompressed data.
• Retrieving the Blob size is asynchronous; if you need to display this data or perform other operations on the page, handle these asynchronous operations appropriately.
• If the cache contains a large amount of data, calculating the size may take considerable time and could impact the main thread's performance.

In summary, while the Service Workers cache API does not directly provide an interface for cache size, we can indirectly obtain this information using the above scripts. By doing so, we can monitor cache usage and better manage caching strategies.