Use Service Worker to intercept requests on the first load of my site?

Question

TL;DR - I want my service worker to activate immediately after the first visit to my site, instead of after the first refresh.

Details:

I have built a progressive web app using service worker, but have noticed that on the first load (when the SW is installed) it will not intercept any network requests until the user refreshes the page.

Is there anything I can do to have the service worker start immediately intercepting requests after it is installed?

Answer 1

You can indeed, by using a combination of skipWaiting and clients.claim as seen below.

This will cause the service worker to immediately take control of network requests from the page.

self.addEventListener('install', event => {
  // Bypass the waiting lifecycle stage,
  // just in case there's an older version of this SW registration.
  event.waitUntil(self.skipWaiting());
});

self.addEventListener('activate', event => {
  // Take control of all pages under this SW's scope immediately,
  // instead of waiting for reload/navigation.
  event.waitUntil(self.clients.claim());
});