Vanilla Service Worker

sw-service.ts

export function register() {
    if ("serviceWorker" in navigator) {
        return new Promise((resolve) => {
            navigator.serviceWorker.register("/sw.js")
                .then((registration) => {
                    registration.onupdatefound = () => {
                        const worker = registration.active;
                        if (worker == null) {
                            return;
                        }
                        worker.onstatechange = () => {
                          if (worker.state === "activated") {
                              console.log("Service worker activated. Content is ready for offline use.");
                              resolve(registration);
                          }  
                        };
                    };
                })
                .catch(console.error)
        })
    }
    return Promise.resolve(null);
}

export function onNewWorkerUpdate(cb: VoidFunction) {
    if ("serviceWorker" in navigator) {
        navigator.serviceWorker.oncontrollerchange = () => {
            console.log("New service worker installation/activation detected");
            cb();
        }
    }
}

export function unregisterServiceWorker() {
    if ("serviceWorker" in navigator) {
        navigator.serviceWorker.getRegistrations()
            .then((regs) => {
                regs.forEach(reg => reg.unregister());
            })
            .catch(console.error);
    }
}

sw.ts

declare const self: ServiceWorkerGlobalScope;

const cacheNames = {
    global: "global-v1",
    styles: "styles-v1",
    fonts: "fonts-v1",
    images: "images-v1",
    data: "data-v1",
};

function precache() {
    const urls = [
        "css/index.css",
        "img/img-01.jpg",
        // other urls for precache
    ];
    const caches2open = [
        caches.open(cacheNames.fonts),
        caches.open(cacheNames.styles),
        caches.open(cacheNames.images),
        caches.open(cacheNames.data),
    ];
    // cache index.html
    caches.open(cacheNames.global).then((cache) => {
        return cache.add("/index.html");
    })
    return Promise.all(caches2open).then((openedCaches) => {
        const [fonts, styles, images, data] = openedCaches;
        for (const asset of urls) {
            // check if url is a style, image, etc.
            // to store in the proper cache
        }
    });
}

self.addEventListener("install", (ev) => {
    console.log("Service worker installed");
    // Se puede esperar a que termine algún proceso
    // antes de continuar con la activación
    ev.waitUntil(precache());
    // También podemos hacer uso de skipWaiting
    // para no esperar a que no haya clientes activos
    self.skipWaiting();
});

self.addEventListener("activate", () => {
    console.log("Service worker activated");
    // forzamos a que los clientes activos
    // utilicen el nuevo service worker
    // sin necesidad de recargar la página
    self.clients.claim().then(() => {
        console.log("Service worker ready for use");
    });
});

self.addEventListener("fetch", (ev: FetchEvent) => {
    console.log("Intercepted a HTTP request:", ev.request);
});

self.addEventListener("message", (ev) => {
    console.log("Mensaje recibido", ev.data);
});

export {};