Une PWA peut être rendue installable si elle possède un Service Worker et un App Manifest.
Une PWA installable doit fonctionner hors-ligne
Pour qu’une PWA soit “installée”, elle doit pouvoir se lancer même dans un contexte déconnecté. Il ne serait pas logique de lancer une application qui ne soit pas en mesure d’afficher faute de réseau.
Pour cette raison, une PWA installable doit avoir un Service Worker.
Cependant, il faut nuancer, l’application PWA doit être capable d’afficher un écran. Une bonne pratique consiste à afficher ce qui est communément appelé “l’App Shell”. Les données affichées ne sont pas obligées d’être à jour et peuvent provenir du cache.
Une PWA doit posséder un App Manifest pour être installée
Pour qu’une PWA soit reconnue comme installable par le navigateur. Il faut que la page web de votre PWA expose un fichier de méta-données nommé App Manifest.
L’App Manifest est un fichier JSON qui expose des informations sur l’application : nom de l’application dans le lanceur d’applications, icône, mode de lancement (plein écran, paysage, …), couleur de fond, couleur de thème. Ce fichier est souvent nommé ‘manifest.webmanifest’
L’App Manifest est supporté sur Chrome, Edge, Firefox, UC Browser, Opera, Samsung et Safari a un support partiel.
Comment rendre installable une PWA sur mobile ?
L’App Manfiest doit être référencé dans la partie ‘head’ de la page html de votre PWA. Ainsi, le navigateur sait qu’il peut proposer à votre utilisateur l’installation de l’application. Il suffit d’ajouter simplement cette ligne :
<link rel="manifest" href="/manifest.webmanifest">
Dans ces conditions, le navigateur pourra vous proposer d’installer la PWA dans le lanceur d’application de votre appareil.
Dans le cadre d’iOS où l’App Manifest n’est pas encore pleinement supporté. Il suffit d’ajouter des balises meta dans le ‘head’ de la page web pour pouvoir installer la PWA. Dans ces conditions, l’utilisateur devra effectuer une opération manuelle dans le menu de son navigateur et la PWA sera ensuite disponible dans le lanceur d’applications iOS.
L’UX du bouton d’installation d’une PWA doit-être réfléchit
Le comportement par défaut sur Android, Firefox, Chrome est que le navigateur indique à l’utilisateur via une icone que la PWA est installable.
Ceci n’étant pas forcément trivial pour la grande majorité des utilisateurs, il est recommandé de prendre le contrôle de cet affichage et de proposer soit même une interface qui invitera l’utilisateur à installer la PWA.
Il est déconseiller d’utiliser des popups intrusives qui s’affichent au premier chargement de la page et il faut privilégier des emplacements stratégiques où l’utilisateur sera invité à installer la PWA.