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:
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
}
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.
npm install --save cachestorage-monitor
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:
-
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.
-
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.
MIT © Lion Ralfs