How to test if Workbox precaching is working

My question is very similar to this question.

I’m wondering how I can verify in Google Chrome whether the service worker of my progressive web app is serving precached files from the cache instead of the network.

I have a service worker in place which uses following Workbox code to precache some files:

workbox.precaching.precacheAndRoute(self.__WB_MANIFEST); // WB_MANIFEST gets replaced with the files during the build process

I can verify that those files are cached within Chrome:

Here you can see the style.css in row #0.

When I reload my website I can see in Chrome’s network tab that the Service Worker received a request for style.css

After clicking on the style.css entry on the network panel I see following information:

Here I can see the source of Response which says “Service Worker Cache Storage”.
Does this mean the style.css was sent from the cache instead of the network to the browser?

I’m a bit confused about that because on this question I can see a console log entry “[workbox]” Precaching is responding to:” which I can’t find on my console:

And on this website I can see a separate network entry showing (disk cache) in the size column, which I also don’t see on my application:

I don’t think this is related to different versions of Google Chrome as I can reproduce the “(disk cache)” entry by using the (demo) link.

This is my service worker code, which is respondig with “Workbox loaded”:

Answer

I’ve managed it to create offline support for my pwa. So I think the files are loaded from the cache.