La mise en cache préalable est l'une des tâches les plus courantes d'un service worker. Par ailleurs, Workbox offre de nombreuses possibilités pour accomplir cette tâche importante, quels que soient les outils de compilation de Workbox que vous choisissez. Dans ce guide, vous allez apprendre à effectuer une pré-mise en cache des éléments à l'aide de generateSW et injectManifest, et à identifier les méthodes les plus adaptées à votre projet.

Mise en cache préalable avec generateSW

generateSW est le moyen le plus simple de mettre en pré-cache des éléments dans Workbox. Ce qu'il faut retenir à propos de generateSW, c'est que vous n'écrivez pas votre propre service worker. Vous demandez à Workbox d'en générer un pour vous. Cependant, vous pouvez influencer son comportement grâce à diverses options de configuration.

generateSW effectue des actions différentes par défaut selon l'outil de compilation que vous utilisez. Lorsque vous utilisez workbox-webpack-plugin, vous n'avez pas besoin de spécifier d'options de configuration. Par défaut, le plug-in met en pré-cache tous les éléments inclus dans le graphique de dépendances de webpack et écrit un service worker nommé service-worker.js dans le répertoire spécifié par output.path.

En revanche, si vous utilisez workbox-build ou workbox-cli, seuls les éléments HTML, CSS et JavaScript lus à partir du système de fichiers local seront mis en pré-cache par défaut. Côté configuration, vous devez spécifier swDest et l'option globDirectory dans la configuration generateSW pour que la mise en cache préalable fonctionne. Il y a de fortes chances que vous souhaitiez configurer d'autres options affectant le comportement de vos service workers. Nous vous invitons donc à consulter la documentation.

Mise en cache préalable avec injectManifest

Utiliser injectManifest n'est pas aussi simple que generateSW, mais au détriment de la facilité d'utilisation, vous bénéficiez d'une plus grande flexibilité. Alors que generateSW gère l'intégralité de la génération des service workers à votre place, injectManifest utilise un service worker que vous écrivez comme source et injecte une liste d'URL à mettre en cache, tout en laissant le reste du service worker tel quel.

Lorsque vous utilisez injectManifest, vous êtes responsable de la mise en place de la logique de mise en cache préalable. Lorsque injectManifest examine votre service worker d'entrée, il recherche une variable self.__WB_MANIFEST spéciale et la remplace par le fichier manifeste de pré-cache. Si cette variable n'est pas présente, injectManifest génère une erreur.

La liste des entrées du fichier manifeste de mise en cache peut être modifiée à l'aide d'options de configuration supplémentaires.

Affichage comparatif

Cliquez sur chacun des onglets ci-dessous pour comparer l'utilisation des méthodes generateSW et injectManifest:

Étant donné que generateSW génère un service worker, il vous suffit de spécifier une configuration. Vous trouverez ci-dessous un exemple utilisant workbox-build:

// build-sw.js
import {generateSW} from 'workbox-build';

generateSW({
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

Le service worker peut ensuite être créé sur la ligne de commande avec Node:

node build-sw.js

Étant donné que injectManifest nécessite un service worker source, un exemple minimalement viable nécessite un fichier de service worker source. Si vous n'avez besoin que d'une mise en cache préalable, ce service worker d'entrée peut se présenter comme suit:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

Notez la chaîne self.__WB_MANIFEST. Espace réservé que Workbox remplace par le fichier manifeste de mise en cache préalable. Voici une configuration valide pour ce cas d'utilisation:

// build-sw.js
import {injectManifest} from 'workbox-build';

injectManifest({
  swSrc: './src/sw.js',
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

injectManifest est préférable si vous avez des exigences complexes, telles que un routage avancé, des stratégies de mise en cache personnalisées ou d'autres éléments qui ne sont pas couverts par les options fournies par generateSW.

Conclusion

La mise en cache préalable dans Workbox est beaucoup plus simple que si vous deviez la gérer vous-même, en particulier pour les ressources gérées par version compilées par des bundlers. Cependant, la mise en cache préalable n'est pas la seule chose que vous ferez probablement dans un service worker. Au fur et à mesure, vous apprendrez d'autres techniques, telles que la mise en cache de l'environnement d'exécution.