Découvrir le Service Worker #2 - Cycle de vie

# web# mobile# js# pwa
écrit par Amrou OUNI publié le samedi 2 mai 2020

 

Le cycle de vie d’un service worker

 

Dans cet article, nous allons explorer le cycle de vie d’un service worker en détaillant toutes les phases qu’il traverse, de son ajout dans l’application jusqu'à ce qu’il en prenne le contrôle. Il comporte 3 étapes : l’enregistrement, l’installation et l’activation.

Les etapes du cycle de vie d'un service worker

Bien qu’il existe des outils permettant d’implémenter automatiquement le cycle de vie du service worker, il est tout à fait possible d’y procéder manuellement. C’est cette option que nous choisissons de détailler, le but étant de mieux comprendre les différentes étapes permettant à notre service worker d’être opérationnel.

 

Enregistrement

Pour ajouter manuellement un service worker il faut commencer par l’enregistrer dans le code du script main.js. Ceci indique au navigateur où trouver le service worker et déclenche l’installation en arrière-plan.

Le code suivant montre les étapes d’installation d’un service worker :

if (!('serviceWorker' in navigator)) {
  console.log('Service Worker not supported');
  return;
}
navigator.serviceWorker.register('/service-worker.js')
.then(function(registration) {
  console.log(‘Service worker registered! Scope is:', registration.scope);
}); // .catch a registration error

 

Dans un premier temps on vérifie que le navigateur prend en charge les services workers, si c’est le cas alors on affecte le service worker en tant que propriété du navigateur. Ensuite le service est enregistré avec une portée (scope).

Vous pouvez essayer d’enregistrer le service worker chaque fois que la page est chargée et le navigateur complètera l’enregistrement seulement si le service worker est nouveau ou a été mis à jour.

La portée (scope) du service worker détermine le chemin à partir duquel le service worker intercepte les requêtes. La portée par défaut est le chemin vers le script du service worker et s’étend sur tous ses sous-répertoires. Vous pouvez aussi ajouter un paramètre supplémentaire (scope: '/module/') lors de l’enregistrement comme le montre le code suivant (le service worker contrôle les requêtes à partir des pages servies à partir du sous-domaine: https://mon.application/module/*).

 

navigator.serviceWorker.register('module/service-worker.js', {
  scope: '/module/'
});

 

De manière générale, le fichier JavaScript du service worker doit se trouver à la racine de votre site et non pas dans un sous-repertoire (le dossier js par exemple). Plus d'informations dans cette vidéo youtube :

Service Worker Scope

 

Installation

Une fois enregistré par le navigateur, notre service worker peut être installé grâce à l’évènement install. Cet évènement sera déclenché si le navigateur considère le service worker comme nouveau ou mis à jour.

On peut employer l’évènement install pour définir des instructions qui s’exécuteront durant l’installation. C’est le meilleur moment pour mettre en cache le contenu statique par exemple :

self.addEventListener('install', function(event) {
  console.log(‘Service worker installed!’);
});

 

Si c’est la première installation d’un nouveau service worker et que l’étape se termine avec succès alors on peut passer à l’étape d’après : l'activation du service worker!

 

Activation

Le service worker a besoin d’être activé avant de pouvoir contrôler les pages faisant partie de son périmètre (scope) et d’intercepter les requêtes https correspondantes. Cependant, les pages chargées auparavant ne sont pas contrôlées par le service worker, et elles contournent le service worker. Il faut refermer les pages d’abord !

C’est pareil pour les nouvelles versions du service worker. Un service worker maintient le contrôle tant que les pages qui en dépendent restent ouvertes. Ceci garantit qu’une seule version du service s’exécute à la fois. En effet, si un nouveau service worker est  installé avec une version antérieure en cours d’exécution alors le nouveau service worker ne prendra le contrôle qu’une fois le service worker existant soit supprimé et que les pages qui l’utilisent soient fermées.

Attention, il ne suffit pas de rafraichir la page pour activer le nouveau service worker ! 

L’évènement d’activation est un bon moment pour nettoyer les données obsolètes du style dans le cache.

Notez que l’activation peut être forcée par le biais du code.

self.addEventListener('activate', function(event) {
console.log(‘service worker activated!’);
});

 

Pour conclure

Nous avons vu ensemble l’ordre des étapes du cycle de vie d’un service worker, leur interdépendances, leurs utilités. Les subtilités à retenir sont :

  • le navigateur complètera l’enregistrement seulement si le service worker est nouveau ou a été mis à jour.
  • le service worker contrôle les requêtes à partir des pages servies à partir de son « scope ».
  • Le fichier JavaScript du service worker doit se trouver à la racine de votre site pour contrôler toutes les pages. 
  • si un nouveau service worker est installé avec une version antérieure en cours d’exécution alors le nouveau service worker ne prendra le contrôle qu’une fois le service worker existant soit supprimé et que les pages qui l’utilisent soient fermées.

Références

  

Cet article fait partie de la série : « Découvrir le Service Worker » :