Service Workers summary by @Lacika1981

serviceWorker.js

import { request } from "http";

// check whether browser supports serviceWrokers
if (!navigator.serviceWorker) {
    return;
}

// Register a serviceWorker
navigator
    .serviceWorker
    .register('/sw.js', { scope: '/' }) // scope is optional, you can provide in order to be active on a specific part of the page. Default is '/'
    .then(() => console.log('SW regisred'))
    .catch((e) => console.log(`Registration failed ${e}`));

// Hijacking request
self
    .addEventListener('fetch', function (event) {
        event.respondWith(
            new Response('Hello <b class="a-winner-is-me">world</b>', {
                headers: {
                    'Content-type': 'text/html' // setting content-type to HTML you can pass value with HTML markup
                }
            })
        );
    });

// install event: here can we collect every information from the web and store in a cache
self.addEventListener('install', function (event) {
    event.waitUntil();
});

self.addEventListener('fetch', function (event) {
    event.respondWith(fetch(event.request).then(function (response) {
        if (response.status === 404) {
            return fetch('/imgs/dr-evil.gif');
        }
        return response;
    }).catch(function () {
        return new Response('Failed');
    }));
});

/**
 * Caches API
 */
caches
    .open('name-of-the-cache') // return a promise, if there is no cache with that name then it creates one
    .then(function (cache) { // if the promise resolved successfully you can interact with the cache through the cache object from the argument
        //...
    });

// cache a response for a request. request can be a Request object or an url, response is the Response object to cache
cache.put(request, response);

// it takes an array of request or URL, fetches them and puts the request-response pairs into the cache
cache.addAll([
    '/foo',
    '/bar'
]);

// get response out of the cache passing in a request or URL
cache.match(request);

// it tries to find a match in any cache, starting with the oldest
caches.match(request);

// activate fires when the new service worker becomes active, and the previous SW gone. Perfect time to delete old caches
self.addEventListener('activate', function (event) {
    // ...
    caches.delete(cacheName); // delete caches, returns promise
});

navigator
    .serviceWorker
    .register('/sw.js')
    .then(function (reg) {
        // reg object properties:
        reg.unregister();
        reg.update();
        reg.installing; // an update on its way/in progress - thrown away if install fails
        reg.waiting; // there is an updated SW and waiting to take over
        reg.active;
        // registration object emits a updatefound event when a new serviceworker is found
        reg.addEventListener('updatefound', function () {
            // reg.installing has changed
        });
    });

// on the SW reg object themselves you can check if there's a new serviceworker in queue
var sw = reg.installing;

/**
 * "installing" - if the installer has fired but not completed
 * "installed"  - installation completed successfully but not activated yet
 * "activating" - activate event has fired but not complete yet or activated
 * "activated"  - the SW is ready to receive fetch events
 * "redundant"  - the SW has been thrown away
 */
console.log(sw.state);

// SW fires a statechange event whenever it's .state property changes
sw.addEventListener('statechange', function () {
    // sw.state has changed
});

// refers to the SW that controls this page - if it's not exist that means the page did not load using a SW and content was loaded from network
navigator.serviceWorker.controller;

if (reg.installing) {
    // there is an update in progress
    reg.installing.addEventListener('statechange', function () {
        if (this.state == 'installed') {
            // there is an update ready - need to tell the user
        }
    });
}

// fires when we track the state of the installing worker
reg.addEventListener('updatefound', function (worker) {
    worker.addEventListener('statechange', function () {
        if (this.state == 'installed') {
            // there is an update ready - need to tell the user
        }
    });
});

/**
 * triggering an update
 */

// SW can call skipWaiting while it's waiting or installing - this signals that it should immeadeatly take over - call it when user hits refresh button
self.skipWaiting();

// page can send messages to any SW using postMessage
reg.installing.postMessage({ action: 'skipWaiting' });

// SW can listen for postMessages and can do specific things, here's a good ide to call .skipWaiting() when a 'skipWaiting' message arrives
self.addEventListener('message', function (event) {
    event.data; // {foo: 'bar'}
});

// serviceWorker fires an event when the controlling serviceWorker changes
navigator.serviceWorker.addEventListener('controllerchange', function () {
    // navigator.serviceWorker.controller has changed - use this signal to reload the page
});