Utilisation de la fenêtre de la boîte de travail

workbox-window est un module Workbox qui n'a pas encore été abordé beaucoup dans cette documentation. Il s'agit d'un ensemble de modules destinés à s'exécuter dans window. Les objectifs de ce module sont les suivants:

  • simplifier l'enregistrement et les mises à jour des service workers en aidant les développeurs à identifier les moments critiques de leur cycle de vie et en leur permettant de réagir plus facilement à ces moments-là.
  • Pour éviter que les développeurs commettent des erreurs courantes, comme enregistrer un service worker dans un champ d'application incorrect.
  • Pour simplifier l'échange de messages entre le window et le champ d'application du service worker.

Importer et utiliser workbox-window

L'exportation que vous utiliserez le plus souvent à partir de workbox-window est la classe Workbox, que vous pouvez importer dans Node ou depuis le CDN dans une page Web.

Créer un bundle local

Si votre chaîne d'outils inclut un bundler comme webpack ou Rollup, vous pouvez regrouper workbox-window localement.

Commencez par installer workbox-window en tant que dépendance de production de votre application:

npm install workbox-window --save

Ensuite, dans le code JavaScript de votre application, vous pouvez import la classe Workbox à partir de workbox-window:

<script type="module">
import {Workbox} from 'workbox-window';

if ('serviceWorker' in navigator) {
  const wb = new Workbox('/sw.js');

  wb.register();
}
</script>

Bien que workbox-window soit assez petit, vous pourriez le diviser de la logique d'application principale de votre site Web à l'aide d'une import dynamique, ce qui peut réduire la taille du groupe principal de votre page:

<script type="module">
if ('serviceWorker' in navigator) {
  const {Workbox} = await import('workbox-window');

  const wb = new Workbox('/sw.js');
  wb.register();
}
</script>

Utiliser le CDN

Bien que ce ne soit pas l'approche recommandée, une méthode plus simple pour utiliser workbox-window consiste à l'importer à partir d'un CDN:

<script type="module">
  import {Workbox} from 'https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-window.prod.mjs';

  if ('serviceWorker' in navigator) {
    const wb = new Workbox('/sw.js');

    wb.register();
  }
</script>

Notez que l'élément <script> de l'exemple ci-dessus utilise l'attribut type="module". Cette étape est nécessaire si vous souhaitez utiliser des instructions import statiques dans le navigateur sans étape de compilation. Tous les principaux navigateurs compatibles avec les service workers sont également compatibles avec les modules JavaScript. Vous pouvez donc diffuser ce code dans n'importe quel navigateur, car les anciens navigateurs ignorent les éléments <script> dont la valeur d'attribut type est "module".

Enregistrer un service worker

L'enregistrement d'un service worker avec workbox-window s'effectue à l'aide de la méthode register de la classe Workbox, comme suit:

import {Workbox} from 'workbox-window';

const wb = new Workbox('/sw.js');
wb.register();

Cela peut sembler identique à l'enregistrement d'un service worker vous-même à l'aide de navigator.serviceWorker.register. Workbox.register se charge toutefois d'attendre l'événement window load avant d'enregistrer le service worker. Cette approche est souhaitable dans les cas où la mise en cache préalable est impliquée, afin d'éviter les conflits de bande passante qui peuvent retarder le démarrage de la page.

Communication entre le champ d'application window et le niveau d'accès du service worker

Les service workers ont leur propre champ d'application distinct de celui du window et n'ont accès qu'à un sous-ensemble des API disponibles dans window. Toutefois, il est possible de communiquer entre window et le service worker. workbox-window facilite la communication entre les deux champs d'application grâce à la méthode messageSW du module workbox-window.

Workbox utilise un format spécifique pour les messages. Il s'agit d'un objet doté des propriétés suivantes:

  • type est une chaîne unique obligatoire identifiant le message. Le format doit être en majuscules et séparer les mots par des traits de soulignement (par exemple, CACHE_URLS).
  • meta est une chaîne facultative qui représente le nom du package Workbox qui envoie le message. Elle est généralement omise.
  • payload est un paramètre facultatif représentant les données que vous souhaitez envoyer. Il peut s'agir de n'importe quel type de données.

Vous trouverez ci-dessous un exemple du fonctionnement de messageSW, en commençant par le code de votre service worker:

// sw.js
const SW_VERSION = '1.0.0';

self.addEventListener('message', (event) => {
  if (event.data.type === 'GET_VERSION') {
    event.ports[0].postMessage(SW_VERSION);
  }
});

Ajoutez ensuite le code suivant à votre page Web:

const wb = new Workbox('/sw.js');
wb.register();

const swVersion = await wb.messageSW({type: 'GET_VERSION'});
console.log('Service Worker version:', swVersion);

Dans de nombreux cas, il peut être utile de communiquer entre un service worker et le window, par exemple pour informer l'utilisateur lorsqu'une mise à jour du service worker est disponible. Cette recette repose sur une méthode d'assistance spéciale pour self.skipWaiting appelée messageSkipWaiting, qui envoie un message avec une valeur type de SKIP_WAITING.