Pour continuer sur les concepts que nous avons introduit dans notre article d’introduction sur les PWA, nous allons maintenant insister sur l’expérience et l’intégration, afin que les utilisateurs puissent interagir avec votre application de la même manière que toutes les autres applications de leur appareil. Nous allons nous concentrer sur les possibilités d’ajouter votre application sur l’écran d’accueil des smartphones mais aussi des ordinateurs de bureau.

Pourquoi s’intégrer dans les “devices” des internautes ?

80%

des utilisateurs ont intentionnellement ajoutés des applications sur leur écran d’accueil

(soit une augmentation de 5% par rapport à l’année dernière)

Quels sont les principaux facteurs qui amènent les internautes à cette décision ?

Les facteurs principaux de décision sont notamment :

  • la fréquence à laquelle ils utilisent l’application
  • la recherche de simplification de l’accès à l’application
  • leur intérêt pour ce type d’application.

Les utilisateurs ne s’attendent pas à utiliser un onglet de navigateur pour accéder à votre application PWA, l’utilisateur ne devrait même pas penser qu’il est sur le Web. En effet ils devraient pouvoir interagir avec votre application de la même manière qu’ils interagissent avec toutes les autres applications de leur appareil. 
Ils s’attendent :

  • à la retrouver au même endroit à partir duquel ils lancent toutes leurs autres applications : l’écran d’accueil
  • à retrouver votre application dans l’historique après l’avoir quitté. 
  • à ce qu’elle dispose de toutes les fonctionnalités et de tous les accès matériels des autres applications.

Comment les Progressive Web Apps répondent à cette problématique ?

Dans la vidéo ci-dessous vous pourrez découvrir le cheminement présenter aux internautes qui découvrent et installent un site compatible avec les normes des Progressive Web App.

  1. l’internaute utilise son navigateur pour accéder au site web.
  2. le navigateur après avoir vérifié la compatibilité du site déclenche l’affichage d’une mini-bannière d’installation.
  3. l’internaute clique sur cette bannière déclenche le processus d’installation sur son smartphone.
  4. l’internaute retrouve la PWA dans le launcher d’application de son device.

PWA , une extension de l’image de l’annonceur

Depuis longtemps nous pouvons ajouté une URL à nos favoris sur l’écran d’accueil, mais l’expérience utilisateur laissait beaucoup à désirer. Cette option étant profondément enfouie dans le menu, qui n’est pas toujours visible, et sur des appareils plus petits, il fallait faire défiler le menu pour le trouver. 
Ensuite, à moins que l’utilisateur ne se trouve sur la page d’accueil de l’application, le lien se construirait et le ramènerait systématiquement à la page sur laquelle il était quand il a créé le signet. Imaginez mettre en favori une photo dans le flux Instagram d’un ami, puis chaque fois que vous lancez l’application à partir de ce signet, elle commence sur cette photo. 
De même le titre et les icônes des signets n’étaient pas faciles à modifier et, enfin, les utilisateurs ne s’attendaient pas à ce que l’application fonctionne en mode hors connexion !
Bon nombre de ces problèmes peuvent être résolus avec un simple fichier le Web App Manifest. Le manifeste de l’application Web est un simple fichier JSON que vous liez à partir de chaque page HTML de votre site et qui informe le navigateur sur les détails de votre application. 
Il vous donne la possibilité de contrôler l’apparence de votre application pour l’utilisateur sur l’écran d’accueil ou dans les zones qu’ils s’attendent à voir, les URL à partir desquelles l’application doit démarrer et son apparence lors de son lancement.

Faciliter l’installation des PWA

Comment faciliter l’accès a l’action d’ajout d’écran d’accueil profondément enfouie dans le menu ?

En fait, dans certains cas, c’est le navigateur qui de lui même invitera automatiquement l’utilisateur à ajouter la Progressive Web App à son écran d’accueil, ou lui indiquera qu’il peut le faire via une cinématique et une iconologie dédiée. 

Les critères à respecter pour bénéficier de cette notification de l’utilisateur diffèrent d’un navigateur à l’autre. A ce jour, Google Chrome, Firefox, Opera et Edge (dans sa nouvelle version basé sur Chromium) proposent des expériences d’installation pour les PWA.

Par exemple pour Google Chrome votre application doit avoir les 3 points suivants : 

  • Déclarer un Web App Manifest conforme
  • Gérer les comportements hors-connexion (Offline support)
  • Chrome vérifiera également que l’internaute est engagé (afin d’éviter les apparitions de bannière Spammy)

Comme vous l’avez découvert dans cette vidéo, désormais, le navigateur Google Chrome (à partir de sa version 76) facilite l’installation des Progressive Web App même sur les ordinateurs de bureau en ajoutant un bouton d’installation à la barre d’adresses.

Par exemple, si vous lisez cet article depuis un navigateur Google Chrome sur Windows, MacOS ou Linux vous avez peut être vue cette invitation à installer notre site.

Le navigateur permet également aux équipes de l’annonceur de personnaliser l’expérience d’installation en leur donnant la main sur la façon d’afficher cette invitation afin qu’ils puissent la mettre en conformité avec la charte graphique et les exigences de leur image de marque.

Déroulement complet d’une installation de PWA

  1. l’internaute accède a son écran d’accueil classique
  2. Il lance son navigateur web sur son mobile
  3. il utilise son navigateur pour accéder au site web.
  4. le navigateur après avoir vérifié la compatibilité du site déclenche l’affichage d’une mini-bannière d’installation.
  5. l’internaute clique sur cette bannière et confirme la demande d’installation sur son smartphone.
  6. l’application s’installe en arrière plan sur le mobile de l’internaute
  7. l’internaute retrouve la PWA dans le launcher d’application de son device et son écran d’accueil
  8. en lançant l’application depuis son écran d’accueil un écran de lancement personnalisé est présenté a l’internaute
  9. l’application démarre dans une fenêtre dédiée et la barre de status du device est mise aux couleurs de l’application

Et maintenant quelles sont les prochaines étapes ?

Vous savez maintenant que les vos sites PWA peuvent maintenant se retrouver au sein des applications natives de vos utilisateurs. Mais afin d’être encore plus intégrées vous pourriez également utilisez les nouveaux standard du web comme les API de requêtes de paiements, l’intégration avec le lecteur multimédia et les API de Bluetooth Web. Nous vous exposerons, dans un article à venir, certains de ces éléments afin de vous permettre de proposer une expérience utilisateur encore plus poussée.

Alors si ce n’est pas encore fait, abonnez-vous à nos notifications en utilisant la petite 🔔 en bas a gauche de votre écran.

Retrouvez nos articles précédents sur les PWA : les Progressive Web Apps et Les piliers des PWA : La performance