Workbox : votre boîte à outils de service worker de haut niveau

Jeff Posnick

Deux API jouent un rôle crucial dans la création d'applications Web fiables : Service Worker et Cache Storage. Cependant, les utiliser efficacement, sans introduire de bugs subtils ni rencontrer de cas particuliers, peut s'avérer difficile. Par exemple, des erreurs dans le code de votre service worker peuvent entraîner des problèmes de mise en cache. Les utilisateurs peuvent voir du contenu obsolète ou des liens non fonctionnels.

Workbox est un kit d'outils de service worker de haut niveau basé sur les API Service Worker et Cache Storage. Il fournit un ensemble de bibliothèques prêtes pour la production permettant d'ajouter la compatibilité hors connexion aux applications Web. Le kit d'outils est structuré en deux collections : les outils qui aident à gérer le code qui s'exécute dans votre service worker et les outils qui s'intègrent à votre processus de compilation.

Code d'exécution

Il s'agit du code qui s'exécute dans votre script de service worker et qui contrôle la façon dont il intercepte les requêtes sortantes et interagit avec l'API Cache Storage. Workbox dispose d'une douzaine de modules de bibliothèque au total, qui gèrent chacun différents cas d'utilisation spécialisés. Les modules les plus importants déterminent si le service worker répondra (on parle de routage) et comment il répondra (on parle de stratégie de mise en cache).

Créer une intégration

Workbox propose des outils de ligne de commande, de module Node.js et de plug-in webpack qui offrent d'autres moyens d'accomplir deux choses :

  • Créez un script de service worker basé sur un ensemble d'options de configuration. Le service worker généré utilise les bibliothèques d'exécution de Workbox "en arrière-plan" pour mettre en œuvre les stratégies de mise en cache que vous configurez.
  • Générer une liste d'URL qui doivent être "mises en cache préalable", en fonction de modèles configurables pour inclure et exclure les fichiers générés lors du processus de compilation.

Pourquoi utiliser Workbox ?

L'utilisation de Workbox lors de la création de votre service worker est facultative. De nombreux guides décrivent les stratégies de mise en cache courantes du point de vue d'un service worker "vanilla". Si vous décidez d'utiliser Workbox, voici quelques-uns de ses avantages.

Gestion du cache

Workbox gère les mises à jour du cache pour vous, soit en les associant à votre processus de compilation lorsque vous utilisez la mise en cache préalable, soit via des règles de taille/d'âge configurables lorsque vous utilisez la mise en cache d'exécution. L'API Cache Storage sous-jacente est puissante, mais elle n'est pas compatible de manière intégrée avec l'expiration du cache. Des outils comme Workbox comblent cette lacune.

Journalisation et rapports d'erreurs complets

Lorsque vous débutez avec les service workers, il peut être difficile de comprendre pourquoi un élément est mis en cache (ou, tout aussi frustrant, pourquoi il ne l'est pas). Workbox détecte automatiquement lorsque vous exécutez une version de développement de votre site Web sur localhost et active la journalisation du débogage dans la console JavaScript de votre navigateur.

Journalisation Workbox dans la console DevTools

En suivant les messages de journal, vous pouvez identifier l'origine de tout problème de configuration ou d'invalidation beaucoup plus rapidement que si vous le faisiez seul.

Un codebase testé et compatible avec plusieurs navigateurs

Workbox est développé sur la base d'une suite de tests multi-navigateurs et, si possible, utilise automatiquement des implémentations alternatives des fonctionnalités manquantes dans certains navigateurs.

Comment utiliser Workbox ?

Intégration de framework

Si vous démarrez un nouveau projet, vous pouvez profiter de l'intégration de Workbox, disponible dans de nombreux kits de démarrage et plug-ins populaires :

Ajouter Workbox à votre processus de compilation existant

Si vous disposez déjà d'un processus de compilation pour votre site, il vous suffit d'ajouter l'outil approprié (ligne de commande, module Node.js ou plug-in webpack) pour commencer à utiliser Workbox.

En particulier, l'interface de ligne de commande Workbox facilite la mise en route, avec un mode wizard qui vérifie votre environnement de développement local et suggère une configuration par défaut raisonnable que vous pouvez utiliser pour aller de l'avant :

workbox wizard
? What is the root of your web app (i.e. which directory do you deploy)? src/
? Which file types would you like to precache? css, js, html
? Where would you like your service worker file to be saved? build/sw.js
? Where would you like to save these configuration options? workbox-config.js

Pour créer votre service worker, exécutez workbox generateSW workbox-config.js dans le cadre d'un processus de compilation. Pour en savoir plus, consultez la documentationgenerateSW. Vous pouvez personnaliser davantage votre service worker en modifiant workbox-config.js. Pour en savoir plus, consultez la documentation sur les options.

Utiliser Workbox au moment de l'exécution dans un service worker existant

Si vous disposez déjà d'un service worker et que vous souhaitez tester les bibliothèques d'exécution de Workbox, importez Workbox depuis son CDN officiel et commencez à l'utiliser immédiatement pour la mise en cache de l'exécution. Ce cas d'utilisation signifie que vous ne pourrez pas profiter de la mise en cache préalable (qui nécessite une intégration au moment de la compilation), mais il est idéal pour le prototypage et l'essai de différentes stratégies de mise en cache à la volée.

// Replace 3.6.3 with the current version number of Workbox.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js');

workbox.routing.registerRoute(
  new RegExp('\.png$'),
  workbox.strategies.cacheFirst({
    cacheName: 'images-cache',
  })
);