Voulez-vous rendre votre application Angular installable ? N'attendez plus !
Dans cet article, vous allez apprendre à utiliser l'interface de ligne de commande (CLI) Angular pour créer une progressive web app (PWA).
Vous trouverez l'exemple de code de ce guide sur GitHub.
Créer une PWA installable
Pour transformer votre application Angular en PWA, il vous suffit d'exécuter une seule commande:
ng add @angular/pwa
Cette commande permet de:
- Créez un service worker avec une configuration de mise en cache par défaut.
- Créez un fichier manifeste qui indique au navigateur le comportement attendu de votre application lorsqu'elle est installée sur l'appareil de l'utilisateur.
- Ajoutez un lien vers le fichier manifeste dans
index.html
. - Ajoutez la balise
<meta>
theme-color
àindex.html
. - Créez des icônes d'application dans le répertoire
src/assets
.
Par défaut, votre service worker est enregistré quelques secondes après le premier chargement de la page. Si ce n'est pas le cas, envisagez de modifier le registrationStrategy
.
Personnalisez votre PWA
L'article Mise en cache avec le service worker Angular explique comment configurer le service worker Angular. Vous y découvrirez comment spécifier les ressources que le service worker doit mettre en cache et la stratégie qu'il doit adopter pour ce faire.
Le fichier manifeste de votre application vous permet de spécifier son nom, son nom court, ses icônes, sa couleur de thème et d'autres informations. 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 ces propriétés en modifiant la valeur appropriée 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, l'invite Ajouter à l'écran d'accueil s'affiche:
Étant donné que les schémas ng-add
ajoutent tous les éléments nécessaires 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:
- Ajoutez
@angular/pwa
à votre projet à l'aide de la CLI Angular. - Modifiez les options du fichier
manifest.webmanifest
en fonction de votre projet. - Mettez à jour les icônes du répertoire
src/assets/icons
en fonction de votre projet. - Vous pouvez également modifier
theme-color
dansindex.html
.