Workbox SW: Runtime caching not working until second Reload

Question

I am new to service worker and workbox. I am currently using the workbox to precache my static assets files, which works fine and I expect my other thirdparty URL to be cached too during runtime, but not working until my second reload on the page:(

Shown Below is the copy of the Code of my Service Worker, please note that I replace my original link to abc.domain.com intentionally :)

workbox.routing.registerRoute(
  //get resources from any abc.domain.com/
  new RegExp('^https://abc.(?:domain).com/(.*)'),
  /*
  *respond with a cached response if available, falling back to the network request if it’s not cached. 
  *The network request is then used to update the cache.
  */
  workbox.strategies.staleWhileRevalidate({
    cacheName: 'Bill Resources',
    maxEntries: 60,
    maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
  }),
); 

workbox.routing.registerRoute(
  new RegExp('^https://fonts.(?:googleapis|gstatic).com/(.*)'),
  //serve from network first, if not availabe then cache
  workbox.strategies.networkFirst(),
); 

workbox.routing.registerRoute(
  new RegExp('^https://use.(?:fontawesome).com/(.*)'),
  //serve from network first, if not availabe then cache
  workbox.strategies.networkFirst(),
); 

I have cleared storage times without number, I refreshed cache storage from google developer tools, but all seems to be the same. Resources from a custom link, google fonts and fontawesome, fail to be cached the first time. Below is the console and the Cache Storage Tab for my page first load image and the second load Image respectively.

Please I dont know what I am doing wrong and why it behaves like so.

Thanks in Advance

Answer 1

This is expected behaviour.

The way service workers get set up is that they will have an install and activate phase, where installation can happen when ever a new service worker is registered or a service worker updates.

A service worker will then activate when it's safe to do so (i.e. no windows are currently being "controlled" be a service worker).

Once a service worker is activated, it'll control any new pages.

What you are seeing is:

1. Page is loaded and the page registers a service worker
2. The service worker precaches any files during it's install phase
3. A service activates but isn't controlling any pages
4. You refresh the page and at this point the page is controlled and requests will go through the service worker (resulting in the caching on the second load).

Answer 2

The service worker will not cache anything until its been activated. It gets activated only on the second hit itself. To achieve caching on the first hit you have to guide service worker to skip waiting for activation. you can do this by

self.addEventListener('install', () => {
   self.skipWaiting(); //tells service worker to skip installing and activate it
   /*your code for pre-caching*/
});

once its been skipped it enter the activated mode and will wait for caching but it wont cache the clients interaction. To do so apply the following line

self.addEventListener('activate', () => {
     clients.claim();
});

which starts caching on the first hit itself