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.
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.
workbox-broadcast-cache-update module
utilise l'API Broadcast Channel lorsqu'elle est disponible et a recours à une implémentation basée surpostMessage()
dans les navigateurs non compatibles.- Le module workbox-background-sync utilise si possible l'API Background Sync. Si ce n'est pas le cas, il effectue de nouvelles tentatives d'événements en file d'attente à chaque démarrage du service worker.
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',
})
);