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 le stockage du cache. Toutefois, en les utilisant efficacement, sans introduire d'insectes subtils ni se heurter à des bords peut s'avérer difficile. Par exemple, les erreurs dans le code de votre service worker causer des problèmes de mise en cache ; les utilisateurs peuvent voir du contenu obsolète ou non fonctionnel .

Workbox est une boîte de dialogue kit de service workers basé sur Service Worker et Cache Storage API. Il fournit un ensemble de bibliothèques prêt pour la production permettant d'ajouter une compatibilité hors connexion applications Web. Il se compose de deux collections: des outils qui aident à gérer le code qui s'exécute dans votre service worker, et les outils qui s'intègrent à votre le processus de compilation.

Code d'exécution

Il s'agit du code qui s'exécute dans votre script Service Worker et contrôle la façon dont il intercepte les requêtes sortantes et interagit avec l'API Cache Storage. Workbox dispose d'un 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éterminer si le service worker répondra (appelé aussi routage), et comment il répondra stratégie de mise en cache).

Intégration de compilation

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

  • Créer un script de service worker basé sur un ensemble de configurations options. Le service worker généré utilise les bibliothèques d'exécution de Workbox "dans les coulisses" pour mettre en pratique les stratégies de mise en cache que vous configurez.
  • Générez une liste d'URL qui devraient être "précached", en fonction de modèles configurables pour inclure et exclure les fichiers générés pendant le processus de compilation.

Pourquoi utiliser Workbox ?

L'utilisation de Workbox lors de la création d'un service worker est facultative. Plusieurs options s'offrent à vous de guides qui présentent stratégies de mise en cache courantes à partir d'une "vanille" du point de vue des service workers. Si vous décidez d'utiliser Workbox, voici quelques-uns de ses avantages.

Gestion du cache

Workbox gère automatiquement les mises à jour du cache, qui sont liées à votre processus de compilation à l'aide de la mise en cache préalable, ou via des règles de taille et d'âge configurables en cas d'utilisation de l'environnement d'exécution mise en cache. L'API Cache Storage sous-jacente est puissante, mais elle n'a aucune de la prise en charge intégrée de l'expiration du cache. Des outils comme Workbox comblent cette lacune.

Journalisation approfondie et rapports d'erreurs

Lorsque vous faites vos premiers pas avec les service workers, demandez-vous pourquoi quelque chose mis en cache (ou, tout aussi frustrant, pourquoi il n'est pas mis en cache), représente un défi. 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 le code JavaScript de votre navigateur console.

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 à la racine de configuration ou d'invalidation beaucoup plus rapidement que si vous seul.

Un codebase testé sur plusieurs navigateurs

Elle est développée pour une suite de tests multinavigateurs et, lorsque cela est possible, revient automatiquement à des implémentations alternatives de fonctionnalités est absente de certains navigateurs.

Comment utiliser Workbox ?

Intégration du framework

Si vous démarrez un nouveau projet en partant de zéro, vous pouvez profiter des Intégration de la boîte de travail 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 création pour votre site, placez approprié ligne de commande, Module Node.js, ou plug-in webpack est peut-être tout ce dont vous avez besoin pour commencer à utiliser Workbox.

En particulier, l'interface de ligne de commande Workbox facilite la prise en main et en cours d'exécution, avec un mode wizard qui vérifiera votre développement local et suggérer une configuration par défaut raisonnable à 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 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 disposez déjà d'un service worker et que vous souhaitez essayer l'environnement d'exécution de Workbox les bibliothèques importer Workbox depuis son CDN officiel et commencer à l'utiliser immédiatement pour la mise en cache de l'environnement d'exécution. Cette utilisation signifie que vous ne pourrez pas bénéficier de la pré-mise en cache (qui, nécessite une intégration au moment de la compilation), mais il est idéal pour le prototypage et l'essai 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',
  })
);