Que faut-il pour qu'une PWA soit installable ? - Letecode
Formation en Ligne en Développement Web Full stack : Début le 28 Février Inscrivez vous ici

Que faut-il pour être installable ?

Dernière mise à jour : 26/09/2022

Les applications Web progressives (PWA) sont des applications modernes et de haute qualité construites à l'aide de la technologie Web. Les PWA offrent des fonctionnalités similaires aux applications iOS/Android/de bureau, elles sont fiables même dans des conditions de réseau instables et sont installables, ce qui permet aux utilisateurs de les trouver et de les utiliser plus facilement.

La plupart des utilisateurs sont familiarisés avec l'installation d'applications et les avantages d'une expérience installée. Les applications installées apparaissent sur les surfaces de lancement du système d'exploitation, telles que le dossier Applications sur Mac OS X, le menu Démarrer sur Windows et l'écran d'accueil sur Android et iOS. Les applications installées apparaissent également dans le sélecteur d'activité, les moteurs de recherche d'appareils tels que Spotlight et dans les feuilles de partage de contenu.

La plupart des navigateurs indiquent à l'utilisateur que votre Progressive Web App (PWA) est installable lorsqu'elle répond à certains critères. Des exemples d'indicateurs incluent un bouton Installer dans la barre d'adresse ou un élément de menu Installer dans le menu de débordement.

Capture d'écran de l'omnibox avec l'indicateur d'installation visible.

Promotion d'installation fournie par le navigateur (bureau)

Capture d'écran de la promotion d'installation fournie par le navigateur.

Promotion d'installation fournie par le navigateur (mobile)

De plus, lorsque les critères sont remplis, de nombreux navigateurs déclenchent un événement beforeinstallprompt, vous permettant de fournir un UX intégré à l'application personnalisé qui déclenchera le flux d'installation au sein de votre application.

Critères d'installation

Dans Chrome, votre application Web progressive doit répondre aux critères suivants avant de déclencher l'événement beforeinstallprompt et d'afficher la promotion d'installation dans le navigateur :

  • L'application Web n'est pas déjà installée
  • Répond à l'heuristique d'engagement des utilisateurs :
    • L'utilisateur doit avoir cliqué ou tapé sur la page au moins une fois (à tout moment, même lors d'un chargement de page précédent)
    • L'utilisateur doit avoir passé au moins 30 secondes à consulter la page (à tout moment)
  • Être servi sur HTTPS
  • Inclut un manifeste d'application Web qui inclut :
    • short_name ou name
    • icons- doit inclure une icône 192px et une icône 512px
    • start_url
    • display- doit être l'un des fullscreen, standalone, ouminimal-ui
    • prefer_related_applications ne doit pas être présent ou être false
  • Inscrit un agent de service auprès d'un gestionnaire fetch

D'autres navigateurs ont des critères d'installation similaires, bien qu'il puisse y avoir des différences mineures. Consultez les sites respectifs pour plus de détails :

Sur Android, si le manifeste de l'application Web inclut related_applications et "prefer_related_applications": true, l'utilisateur sera dirigé vers la boutique Google Play et invité à installer l'application Android spécifiée à la place.

Formation en Ligne en Développement Web Full stack : Début le 28 Février Inscrivez vous ici