workbox-window

Registering a service worker

This feature allows you to register a service worker with ease. The Workbox object is instantiated with the path to the service worker file, and the register method is called to start the registration process.

import { Workbox } from 'workbox-window';

if ('serviceWorker' in navigator) {
  const wb = new Workbox('/sw.js');

  wb.register();
}

Listening to service worker lifecycle events

This feature allows you to add event listeners for various service worker lifecycle events such as 'installed', 'activated', and 'waiting'. This example shows how to listen for the 'installed' event and log messages depending on whether it's an update or a first-time installation.

import { Workbox } from 'workbox-window';

const wb = new Workbox('/sw.js');

wb.addEventListener('installed', (event) => {
  if (event.isUpdate) {
    console.log('Service worker has been updated!');
  } else {
    console.log('Service worker has been installed for the first time!');
  }
});

wb.register();

Prompting user to update the service worker

This feature allows you to prompt the user when a new service worker version is available and waiting to be activated. The 'waiting' event is used to detect this state, and 'messageSkipWaiting' is called to activate the new service worker if the user confirms.

import { Workbox } from 'workbox-window';

const wb = new Workbox('/sw.js');

wb.addEventListener('waiting', () => {
  if (confirm('A new version is available, update now?')) {
    wb.messageSkipWaiting();
  }
});

wb.register();