1

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.

Uday Khatry
  • 449
  • 1
  • 8
  • 23

3 Answers3

4

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.

Matt Gaunt
  • 9,434
  • 3
  • 36
  • 57
  • I believe, Its not sure shot way to find if file is coming from cache. What if the strategy is Network First.You will always see 'from service worker' in size column of dev tools. – Vivek Pratap Singh May 29 '16 at 13:47
  • Hi Gaunt, thankyou for the reply. So, when i am pre caching my files then i am able to see all the files which are cached in the resource tab( dev tools resource panel) under cache. But when it comes to runtime caching, would i be able to see the files in resource tab ? – Uday Khatry May 30 '16 at 08:48
  • Yeah you can see run time assets there as well – Matt Gaunt May 31 '16 at 05:26
0

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.

Ghanshyam sharma
  • 11
  • 3
0

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.

Sakshi Nagpal
  • 1,003
  • 7
  • 16