Service Workers

Registration

From MDN documentation

if (navigator.serviceWorker) {
  log("Service Worker is trying to register");
  navigator.serviceWorker
    .register("./service-worker.js", { scope: "./" })
    .then(registration => console.log(registration))
    .catch(err => console.(err));
} else {
  log("Service Worker is not supported in this browser", "Error");
}

• registration scope is relative to current file location
• service worker file location is relative to current file location
• err cannot be JSON.stringify
• registration is an object

• service worker files must be properly referenced
• beware of service worker scope

Installation

SW are fully event based. Installation and activation are event among many others. To catch such event, append event listeners:

self.addEventListener("install", event => {
  log(event);
});

Available events are

• install
• activate
• message
• fetch
• sync
• push

_{The self quoted references window.self.}

• service workers do not have access to DOM!

Caching

self.addEventListener("install", event => {
  event.waitUntil(
    caches.open(CACHE_VERSION).then(cache => {
      log(`Opening cache version ${CACHE_VERSION}`);
      return cache.addAll(CACHE_FILES);
    })
  );
});

CACHE_VERSION is a simple string while CACHE_FILES is an array of files path to be cached.

Sources: