Service worker runtime cache

Question

I am creating a progressive web app using service workers and i am using service worker toolbox to cache my content. Service worker code to cache my content :

toolbox.router.get('/(.)', toolbox.fastest);
toolbox.router.post('/(.)', toolbox.fastest);
toolbox.router.get('/(.)', toolbox.fastest, {origin: 'https://example.cloudfront.net'})
toolbox.router.get('/(.)', toolbox.fastest, {origin: 'https://example.in'})

The code is running fine as i am not seeing any error in the console. But how can i check whether the images from cloudfront or the url's configured above are getting cached and rendered from the cache itself.

Answer 1

You can check the cache content in chrome devtools, look in the resources / application tab and cache storage.

You check it's returned, look in devtools network panel and look for '(from ServiceWorker)' in the size column.

Answer 2

One more option is if you want to confirm then you should use console.log() in the function from where you are getting the cache data then you can check in DevTools.

Answer 3

You can check it in Chrome Developers Tool

Press F12 -> Application -> Cache Storage in Cache

If you are not able to see it, Refresh Cache Storage by doing right click on cache storage.