Home Outils Les PWA

Les PWA

  Benjamin, Développeur Front-End 5 min 13 juillet 2018

Différentes options se présentent pour se lancer dans le développement mobile en fonction de nos besoins, des moyens mis en place ou des plateformes visées : un site responsive, un site mobile, une application mobile native ou hybride. Et si, désormais, il était possible d’additionner les points forts de ces différentes solutions afin de répondre aux nouvelles exigences du marché et rendre l’expérience utilisateur encore plus performante ?

 

Une PWA, c’est quoi ?

L’avenir des sites internet – le trafic mobile ayant dépassé celui du desktop depuis Novembre 2016 – semble se tourner de plus en plus vers les progressives web app que l’on pourrait comparer à des applications hybrides étant à mi-chemin entre application natives et site web mobile.

Et cela, Google l’a bien compris en mettant en avant ce nouveau type de solutions, suivi depuis peu par Apple qui semble amorcer un virage déterminant dans l’émergence annoncée des PWA.

Une progressive web app se résumerait donc à un site web mobile qui pourrait utiliser les fonctionnalités du smartphone (notifications, localisation, appareil photo …) comme une véritable application native le ferait si l’utilisateur l’y autorise.


On va alors parler d’ « App Like » en terme d’apparence, notre PWA possèdera son icône propre ainsi qu’un écran de chargement (splashscreen) au démarrage et un mode plein écran. Mais au-delà de l’apparence globale, les PWA offrent beaucoup d’autres avantages par rapport à ses concurrents du web.

 

Pourquoi choisir une PWA ?

Evidemment, on peut toujours affirmer que les applications natives/hybrides offrent une expérience utilisateur plus satisfaisante que les sites web mobiles. Cependant, en comptant la recherche sur le store, le téléchargement, l’espace alloué toujours plus important et les mises à jour occasionnelles, cela devient vite fastidieux et l’UX peut en prendre un sérieux coup – on estime que l’on perd 20% des utilisateurs à chaque nouvelle étape. De plus, les applications coûtent généralement plus cher en temps, en moyens et donc en coût global à développer ainsi qu’à mettre à disposition sur les stores. Au fur et à mesure du temps, la maintenance de l’application semble donc rester trop importante pour être véritablement viable.

Or, que demande-t-on à un site web ou une application ? Qu’ils soient fiables, rapides et accessibles.
C’est sur ces trois axes qu’ont été pensés les progressives web app afin de répondre au mieux aux exigences utilisateurs.

  • On souhaite, en effet, que notre application soit fiable et lisible quel que soit le réseau lorsque je la lance, qu’elle se charge instantanément et me permette de stocker les ressources importantes de l’application en cache (sur le navigateur) afin de les restituer même hors connexion.

  • On aime aussi lorsque notre application se lance rapidement et nous affiche du contenu de manière simple et fluide sans temps de chargement interminable de récupération des données.
  • On apprécie d’y accéder le plus simplement possible et que cela se fasse directement via le navigateur sans passer par les stores d’application afin que l’on puisse par la suite la lancer directement depuis notre home sans retourner sur le navigateur. Les mises à jour sont transparentes pour l’utilisateur et l’espace sur le disque est quasi nul.

Cependant, il est vrai qu’une PWA ne peut pas pour le moment remplacer toutes les applications natives/hybrides mais au vu de la longue liste des avantages et de l’avenir radieux qui s’offre à cette solution, il vaut peut-être mieux étudier le fait de se lancer dans le développement d’une PWA plutôt qu’une application native/hybride.

Pour résumer, un petit tableau comparatif des avantages/inconvénients selon les différentes solutions sur mobile :

