PWA. (Progressive Web Apps) est l’un des changements technologiques les plus discutés sur le web et a gagné un élan sans précédent parmi les praticiens du monde informatique. Si vous construisez pour le web, je suis sûr que PWA est le dernier mot à la mode qui a été ajouté à votre vocabulaire professionnel. Ce n’est pas surprenant car PWA a rendu réel le rêve farfelu d’installer des applications web sur un téléphone.
Il y a déjà eu beaucoup de projecteurs et de » geekspeaks » sur la construction de PWA et ses avantages. La plupart des tentatives d’introduction de PWA, en particulier pour les néophytes, semblent être remplies de jargon ou avaient trop de code qui pourrait les intimider pour faire le premier pas. Dans cet article, j’essaie de donner un aperçu de la PWA, juste assez pour lancer leur processus d’apprentissage.
Qu’est-ce qu’une Progressive Web App?
« Progressive Web App (PWA) est un terme utilisé pour désigner une nouvelle méthodologie de développement logiciel. Contrairement aux applications traditionnelles, les applications Web progressives sont un hybride de pages Web ordinaires (ou sites Web) et d’une application mobile. Ce nouveau modèle d’application tente de combiner les fonctionnalités offertes par la plupart des navigateurs modernes avec les avantages de l’expérience mobile. »
Voilà ce que dit wikipedia à propos des PWA. Bon, cela peut sembler un peu vague ou même litigieux. Alors regardons la PWA de manière informelle.
Si jamais le meilleur du web et le meilleur des apps ont eu un enfant clone – c’est la PWA. Ou alors, c’est simplement que la page web a pris toutes les » bonnes vitamines » pour pouvoir se comporter davantage comme une app téléchargée sur l’App Store/ Play Store. Elle commence comme une page Web normale dans un navigateur et, au fur et à mesure que l’utilisateur explore la page Web, il lui est demandé s’il souhaite « Ajouter à l’écran d’accueil ». Une fois que l’utilisateur a répondu positivement à cette demande, VOILA ! La PWA est ajoutée à son écran d’accueil. Une fois ouvert depuis l’écran d’accueil, il peut même masquer les contrôles de l’interface utilisateur du navigateur et apparaître comme une application.
C’est plus un marque-page glorifié qui a touché le sweet spot entre le web et les applications mobiles. Je dis cela parce que les PWA ont réussi à combler le fossé du web. Le web a toujours été assoiffé de performances fiables, à égalité avec les applications natives. Il a toujours aspiré à une place dans la barre de notification et sur l’écran d’accueil, tout comme une application. Plus de 40% des utilisateurs se détournent des sites web qui mettent plus de 3 secondes à se charger. La PWA est une solution à cette « épidémie d’obésité du Web » à laquelle sont confrontés les utilisateurs.
Il s’agit d’éliminer les frictions et de permettre aux utilisateurs d’accéder facilement à ce qu’ils veulent.
Tout le mérite de cette expérience transparente doit être attribué au Service Worker( Un script que le navigateur exécute en arrière-plan séparément de la page web), qui est l’épine dorsale de chaque PWA. Les Service Workers permettent une mise en cache fiable et intelligente, une mise à jour du contenu en arrière-plan, des notifications push et une fonctionnalité hors ligne des plus attrayantes pour les sites visités précédemment. Cela signifie que, après la première visite d’un site web, le site et l’application seront fiables et rapides, même sur des réseaux vacillants.
Mais une question pourrait se poser ici – qu’en est-il du premier chargement rapide avec des performances fiables ? C’est là que les pages mobiles accélérées (AMP) rencontrent le travailleur de service. AMP fournit des composants web fiables et rapides pour le premier chargement. Ces composants sont beaucoup plus rapides à charger et moins gourmands en données. Les sites Web qui utilisent la combinaison d’AMP et de Service Worker offrent une vitesse fiable, comparable à celle des applications natives. Une fois la page chargée, le site configure le Service Worker et les ressources sont mises en cache intelligemment. Cela permettra de toujours garder la PWA à jour, libérant ainsi les utilisateurs des fréquentes mises à jour à effectuer depuis l’App Store.
La PWA en quelques mots :
- Fiable : Chargement rapide et fonctionne hors ligne
- Rapide : Animations fluides, défilement sans jank et navigation transparente même sur les réseaux défaillants
- Engageant : Lancé depuis l’écran d’accueil et peut recevoir des notifications push
Pourquoi est-ce important ?
C’est un mythe que les utilisateurs téléchargeront volontiers l’application de chaque site web qu’ils visitent fréquemment. Selon le rapport sur les applications mobiles de Comscore, plus de 50 % des utilisateurs américains de smartphones téléchargent zéro application par mois, c’est-à-dire que l’époque où le téléphone était rempli d’applications est révolue et que la phase de lune de miel des smartphones des gens s’épuise. Chaque étape du téléchargement d’une application réduit de 20% le nombre d’utilisateurs. Les PWA réduisent les étapes entre la découverte d’une application et son installation sur l’écran d’accueil, éliminant ainsi les frictions liées à l’installation d’une application. Cela constitue un terrain très fertile pour les entreprises qui souhaitent lancer leur PWA.
Les trois métriques suivantes peuvent être mises en avant pour comprendre l’importance de la PWA dans le moulage du futur web.
a. Portée : L’audience du web mobile a augmenté à un rythme fulgurant au cours des dernières années. Google a indiqué que Chrome compte un milliard d’utilisateurs mobiles, alors qu’il en comptait 400 millions en 2016. Selon le rapport de Comscore, la portée du web mobile est 2,5 fois plus importante que celle des applications, si l’on considère les 1000 premiers sites et applications. C’est la raison pour laquelle la décision de Flipkart, Myntra, etc. d’abandonner leur site web et de n’utiliser que des applications s’est retournée contre eux. Si nous pouvions offrir une meilleure expérience à un public plus large, nous pourrions sûrement obtenir un avantage concurrentiel sur les autres.
b. Acquisition : Une autre préoccupation sérieuse à laquelle sont confrontées les apps mobiles est leur découvrabilité par les utilisateurs par rapport aux sites web. Le coût d’acquisition des utilisateurs du web sera 10 fois moins cher que celui des apps natives. Avec une plus grande exposition et une faible friction pour l’embarquement, la PWA est susceptible d’acquérir plus d’utilisateurs à très faible coût.
c. Conversion : L’expérience utilisateur transparente de bout en bout, même avec des réseaux vacillants, fournie par la PWA améliore le nombre de conversions réussies. Flipkart a lancé sa PWA ‘Flipkart-lite’, qui, selon eux, a permis une augmentation du taux de conversion de 70% avec un coût d’acquisition plus faible.
En résumé : Les PWA permettent d’améliorer les conversions en augmentant la portée potentielle avec de faibles coûts d’acquisition.
Comment se lancer ?
Une fois que vous avez appris à connaître une nouvelle technologie, le prochain défi en ligne est la décision de l’adopter. La plupart des gens se retrouvent dans un dilemme à ce stade. La décision doit être motivée par les besoins spécifiques de votre entreprise. Les deux cas suivants pourraient vous aider à identifier la méthode qui vous convient pour mettre en œuvre une PWA.
a) Du point zéro
Envisagez le scénario où une entreprise construit un nouveau site Web ou passe par une refonte. Dans ce cas, la construction d’une PWA à partir du point zéro a du sens et est réalisable. Cela permettra à l’entreprise d’exploiter la puissance de la PWA avec AMP, les travailleurs de service, App shell et Web Manifest. Par exemple. Selon Ali Express, une fois qu’ils ont remanié leur site Web en PWA, ils ont pu augmenter leur taux de conversion pour les nouveaux utilisateurs de 104%, ont gagné 2X plus de pages visitées par session par utilisateur sur tous les navigateurs et 74% d’augmentation du temps passé par session sur tous les navigateurs.
b) Une version simple ou Une seule fonctionnalité
Lorsque la construction à partir de zéro n’est pas réaliste, on peut toujours construire une version simple du site Web ou se concentrer sur une seule fonctionnalité qui a un impact élevé pour les utilisateurs finaux. L’objectif est d’offrir une expérience rapide, engageante et fiable. AirBerlin est un exemple approprié dans ce cas. L’entreprise s’est concentrée sur l’expérience post-réservation dans sa PWA. Après qu’un passager se soit enregistré, il peut accéder aux détails de son voyage et à sa carte d’embarquement même sans connexion Internet.
4. Défis de la PWA
Il y a quelques défis dans la PWA qui doivent être pris en compte lors de son choix.
a) Prise en charge par plusieurs navigateurs : si Chrome, Opera et le navigateur androïde de Samsung prennent en charge la PWA, IE, Edge et Safari doivent encore étendre leur prise en charge.
b) Fonctionnalité limitée : PWA n’a pas de support pour tout matériel qui n’est pas supporté par HTML5
c) Légitimité limitée : Comme il n’y a pas de magasin de téléchargement central pour les PWA, elles manquent pour donner un sentiment de légitimité et de confiance qui est généralement donné par les apps natives de Play Store/App Store.
d) Support de connexion inter-applications : Les apps natives ont la capacité de parler à d’autres apps et d’authentifier les connexions (Facebook, Twitter, Google). En tant que page web, la PWA n’a pas la capacité de communiquer avec les autres apps installées.
Conclusion
Nous ne pouvons pas dire que la PWA tuera les apps natives à l’avenir. Mais il y a quand même un intérêt croissant pour cette approche dans la communauté. Les PWA n’en sont encore qu’à leurs débuts, avec de nombreux défis à relever. Pourtant, elles ont le potentiel de créer un changement dans la façon dont le web fonctionne.
De quoi réfléchir
Selon Henrik Joreteg, « les PWA sont la plus grande chose à se produire sur le web mobile depuis que Steve a introduit l’iPhone ! »
Débattable ? Controversé ? D’accord ?
Réfléchissez avant que le temps ne passe !