Angular Service Worker (Application hors ligne)

Nous verrons comment permettre à notre application web Angular de fonctionner en mode hors ligne.

Un service worker est un script spécial qui s’exécute en arrière-plan dans le navigateur et qui gère les requêtes réseau à une origine donnée. Il a été installé au premier chargement par une application et reste sur la machine (l’ appareil de l’utilisateur). Il est activé par le navigateur quand une page de son origine est chargée et a la possibilité de répondre aux requêtes HTTP pendant le chargement de la page.

Ajouter un service worker à notre application

Pour commencer, Nous allons créer un projet avec angular cli.

ng new serviceWorking-example

cd serviceWorking-example

Maintenant nous devons informer angular cli qu’on veut utiliser service worker :

ng set apps.0.serviceWorker=true

Si vous n’avez pas encore installé @angular/service-worker, vous aurez ce message :

Your project is configured with serviceWorker = true, but @angular/service-worker is not installed. Run

npm install — save-dev @angular/service-worker and try again, or run ng set

apps.0.serviceWorker=false in your .angular-cli.json.

Vérifier dans .angular-cli.json, normalement vous devez avoir “serviceWorker”: true

Quand il est à true, les builds de productions seront généré avec service worker.

Un fichier ngsw-manisfest.json sera généré dans le dossier dist/ et à la base du projet. Un script sera aussi ajouté à index.html pour charger le service worker.

Maintenant si on build notre application en mode production avec ng build prod et qu’on vérifie dans le dossier dist/.

On y verra 3 nouveaux fichiers :

• worker-basic.min.js
• sw-register.HASH.bundle.js
• ngsw-manifest.json

Aussi, le script sw-register sera ajouté à l’index.html.

Recharger la page dans notre navigateur et ouvrir DEVELOPER TOOLS. Aller à Application -> Serice Workers

Maintenant notre application doit être chargée plus rapidement et fonctionner en mode hors ligne.

Ensuite si vous activez le mode hors ligne dans la console de CHROME, vous devrez voir notre application à l’adresse http://localhost:4200/index.html qui marche sans internet.

Mais nous aurons un problème avec l’adresse http://localhost:4200, le contenu rendu est celui définir dans le fichier manifest.

Ajoutons ce code au fichier ngsw-manifest.json :

Ensuite on build à nouveau notre application, quand nous allons sur http://localhost:4200, on sera redirigé sur http://localhost:4200/index.html.