App native/hybride Site mobile responsive PWA
Pas besoin de store d’application Non Oui Oui
Processus rapide de mise en production Non Oui Oui
Mode hors connexion Oui Non Oui
Interface user friendly (pleine écran, interactivité, accès rapide via un bouton sur la home) Oui Non Oui
Interactivité (notifications, appareil photo, géolocalisation, …) Oui Non Limitée
Accessibilité sur tous les supports (un Nokia 3210 comme un IPhone X) Non Oui Oui
Adaptabilité/Universalité sur tous les systèmes d’exploitation (iOS, Android ou autre) Non Oui Oui
Faible coût (Temps + Argent) Non Oui Oui

En dehors d’une limitation sur l’interactivité avec le périphérique utilisateur (les navigateurs offrant de plus en plus de possibilités mais celles-ci restant néanmoins limitée par rapport aux applications hybrides et à fortiori natives), on peut donc conclure que les progressives web app reprennent la majorité des avantages des autres solutions mobiles sans les inconvénients. Presque magique, non ?

 

Les PWA, comment ça marche ?

A partir de ces constats, le principe des progressive web app a pu se baser sur deux concepts :

  • les services worker
  • le fichier manifest

Entrons un peu dans la technique afin de comprendre réellement comment fonctionne les PWA.
Nous avons tout d’abord, l’utilisation d’un service worker qui est un petit script permettant d’intercepter/modifier la navigation ainsi que les requêtes en mettant en cache les données afin de maitriser complètement les actions de l’application.
Par exemple, notre PWA va lancer une requête au serveur qui sera interceptée par le service worker, celui-ci va, en fonction de l’état du réseau, rediriger la requête vers le bon chemin afin d’obtenir la réponse la plus adaptée.


Un des vrais intérêts des PWA est là : avoir accès à du contenu déjà vu même quand le réseau est perdu. On ne tombe pas sur un loader infini attendant une connexion afin de charger les données mais bien sur du contenu de notre application gardé en cache ainsi que les pages que l’on aurait déjà consultées.

On peut retrouver la liste de tous les services worker dans l’onglet « Application » de l’interface de développement du navigateur.
En mode hors-ligne, nos fichiers sont donc conservés en cache dans le Cache Storage du navigateur, nous permettant d’y accéder même sans le réseau et simplement grâce au service worker.

Un autre point positif apporté par les PWA est cette gestion similaire à une vraie application : en naviguant sur le site web, on peut ajouter un raccourci sur notre mobile afin d’accéder à notre application plus rapidement mais surtout profiter de toutes les fonctionnalités du smartphone (le push de notification, l’accès à l’appareil photo, la géolocalisation, …). Elle deviendra ainsi identique à une vraie application du store possédant une icône et une page de chargement rendant unique et accessible notre progressive web app ainsi que des possibilités d’interaction avec l’utilisateur.

Et afin de réaliser cette manipulation, on fait appel à un fichier manifest qui va définir toutes les informations nécessaires à la configuration de l’application (son nom, sa couleur de fond, son orientation, son icône sur la home, son mode d’affichage, …) lorsque l’utilisateur va l’ajouter sur son smartphone.

 

Lighthouse : ma PWA est-elle performante ?

Pour finir, présentons une petite extension très pratique permettant de mesurer la performance de notre PWA : Lighthouse.

Elle se décompose en analysant 4 critères notés sur 100 qui répondent à la PWA checklist – liste de tests permettant de définir son niveau d’optimisation : la performance, l’accessibilité, bonnes pratiques et si c’est une bien une progressive web app.

Grâce à toutes ses recommandations, il est encore plus simple et facile de rendre notre application performante et fluide.

 

PWA : Alors, qu’est-ce qu’on attend ?

Bien qu’au début de leur évolution, les PWA semblent promises à un bel avenir en combinant tous les avantages des autres solutions proposées à l’heure actuelle et en laissant imaginer qu’elles remplaceront à terme les applications natives/hybrides.
C’est donc, en termes de coût et de rentabilité, une excellente opportunité d’investir et se lancer dès maintenant dans le développement des progressives web app.

Lire les articles similaires

Laisser un commentaire

Social Share Buttons and Icons powered by Ultimatelysocial