Mise en cache préalable avec Workbox

La mise en cache préalable est l'une des tâches les plus courantes chez un service worker. Workbox offre une grande flexibilité pour effectuer cette tâche importante, quel que soit l'outil de compilation de Workbox que vous choisissez. Dans ce guide, vous découvrirez comment effectuer une mise en cache préalable des éléments à l'aide de generateSW et de injectManifest. Vous découvrirez également la méthode la mieux adaptée à votre projet.

Effectuer une mise en cache préalable avec generateSW

generateSW est la méthode la plus simple pour effectuer une mise en cache préalable des éléments dans Workbox. L'essentiel à retenir à propos de generateSW est que vous n'écrivez pas votre propre service worker, mais que 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 opérations 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 cache tout ce que Webpack inclut dans son graphique de dépendance 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. En ce qui concerne la configuration, vous devez spécifier swDest et l'option globDirectory dans la configuration generateSW pour que la mise en cache fonctionne. Il est possible que vous souhaitiez également configurer des options supplémentaires affectant le comportement de vos service workers. Pour en savoir plus, consultez la documentation.

Avertissement:Si votre projet comporte trop d'éléments en pré-cache avec les paramètres par défaut, utilisez l'une des options glob pour exclure des ressources dans la configuration generateSW. Lorsque vous utilisez workbox-webpack-plugin, consultez la documentation GenerateSW du plug-in pour savoir comment éviter la mise en pré-cache des éléments indésirables, car sa configuration diffère de generateSW.

Effectuer une mise en cache préalable avec injectManifest

L'utilisation de injectManifest n'est pas aussi facile que celle de generateSW, mais vous privilégiez la simplicité d'utilisation au profit d'une plus grande flexibilité. Alors que generateSW gère pour vous l'intégralité de la génération de service worker, injectManifest utilise comme source un service worker que vous écrivez et injecte une liste d'URL à mettre en cache en amont, tout en laissant le reste de votre service worker tel quel.

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

Remarque:Si vous devez modifier la chaîne que injectManifest recherche pour une chaîne différente de self.__WB_MANIFEST, vous pouvez le faire en spécifiant l'option injectionPoint dans sa configuration.

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

Attention:Contrairement à generateSW, injectManifest ne regroupe pas automatiquement l'environnement d'exécution de la boîte de travail. Pour savoir comment gérer cela dans les cas d'utilisation qui dépendent de injectManifest, consultez le comparatif ci-dessous.

Affichage comparatif

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

Comme generateSW génère un service worker, il vous suffit de spécifier une configuration. Voici un exemple utilisant workbox-build:

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

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

Vous pouvez ensuite créer le service worker sur la ligne de commande à l'aide de Node:

node build-sw.js

Étant donné que injectManifest nécessite un service worker source, un exemple minimum viable nécessite un fichier service worker source. Si la mise en cache préalable est tout ce qui est nécessaire, 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. Il s'agit d'un 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 le 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.

Attention:Les exemples ci-dessus supposent que vous vous trouvez dans un environnement de nœud qui accepte de manière native les modules ES sans étape de compilation. Dans les versions de Node antérieures à la version 16, vous devrez peut-être définir un indicateur pour activer la compatibilité du module ES ou utiliser la sémantique CommonJS avec module.exports.

Conclusion

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