Créer une progressive web app à l'aide de la CLI Angular

Vous voulez rendre votre application Angular installable ? N'attendez plus !

Minko Gechev

Dans cet article, vous allez découvrir comment utiliser l'interface de ligne de commande (CLI) Angular pour créer une application Web progressive (PWA).

Vous trouverez l'exemple de code de ce guide sur GitHub.

Créer une PWA installable

Pour faire de votre application Angular une PWA, il vous suffit d'exécuter une seule commande :

ng add @angular/pwa

Cette commande :

• crée un service worker avec une configuration de mise en cache par défaut ;
• crée un fichier manifeste qui indique au navigateur comment votre application doit se comporter lorsqu'elle est installée sur l'appareil de l'utilisateur ;
• ajoute un lien vers le fichier manifeste dans index.html ;
• ajoute la balise theme-color <meta> à index.html ;
• crée des icônes d'application dans le répertoire src/assets.

Par défaut, votre service worker doit être enregistré quelques secondes après le premier chargement de page. Si ce n'est pas le cas, envisagez de modifier la registrationStrategy.

Personnaliser votre PWA

L'article Mise en cache préalable avec le service worker Angular explique comment configurer le service worker Angular. Vous y découvrirez comment spécifier les ressources que vous souhaitez que le service worker mette en cache et la stratégie à utiliser pour ce faire.

Le fichier manifeste de votre application vous permet de spécifier le nom, le nom court, les icônes, la couleur du thème et d'autres détails de votre application. Pour en savoir plus sur l'ensemble des propriétés que vous pouvez définir, consultez l'article Ajouter un fichier manifeste d'application Web.

Jetez un coup d'œil au fichier manifeste généré par la CLI Angular :

{
  "name": "manifest-web-dev",
  "short_name": "manifest-web-dev",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    …
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Vous pouvez personnaliser n'importe laquelle de ces propriétés en modifiant la valeur correspondante dans manifest.webmanifest.

Une PWA référence son fichier manifeste avec un élément link dans index.html. Une fois que le navigateur a trouvé la référence, il affiche l'invite Ajouter à l'écran d'accueil :

Étant donné que les schémas ng-add ajoutent tout ce qui est nécessaire pour rendre votre application installable, ils génèrent des icônes de raccourci qui s'affichent une fois que l'utilisateur a ajouté l'application à son bureau :

Veillez à personnaliser les propriétés et les icônes du fichier manifeste avant de déployer votre PWA en production.

Conclusion

Pour créer une application Angular installable :

1. Ajoutez @angular/pwa à votre projet à l'aide de la CLI Angular.
2. Modifiez les options du fichier manifest.webmanifest en fonction de votre projet.
3. Mettez à jour les icônes du répertoire src/assets/icons en fonction de votre projet.
4. Vous pouvez également modifier la theme-color dans index.html.