Définition d’une progressive web app (PWA) : Installable

Les progressive web apps installables et en plein écran grâce au manifest.json

Une des fonctionnalités les plus importantes des web apps est de s’affranchir du navigateur web en l’installant sur l’écran d’accueil d’un smartphone puis en l’utilisant en mode plein écran. Nous allons voir en détail ce fonctionnement qui peut varier selon le paramétrage établi dans le fichier manifest.json mais aussi selon le type de téléphone utilisé.

Intérêt et facilité de mise en place

L’avantage majeur d’une application native ou hybride est de pouvoir y accéder directement depuis l’écran d’accueil d’un mobile. Cette fonctionnalité peut sembler anodine, mais elle a un réel impact sur l’expérience utilisateur (UX) :

Pour un site mobile, l’utilisateur doit ouvrir le navigateur, puis entrer l’URL d’un site ou effectuer une requête sur un moteur de recherche pour y accéder. Le site n’est pas en mode plein écran puisque le navigateur web reste visible.
Pour une application, une fois téléchargée et installée depuis un App-Store, l’utilisateur l’ouvre directement depuis le bureau de son téléphone grâce à l'icône de démarrage.

Cette fonctionnalité est désormais disponible sur les web apps. Votre PWA va être “installable” sur le bureau puis lisible en mode plein écran. Les comportements peuvent changer entre les différents systèmes Androïd et iOS, nous allons voir en détail ces différences. Il faut noter que ces fonctionnalités sont très simples à mettre en place et possibles sur tous sites Internet. Il suffit de renseigner un fichier de configuration appelé manifest qui se place ensuite à la racine du site. Vous pouvez nous contacter pour mettre en place rapidement ce principe sur votre Site Internet. L’expérience utilisateur mobile sera très facilement améliorée.

Fonctionnement de l’installation de la PWA sur Androïd

Comment obtenir la pop-up “Ajouter à l’écran d’accueil” ?

La mise en place d’un fichier Manifest pour votre application web permet de définir comment votre application apparaîtra sur le système de l’utilisateur et comment l’application se lancera. Le Manifest doit indiquer le ‘short_name’, il s’agit du nom à afficher sous l'icône de bureau, ainsi qu’une URL chargeable à afficher (par exemple index.html). Le fichier manifest.json doit également comprendre une icône en PNG d’une taille minimum de 192x192px.

En plus d’avoir ajouté un fichier Manifest, vous avez également mis en place un Service Worker sur votre site. Nous vous recommandons de configurer un service worker permettant l’affichage d’une simple page customisée pour le hors ligne. Afin d’assurer le bon fonctionnement de votre Service Worker, votre site doit impérativement être sécurisé par un protocole HTTPS. Ces actions mises en place sur votre site web permettront l’affichage de votre pop-up, dans le cas où un utilisateur a visité votre site au moins 2 fois avec au moins 5 minutes d’intervalles entre ces visites.

Installer l’application sans passer par la popup

Si la progressive web app ne propose pas directement l’installation sur le bureau grâce à l’affichage de la pop-up, il suffit à l’utilisateur de se rendre dans les options de son navigateur en cliquant sur l'icône correspondant. L’utilisateur devra ensuite sélectionner le lien “Ajouter à l’écran d’accueil”.

Les différents types d’affichage

Une fois que la première visite sur l’application a été effectuée dans le navigateur mobile en entrant l’URL ou en faisant une recherche depuis le moteur, et que le raccourci a été ajouté sur l’écran d’accueil du mobile, le Manifest va envoyer des informations qui permettront de masquer le navigateur. En effet, il est possible de spécifier le type d’affichage de l’application pour les prochaines utilisations. Lorsque l’utilisateur lancera l’application web depuis l’icône placée sur son accueil mobile, celle-ci se lancera alors en plein écran, dans une fenêtre indépendante du navigateur mobile.

Fonctionnement de l’installation de la PWA sur iOS

Comme pour les mobiles Android, il est possible de prévoir l’ajout d’un raccourci vers votre PWA sur l’écran d’accueil du mobile de l’utilisateur grâce aux instructions précédemment énoncées dans le fichier manifest.json. Néanmoins, il n’est pas possible de générer une pop-up avec le système iOS et le navigateur Safari. L’utilisateur devra se rendre directement dans les options de son navigateur Safari (le seul navigateur proposant cette possibilité depuis les mobiles de la marque à la pomme) et cliquer sur le bouton correspondant.

Comme pour Android, une fois que l’utilisateur aura ajouté votre PWA sur l’écran d’accueil de son mobile, celle-ci pourra se lancer dans une fenêtre indépendante du navigateur, en plein écran. Cette démarche demande cependant l’ajout d’un code spécifique pour les mobiles fonctionnant sous iOS et utilisant le navigateur Safari. Il faut noter que ces fonctionnalités (installation sur l’écran d‘accueil et lecture en plein écran) ne sont pas disponibles sur les mobiles d’Apple si ceux-ci utilisent d’autres navigateurs que celui de la marque.