Angular : Ajouter un bouton d'installation pour votre application PWA

oct. 19 2018 2:28

Quand vous créez une application web PWA, sous Android, quand Chrome charge votre application, il vous propose automatiquement de l'installer.

Il faut savoir que ce comportement par défaut va changer : ils ont en effet trouvé que c'était trop intrusif, qu'on ne laissait pas le choix à l'utilisateur de faire cette installation quand il le voulait.

De plus, si l'utilisateur était en train de faire quelquechose dans l'application, il y a de fortes chances pour qu'il envoit bouler ce "pop-up" et moralité, l'application n'était pas installée.

Avec Chrome 70 et Windows 10, le comportement est de ne pas proposer ce pop-up d'installation.

L'utilisateur a toujours la possibilité d'installer l'application en allant dans le menu de Chrome puis en cliquant sur "Installer xxx...". Mais bon, il y a 99.9% de chances que Mme Michu ne fasse jamais cette action. D'ailleurs, à part le développeur de l'application, je ne vois pas qui le ferait.

Créer un bouton Installer l'application

L'idée est donc plutôt de proposer un bouton Installer l'application. Plusieurs avantages :

L'utilisateur saura que l'application est "installable",
L'utilisateur choisira le moment de cette installation.

Respect de l'utilisateur tout en poussant ce dernier à installer son application fétiche.

Côté UI, c'est simple : j'ajoute un bouton/lien qui n'est visible que si l'application est "installable" (ie bien formée selon les critères PWA et pas déjà installée). Quand on clique dessus, j'appelerais une méthode qui effectuera cette installation :

<a mat-list-item (click)='installApp()' *ngIf='showInstallButton'>
<mat-icon mat-list-icon fontSet='fas' fontIcon='fa-download'></mat-icon>
<div mat-line>Installer l'application</div>
</a>

showInstallButton est une variable de mon composant de type boolean par défaut égal à false.

Maintenant ATTENTION : le code qui suit n'est valable que pour Chrome 45+ sous Android et Windows 10. C'est une "non-standard feature" !

Si le navigateur (en l'occurence Chrome) détecte que votre application est une application PWA valide (manifeste + service worker + icones qu'il faut), il déclenchera l'évènement de l'object window BeforeInstallPromptEvent. Cet évènement signifie : "je vais afficher la boite de dialogue pour installer l'application. Je la montre pour de vrai ou pas ?"

Ce que l'on va faire, puisqu'on ne veut pas déranger l'utilisateur dans sa lecture du site, c'est de différer notre réponse. Donc on sauvegarde pour répondre plus tard et on affiche alors le bouton Installer l'application.

Dans notre composant Angular, il faut donc s'abonner à cet évènement, ce que l'on fait grâce au décorateur HostListener :

@HostListener('window:beforeinstallprompt', ['$event'])
onBeforeinstallprompt(ev) {
ev.preventDefault();
// on affiche le bouton install
this.showInstallButton = true;
// on "stocke" le prompt.
this.deferredPrompt = ev;
}

Puis quand l'utilisateur a enfin décider d'installer l'application, c'est à dire quand il a cliqué sur notre bouton, on continue la procédure d'installation :

installApp() {
// on affiche la boite de dialogue : installer l'application
this.deferredPrompt.prompt();

// selon la réponse de l'utilisateur
this.deferredPrompt.userChoice
.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('Youpi, notre appli est installée');
} else {
console.log('Arg, il en veut pas !');
this.showInstallButton = false;
}
// la madame elle fait le ménache
this.deferredPrompt = null;
});
}

That's all !