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

workbox-window est un module de boîte de travail qui n'a pas encore beaucoup été abordé 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:

  • Simplifiez l'enregistrement et les mises à jour des service workers en aidant les développeurs à identifier les moments critiques du cycle de vie des service workers, ce qui leur permet de réagir plus facilement dans ces moments.
  • Empêcher les développeurs de commettre des erreurs courantes, comme enregistrer un service worker dans un champ d'application incorrect
  • Simplifier la messagerie entre window et le champ d'application de 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 à partir du CDN dans une page Web.

Créer un bundle local

Si votre chaîne d'outils inclut un bundler tel que 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 pouvez le séparer de la logique d'application principale de votre site Web à l'aide d'un import dynamique, ce qui peut réduire la taille du bundle 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, il existe un moyen plus simple d'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> dans l'exemple ci-dessus utilise l'attribut type="module". Cette opération 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 acceptent également les modules JavaScript. Vous pouvez donc diffuser ce code dans n'importe quel navigateur, car les anciens navigateurs ignoreront les éléments <script> dont l'attribut type est défini sur "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 être la même chose que pour enregistrer vous-même un service worker à l'aide de navigator.serviceWorker.register. Toutefois, Workbox.register s'occupe d'attendre l'événement load window avant d'enregistrer le service worker. Cela est souhaitable dans les situations 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 window et le champ d'application du service worker

Les travailleurs de service ont leur propre portée, distincte de celle de 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 avec la méthode messageSW du module workbox-window.

Workbox utilise un format spécifique pour les messages est un objet doté des propriétés suivantes:

  • type est une chaîne unique obligatoire qui identifie le message. Le format doit être en majuscules avec des traits de soulignement pour séparer les mots (par exemple, CACHE_URLS).
  • meta est une chaîne facultative représentant 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 de 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 dans 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);

Il existe de nombreux cas où la communication entre un service worker et le window peut être utile, par exemple pour avertir l'utilisateur lorsqu'une mise à jour d'un service worker est disponible. Cette recette s'appuie 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.