close-box Documentation

pwaRegister() : Enregistrement du Service worker

La fonction pwaRegister() va permettre l'enregistrement du service worker, à savoir le créer ou le mettre à jour.

Paramètre de la fonction

Cette fonction prend en paramètre l'url du service worker (relative ou absolue)


pwaRegister(file)

Valeur par défaut

Par défaut la valeur de file est 'serviceworker.js'

La fonction

On teste si le navigateur prend en charge les service workers


if ("serviceWorker" in navigator) {
    ...
}

On essaie d'enregistrer le service worker


try {
    const registration = await navigator.serviceWorker.register(file);
    ...
}

Si l'enregistrement du service worker s'effectue, on renvoi son état dans la console


if (registration.installing) {
    console.log("Service worker installing")
} else if (registration.waiting) {
    console.log("Service worker installed")
} else if (registration.active) {
    console.log("Service worker active")
}

Sinon, on renvoi l'erreur dans la console


catch (error) {
    console.error(`Registration failed with ${error}`)
}

Appel de la fonction

Voici l'appel de la fonction utilisé sur pwabunga.js appelant le fichier serviceworker.js présent à la racine de la PWA


pwaRegister()

Fonction complète


const pwaRegister = async (file = 'serviceworker.js') => {
    if ("serviceWorker" in navigator) {
        try {
            const registration = await navigator.serviceWorker.register(file);
            if (registration.installing) {
                console.log("Service worker installing")
            } else if (registration.waiting) {
                console.log("Service worker installed")
            } else if (registration.active) {
                console.log("Service worker active")
            }
        } 
        catch (error) {
            console.error(`Registration failed with ${error}`)
        }
    }
}

Les fonctions de PWA Bunga!

Enregistrement du Service worker

Amélioration de l'expérience utilisateur

Autorisations