Deux API jouent un rôle crucial dans la création d'applications Web fiables : le service worker et le cache storage. Toutefois, 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 cassés.
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 à la production pour ajouter la compatibilité hors connexion aux applications Web. La boîte à outils est structurée en deux collections: des outils qui aident à gérer le code exécuté 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 le script de votre service worker et qui contrôle la façon dont il intercepte les requêtes sortantes et interagit avec l'API Cache Storage. Workbox compte une douzaine de modules de bibliothèque au total, chacun traitant différents 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é 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 tâches:
- Créez un script de service worker en fonction d'un ensemble d'options de configuration. Le service worker généré utilise les bibliothèques d'exécution de Workbox "sous le capot" pour mettre en œuvre les stratégies de mise en cache que vous configurez.
- Générez une liste d'URL à pré-cacher, en fonction de modèles configurables pour inclure et exclure les fichiers générés lors de votre processus de compilation.
Pourquoi utiliser Workbox ?
L'utilisation de Workbox lors de la création de votre service worker est facultative. De nombreux guides expliquent les stratégies de mise en cache courantes du point de vue d'un service worker standard. 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 lien avec votre processus de compilation lorsque vous utilisez le précaching, soit via des règles de taille/d'âge configurables lorsque vous utilisez le précaching 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 création de rapports d'erreurs approfondies
Lorsque vous commencez à utiliser des service workers, il est difficile de comprendre 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 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 multinavigateur
Workbox est développé avec un ensemble de tests multinavigateur et, dans la mesure du possible, revient automatiquement à d'autres implémentations des fonctionnalités manquantes dans certains navigateurs.
workbox-broadcast-cache-update moduleutilise l'API Broadcast Channel lorsqu'elle est disponible et utilise une implémentation basée surpostMessage()sur les navigateurs non compatibles.- Le module workbox-background-sync utilise l'API Background Sync si possible. Sinon, il revient à réessayer les événements mis en file d'attente chaque fois que le service worker démarre.
Comment utiliser Workbox ?
Intégration de framework
Si vous démarrez un nouveau projet à partir de zéro, vous pouvez profiter de l'intégration de Workbox 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 suffit peut-être d'ajouter la ligne de commande, le module Node.js ou le plug-in Webpack appropriés pour commencer à utiliser Workbox.
En particulier, l'interface de ligne de commande Workbox permet de démarrer facilement, 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 à 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 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 documentation generateSW.
Vous pouvez personnaliser davantage votre service worker en apportant des modifications à workbox-config.js.
Pour en savoir plus, consultez la documentation des options.
Utiliser Workbox au moment de l'exécution dans un service worker existant
Si vous disposez d'un service worker et que vous souhaitez essayer les bibliothèques d'exécution de Workbox, importez Workbox à partir de son CDN officiel et commencez à l'utiliser immédiatement pour le cache d'exécution. Ce cas d'utilisation signifie que vous ne pourrez pas profiter du précaching (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',
})
);