Beaucoup disent que les PWA (Application Web Progressive) seront la nouvelle norme dans le futur proche des applications mobiles, et ils ont probablement raison ! Avec les géants de la technologie derrière elles, les Progressive Web Apps sont une technologie différenciante qui va bientôt rendre les applications natives obsolètes.
Qu’est-ce qu’une PWA ?
Les PWA représentent un concept relativement nouveau dans le monde mobile et de l’Internet. Elles sont développées en utilisant certaines technologies et approches qui tirent profit à la fois des fonctionnalités des applications natives et des applications web. Il s’agit essentiellement d’un mélange d’applications mobile et web.
👉 Pour en savoir plus sur les applications web et mobile: https://www.hello-pomelo.com:8080/quelle-est-la-difference-entre-les-applications-mobiles-et-les-applications-web/
Grâce au concept d’amélioration progressive, elles fonctionnent quel que soit le navigateur que vous utilisez. Les PWA offrent aux utilisateurs une expérience exceptionnelle sur tous les appareils intelligents modernes – téléphone, tablette, PC, etc. Même s’il ne s’agit que d’applications Web, les PWA agissent comme une application native (avec quelques limites bien sûr).
Ce qui est sympa avec les Progressive Web Apps, c’est qu’elles ne sont pas comme les autres applications web que l’on trouve sur Internet. Elles ont accès aux fonctions internes de votre appareil et peuvent ainsi, par exemple, utiliser des capteurs tels que le GPS pour trouver votre position ou la caméra (même avec des commandes avancées !) et bien d’autres choses encore.
Le concept de PWA dans son ensemble permet un engagementplus facile de l’utilisateur avec votre contenu. Comme l’applicationsemi-native peut être sauvegardée dans le tiroir de votre application etenvoyer des notifications à votre appareil, davantage de personnes peuvent yrevenir. Il est beaucoup plus pratique de simplement taper sur une icône plutôtque d’écrire l’URL en entier.
Notez bien cette information ! Même si les applications web sur mobile ont presque 3 fois plus d’utilisateurs uniques que les applications natives, ces dernières sont vingt fois plus engageantes que les applications web. Les PWA représentent donc la technologie idéale pouvant fusionner ces deux mondes pour le bénéfice de votre entreprise et celui de vos utilisateurs.
Pourquoi les PWA ont-elles autant le vent en poupe ?
Gestion flexible des données
La plupart des données de la PWA sont sauvegardées dans le stockage de l’appareil au premier lancement.
La prochaine fois qu’un utilisateur voudra l’utiliser, l’application téléchargera juste un peu de données. C’est une caractéristique remarquablement utile pour les personnes ayant de mauvaises connexions, en particulier dans les marchés émergents comme l’Inde.
Les développeurs d’Uber et Twitter ont rapporté que leurs PWA fonctionnent très bien avec une connexion 2G régulière.
Multi-plateformes
Comme les PWA fonctionnent dans un navigateur, elles peuvent être utilisées sur plusieurs plateformes. C’est une excellente caractéristique qui permet aux entreprises d’approcher un public plus large, quel que soit l’appareil qu’ils utilisent. Vos utilisateurs bénéficieront de la même expérience sur tous les appareils. De plus, une fois le développement de l’application terminé, vous n’aurez pas besoin d’en développer d’autres pour chaque plateforme. Les PWA réduisent considérablement les délais de mise sur le marché, améliorent la productivité et diminuent les coûts de développement.
Vous pensez probablement que les PWA ne sont que des applications web qui agissent comme des applications natives. C’est tout à fait exact ! Cela signifie que vos développeurs Web peuvent facilement créer l’expérience native de type application pour vos utilisateurs en utilisant la technologie qu’ils connaissent déjà. Nous parlons de HTML5, CSS, JavaScript, et même des frameworks JS. Vue, React et Angular qui sont des supports de PWA ! Il n’est pas nécessaire d’apprendre Java et Kotlin pour Android, Objective-C, et Swift pour iOS et même C# pour le développement Windows. Cette solution est beaucoup plus facile que d’embaucher du personnel supplémentaire pour le développement d’applications natives. Une seule application pour tous les maitriser !
👉 Pour en savoir plus sur le développement: https://www.hello-pomelo.com:8080/developpement-front-end-back-end-full-stack/
Engagement de l’utilisateur
Les PWA peuvent également vous aider à améliorer les conversions de nouveaux utilisateurs ! L’application est plus fiable qu’un simple site web et vous permet d’envoyer des notifications push à vos utilisateurs même après la fermeture de l’application. Une fois qu’elle est stockée sur un appareil le temps de réaction est bien moindre que sur un site Web ordinaire qui a besoin d’aller chercher l’information et de tout charger à nouveau.
De plus, les équipes de développement peuvent mettre à jour l’application quand elles le souhaitent car il n’y a pas d’app store entre vous et vos utilisateurs ; les mises à jour sont instantanées.
Sécurité
Enfin, avec les PWA, vous n’avez pas à vous soucier de la sécurité de votre application – elle est faite via HTTPS.
Ce cryptage assure que votre application est sûre et saine, et aucune personne non autorisée ne peut la bricoler.
Comment les PWA sont-elles développées pour s’adapter à une mauvaise connexion ?
Comme vous pouvez le constater, beaucoup d’entreprises cherchent à développer des applications légères qui fonctionneront avec une connexion 2G lente. Principalement parce que ces entreprises veulent étendre leurs services sur les marchés émergents. Mais comment y parviennent-elles ?
Comme de nombreux développeurs l’ont souligné, l’équivalentPWA de leur application native prend beaucoup moins de place. Dans certainscas, elles sont jusqu’à 90 % plus légères.
Les concepteurs utilisent la puissance des SVG par opposition aux PNG ou aux JPEG. Il s’agit essentiellement d’un graphique vectoriel au format texte. L’équipe de développement d’Uber a rapporté que son logo en format SVG est 15 fois plus léger qu’un PNG.
Quelles sont les technologies utilisées par les développeurs de PWA ?
Comme nous l’avons déjà mentionné, les PWA sont essentiellement des applications web qui, avec un peu d’aide, se comportent comme une application native. Qu’est-ce que cela signifie ? Le processus de développement d’une PWA est assez similaire à celui d’une application web classique.
React
Quand il s’agit de frameworks JavaScript, React semble être le choix le plus populaire. Il est largement utilisé par les développeurs pour le développement web.
Il existe un outil populaire utilisé pour le développement de PWA appelé create-react-app qui permet de créer des applications React sans configuration de compilation.
Preact
En parlant de React, il existe une alternative très intéressante à ce cadre populaire appelé Preact. Il s’agit d’un framework très performant avec la même API qui ne pèse que 3 kB.
Vue
Avec la sortie de Vue CLI 3, l’implémentation facile des PWA a été introduite dans le monde de Vue.
Les développeurs peuvent utiliser des plugins à n’importe quel moment du développement pour implémenter une PWA dans leur projet.
Cas d’utilisation
Passons maintenant à quelques exemples de PWA que vous utilisez peut-être aujourd’hui sans même vous en rendre compte !
AliExpress
AliExpress accorde une attention particulière au commerce mobile. Malheureusement, ils ont remarqué que le site Web mobile AliExpress n’était pas aussi rapide et réactif que son homologue natif. La solution consistait à créer une application Web progressive multi-navigateur pour atteindre un public plus large.
AliExpress a ainsi noté une augmentation de 104% !!!!! du taux de conversion sur tous les navigateurs et une augmentation de 74% du temps passé par session.
👉 Lien : http://m.aliexpress.com/
Twitter Lite
Vous pouvez considérer Twitter Lite comme l’une des applications Web progressives phares. Elle fonctionne presque aussi bien que son homologue natif. Twitter cherchait à étendre son service dans les marchés émergents. C’est pourquoi la version Lite a été spécialement conçue pour fonctionner parfaitement avec une mauvaise connexion.
Twitter Lite ne prend aujourd’hui que 5 secondes pour devenir interactif en 3G ! Ils ont constaté une augmentation de 75 % du nombre de tweets envoyés et de 65 % du nombre de pages par session. Les temps de chargement moyens ont également été réduits de plus de 30 %.
👉 Lien : http://mobile.twitter.com/
Trivago
De plus en plus de gens accèdent à Trivago via leur portable plutôt que via un ordinateur. C’est un signe clair que Trivago a continué à développer ses services mobiles afin de garder une longueur d’avance sur la concurrence. Le développement de leur PWA s’est traduit par une augmentation de 150% de l’engagement des utilisateurs ainsi que par des améliorations significatives dans la conversion. L’accès hors ligne permet aux utilisateurs d’utiliser l’application même lorsque la connexion est mauvaise. Cela leur a épargné beaucoup de frustration et a permis à Trivago de fidéliser ses utilisateurs.
👉 Lien : https://trivago.com/
OLX
Plus de 90% des visiteurs d’OLX sont des utilisateurs mobiles. L’entreprise a constaté qu’à l’époque, l’expérience de son site Web mobile était trop lente. C’est pourquoi OLX a opté pour une solution PWA afin d’offrir aux utilisateurs une expérience rapide et immersive comme une application native.
L’engagement des visiteurs OLX a augmenté de 250% ! Sur une période de 7 mois, plus de 600 000 utilisateurs se sont inscrits grâce aux notifications push que l’application OLX peut envoyer. Aujourd’hui, la PWA d’OLX prend 23% de temps en moins à l’ouverture et affiche les annonces beaucoup plus rapidement, ce qui conduit à un taux de clics plus élevé (146%).
👉 Lien : https://m.olx.com/
Forbes
L’expérience utilisateur du site Web mobile de Forbes était pour le moins médiocre. Même leurs demandes d’emploi étaient divisées en plusieurs sites Web. Forbes a opté pour une PWA ce qui a conduit à des résultats épatants.
Le temps de chargement a été réduit de 6,5 secondes à seulement 2,5 secondes. Le poids de l’application a été réduit de 2 Mo à seulement 300 Ko ! Désormais, l’équipe de développement de Forbes peut faire des ajustements à la volée et mettre à jour régulièrement l’application, même plusieurs fois par jour.
Pinterest a constaté une amélioration massive lorsqu’elle a changé son site Web mobile pour une PWA.
Grâce à l’introduction des ressources CSS, JavaScript et des ressources statiques de l’interface utilisateur à l’aide de Service Worker, le temps nécessaire pour que l’application soit fonctionnelle est passé de 23 secondes à seulement 6 secondes. De plus, le trafic mobile et la conversion ont été considérablement augmentés.
👉 Lien : https://pinterest.com/
Uber
Uber voulait implémenter une expérience native dans une application web légère pour étendre ses services sur de nouveaux marchés et plateformes.
La sortie d’Uber PWA a été un grand succès. L’application m.uber se charge rapidement même avec une mauvaise connexion 2G. Ils ont utilisé plusieurs astuces pour rendre l’application aussi légère que possible, et ça a marché ! L’application Core m.uber est disponible et pèse seulement 50 kB.
👉 Lien : https://m.uber.com/
Tinder
Comme d’autres applications mentionnées ci-dessus, Tinder Online a été créé pour se développer sur de nouveaux marchés.
La PWA n’a pris que 3 mois pour être développée et elle offre l’expérience Tinder de base avec seulement un dixième de la taille de l’application native ! Il ne faut que 5 secondes sur une connexion 4G pour devenir fonctionnelle. L’équipe de développement a utilisé le découpage de code basé sur JavaScript Route pour réduire ce temps de 12 secondes à seulement 5 secondes. Par ailleurs, Tinder a constaté une augmentation du temps de session, des messages et des swipes par rapport à leur application native.
👉 Lien : https://tinder.com/
