Utilisez le service worker Angular pour améliorer la rapidité et la fiabilité de votre application sur les réseaux dont la connectivité est mauvaise.
Faire face à une connectivité limitée
Lorsque les utilisateurs disposent d'un accès réseau limité, voire inexistant, le fonctionnement des applications Web peut considérablement se dégrader et échouer souvent. L'utilisation d'un service worker pour assurer la mise en cache préalable vous permet d'intercepter les requêtes réseau et de fournir des 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 permettre d'accélérer considérablement l'application et de la faire fonctionner lorsque l'utilisateur est hors connexion.
Cet article explique comment configurer la mise en cache préalable dans une application Angular. Nous partons du principe que vous maîtrisez 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 Angular propose un module de service worker doté d'une fonctionnalité de mise en cache et bien intégré 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 apparaître dans package.json. Le schéma ng-add ajoute également au projet un fichier appelé ngsw-config.json, que vous pouvez utiliser pour configurer le service worker. Le fichier inclut une configuration par défaut que vous personnaliserez un peu plus tard.
À présent, créez 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é lors du processus de compilation en fonction de la configuration (ngsw-config.json) et des éléments produits au moment de la compilation.
À présent, démarrez 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:
- Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
- Cliquez sur l'onglet Réseau.
Notez que l'onglet "Network" (Réseau) contient un certain nombre d'é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 qui met en cache les éléments statiques spécifiés dans le fichier manifeste ngsw.json généré.
Cependant, il manque un élément important: nyan.png. Pour effectuer une mise en cache préalable de cette image, vous devez ajouter un format qui l'inclut à 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 la installMode de ce groupe d'assets est définie sur prefetch, le service worker met en cache tous les éléments spécifiés, qui incluent désormais des images PNG.
Spécifier d'autres éléments à mettre en pré-cache est tout aussi simple: mettez à jour les formats dans le groupe de ressources 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 préalable avec Angular et la CLI Angular, procédez comme suit:
- Ajoutez le package
@angular/pwaà votre projet. - Contrôlez ce que le service worker met en cache en modifiant
ngsw-config.json.