Dans un premier temps, 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. C’est certain, les utilisateurs doivent pouvoir interagir avec votre application de la même manière que toutes les autres applications de leur appareil. Aussi, vous pouvez ajouter votre application sur l’écran d’accueil d’un smartphone mais aussi sur le bureau des ordinateurs.

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 ?

D’autre part, dans la vidéo ci-dessous, les internautes peuvent découvrir mais aussi installer un site compatible avec les normes des Progressive Web Apps.

  1. Pour commencer, l’internaute utilise son navigateur pour accéder au site web.
  2. Puis, après avoir vérifié la compatibilité du site, le navigateur déclenche l’affichage d’une mini-bannière d’installation.
  3. Ensuite, cliquer sur cette bannière déclenche le processus d’installation sur son smartphone.
  4. Enfin, 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 pouvions ajouter une URL à nos favoris sur l’écran d’accueil, cependant de notre smartphone. Cependant, l’expérience utilisateur laissait beaucoup à désirer. Auparavant, cette option étant profondément enfouie dans le menu, et n’était pas toujours visible. C’est pourquoi, sur des appareils plus petits, il fallait faire défiler le menu pour le trouver, pas pratique nous direz-vous ! 

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 !

Dans ces conditions, 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. Celui-ci, informe le navigateur sur les détails de votre application. 
Ainsi, 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 à 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 encore, le navigateur lui indiquera qu’il peut le faire via une cinématique et une iconologie dédiée. 

Pour bénéficier de cette notification, les critères à respecter 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’une part, déclarer un Web App Manifest conforme.
  • Puis, gérer les comportements hors-connexion (Offline support).
  • Pour finir, Chrome vérifiera également que l’internaute est engagé (afin d’éviter les apparitions de bannière Spammy).

Ensuite, cComme 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.

De plus, le navigateur permet également aux équipes de l’annonceur de personnaliser l’expérience d’installation. Effectivement, en leur donnant la main sur la façon d’afficher cette invitation, ils peuvent ainsi 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. D’une part, l’internaute accède à son écran d’accueil classique.
  2. Puis, il lance son navigateur web sur son mobile
  3. Ensuite, il utilise son navigateur pour accéder au site web.
  4. Après vérification de la compatibilité du site, le navigateur déclenche l’affichage d’une mini-bannière d’installation.
  5. Après cela, 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 lanceur d’application et son écran d’accueil.
  8. En lançant l’application depuis son écran d’accueil, un écran de lancement personnalisé est en fait présenté a l’internaute.
  9. Pour terminer, l’application démarre dans une fenêtre dédiée et la barre de statuts est mise aux couleurs de l’application.

Et maintenant quelles sont les prochaines étapes ?

Dorénavant, vous savez que les 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 utiliser les nouveaux standards du web. Tout comme les API de requêtes de paiements, l’intégration avec le lecteur multimédia et les API de Bluetooth Web. Quoi qu’il en soit, 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 le dossier complet sur les PWA :