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

Fri, 19 Oct 2018 12:28:48 GMT

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 !

[Video] Créer un service worker avec angular 5

Tue, 14 Nov 2017 07:58:46 GMT

[Videos] Formation à ... Angular + ASP .NET Web API

Tue, 14 Nov 2017 07:58:21 GMT

Le but de ces tutoriels est de vous montrer comment développer une application fullstack avec Angular et ASP .NET Web API.

Code disponible sur Github : https://github.com/RichardC64/DemoAngularWebApi

Cette première étape consiste à mettre en place le squelette de la partie cliente, application Angular, avec angular-cli.

Etape 1 : Installez NodeJs

Rendez-vous pour cela sur le site https://nodejs.org/fr/ et installez la dernière version de NodeJs.

Etape 2 : Installez angular-cli

Ouvrez une invite de commande et tapez :

npm install -g @angular/cli@latest

Etape 3 : Génération du squelette de l'application

Créez un répertoire par exemple D:\DemoAngular.

Ouvrez une ligne de commande et placez vous dans ce répertoire. Tapez ;

ng new drh

ou drh est le nom de votre application.

Après un "long moment", votre application a été générée. Déplacez vous dans le répertoire D:\DemoAngular\drh puis tapez :

ng serve -o

Votre application est "compilée", le navigateur est lancé et ouvre automatiquement la page d'accueil de votre application à l'adresse http://localhost:4200.