Effectuer la pré-mise en cache avec le service worker Angular

Utilisez le service worker Angular pour rendre votre application plus rapide et plus fiable sur les réseaux dont la connectivité est mauvaise.

Minko Gechev

Faire face à une connectivité limitée

Lorsque les utilisateurs ont un accès réseau limité, voire nul, les fonctionnalités des applications Web peuvent se dégrader considérablement et souvent échouer. L'utilisation d'un service worker pour la mise en cache préalable vous permet d'intercepter les requêtes réseau et de transmettre les réponses directement à partir d'un cache local, au lieu de les récupérer sur le réseau. Une fois les éléments de votre application mis en cache, cette approche peut vraiment accélérer l'application et lui permettre de fonctionner lorsque l'utilisateur est hors connexion.

Cet article explique comment configurer la mise en cache dans une application Angular. Nous partons du principe que vous connaissez déjà la mise en cache préalable et les service workers en général. Si vous avez besoin d'un rappel, consultez l'article Service workers et API Cache Storage.

Présentation du service worker Angular

L'équipe d'Angular propose un module de service worker doté d'une fonctionnalité de mise en cache préalable qui s'intègre bien au framework et à l'interface de ligne de commande (CLI) Angular.

Pour ajouter le service worker, exécutez la commande suivante dans la CLI:

ng add @angular/pwa

@angular/service-worker et @angular/pwa devraient maintenant être installés dans l'application et devraient apparaître dans package.json. Le schéma ng-add ajoute également un fichier nommé ngsw-config.json au projet, que vous pouvez utiliser pour configurer le service worker. (Le fichier inclut une configuration par défaut que vous personnaliserez un peu plus tard.)

Créez maintenant le projet pour la production:

ng build --prod

Dans le répertoire dist/service-worker-web-dev, vous trouverez un fichier appelé ngsw.json. Ce fichier indique au service worker Angular comment mettre en cache les éléments dans l'application. Le fichier est généré pendant le processus de compilation en fonction de la configuration (ngsw-config.json) et des éléments produits au moment de la compilation.

Démarrez maintenant un serveur HTTP dans le répertoire contenant les éléments de production de votre application, ouvrez l'URL publique et consultez ses requêtes réseau dans les outils pour les développeurs Chrome:

1. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
2. Cliquez sur l'onglet Réseau.

Notez que l'onglet "Network" contient de nombreux éléments statiques téléchargés directement en arrière-plan par le script ngsw-worker.js:

Il s'agit du service worker Angular mettant en cache les éléments statiques spécifiés dans le fichier manifeste ngsw.json généré.

Il manque toutefois un élément important: nyan.png. Pour mettre cette image en pré-cache, vous devez ajouter un modèle qui l'inclut dans ngsw-config.json, qui se trouve à la racine de l'espace de travail:

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js",
        "/assets/*.png"
        ]
      }
    },
    ...
}

Cette modification ajoute toutes les images PNG du dossier /assets au groupe d'assets de ressources app. Étant donné que l'élément installMode de ce groupe d'assets est défini sur prefetch, le service worker met en pré-cache tous les composants spécifiés, qui incluent désormais des images PNG.

Il est tout aussi simple de spécifier d'autres éléments à mettre en pré-cache: mettez à jour les formats dans le groupe d'assets de ressources app.

Conclusion

L'utilisation d'un service worker pour la mise en cache préalable peut améliorer les performances de vos applications en enregistrant les éléments dans un cache local, ce qui les rend plus fiables sur les réseaux de mauvaise qualité. Pour utiliser la mise en cache avec Angular et la CLI Angular:

1. Ajoutez le package @angular/pwa à votre projet.
2. Contrôlez ce que le service worker met en cache en modifiant ngsw-config.json.