Workbox: votre boîte à outils de haut niveau pour les service workers

Jeff Posnick

Deux API jouent un rôle crucial dans la création d'applications Web fiables : Service worker et Cache Storage. Toutefois, leur utilisation efficace, sans introduire de bugs subtils ni rencontrer de cas particuliers, peut s'avérer difficile. Par exemple, les 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 haut niveau pour service worker basé sur les API Service Worker et Cache Storage. Il fournit un ensemble de bibliothèques prêtes pour la production pour l'ajout du mode hors connexion aux applications Web. Le kit est structuré en deux collections: des outils qui aident à gérer le code qui s'exécute dans votre service worker, et des 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 contrôle la manière dont il intercepte les requêtes sortantes et interagit avec l'API Cache Storage. Workbox comprend une dizaine de modules de bibliothèque au total, qui gèrent chacun une variété de cas d'utilisation spécialisés. Les modules les plus importants déterminent si le service worker répondra (appelé routage) et comment il répondra (appelée stratégie de mise en cache).

Intégration de compilation

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 tâches:

  • 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 coulisses" pour mettre en œuvre les stratégies de mise en cache que vous configurez.
  • Générez une liste d'URL qui doivent être mises en pré-cache en fonction de modèles configurables afin d'inclure et d'exclure les fichiers générés au cours de votre processus de compilation.

Pourquoi utiliser Workbox ?

L'utilisation de Workbox lors de la création de votre service worker est facultative. Il existe un certain nombre de guides qui présentent les stratégies de mise en cache courantes du point de vue d'un service worker "vanille". Si vous décidez d'utiliser Workbox, voici quelques-uns de ses avantages.

Gestion du cache

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

Journalisation et rapports d'erreurs complets

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

Journalisation de la boîte de travail dans la console des outils de développement

En suivant les messages de journal, vous pouvez accéder beaucoup plus rapidement à la racine de tout problème de configuration ou d'invalidation que si vous y étiez seul.

Un codebase testé et multinavigateur

Workbox est développé par rapport à une suite de tests multinavigateurs et, lorsque cela est possible, revient automatiquement à d'autres implémentations de fonctionnalités manquantes dans certains navigateurs.

Comment utiliser Workbox ?

Intégration du framework

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

Ajouter Workbox à votre processus de compilation existant

Si vous avez déjà mis en place un processus de compilation pour votre site, il vous suffira peut-être d'ajouter la ligne de commande, le module Node.js ou l'outil de plug-in Webpack approprié pour commencer à utiliser Workbox.

L'interface de ligne de commande de Workbox facilite en particulier la mise en route, grâce à 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 à l'avenir:

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 compiler votre service worker, exécutez workbox generateSW workbox-config.js dans le cadre d'un processus de compilation. Pour en savoir plus, consultez la documentation de generateSW. 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 avez déjà un service worker et que vous souhaitez essayer 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'environnement d'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 elle est idéale 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',
  })
);