What does this do?

This library proxies calls to read operations on the CacheStorage interface using Proxies to automatically detect and record cache hits and misses. The wrapped cache-reading operations are:

• CacheStorage.match
• Cache.match
• Cache.matchAll

Let's say you're reading index.html from cache:

const response = await caches.match('/index.html');

Assuming you have the file in your cache, this library would detect the cache hit, and pass you a corresponding event:

{
	"operation": "caches.match",
	"result": "HIT",
	"request": "/index.html",
	"timestamp": 1663430910914
}

Why would I use this?

For analysis mostly. Perhaps you are precaching a set of assets during service worker installation and want to figure out the cache hit rates on these assets. You could then built an automated solution on top of such a system to determine the optimal precache list.

Installation

npm install --save cachestorage-monitor

Usage

The script works both on the main thread and inside service workers and automatically attaches itself to the global object upon importing.

If you're using a bundler, import the script:

import 'cachestorage-monitor';

Inside service workers, you could also use importScripts (for example, in combination with a CDN):

importScripts('https://unpkg.com/cachestorage-monitor@latest/dist/index.js');

You then have access to the global onCacheTrackerUpdate function to configure the library. It takes the following arguments:

1. callback ((events: Array<CacheEvent>) => any)
   • The function that should be called when any cache-reads have been detected. The cache events are then passed as its only argument.
2. timeout (number)
   • The number of milliseconds to wait before calling callback. Passing a higher number here causes the events to be batched together more which potentially results in less but larger updates.

License

MIT © Lion Ralfs