La petite révolution des « Progressive Web Apps »

Depuis quelques années, il y a une nouvelle venue dans le monde du développement mobile, c’est la « Progressive Web App », une application qui se lit sur navigateur et qui possède plus d’avantages qu’une application mobile classique.

Qu’est-ce qu’une "Progressive Web App" ?

Une "Progressive Web App", va combiner les technologies du web (HTML, CSS, JavaScript) et les fonctionnalités d’une application native (notifications push, vision plein écran, géolocalisation etc.).

Elle est mobile-first, lisible depuis un navigateur, possède un URL et elle est responsive sur tous les écrans (mobile, tablette, PC). Aujourd’hui la PWA représente un vrai croisement entre la web App (Hotmail, Google Drive) et le site web mobile.

C’est Google via Android qui, le premier, a flairé le filon des PWA. En effet il rend peu à peu disponible toutes les fonctionnalités des applications natives aux PWA, et ce depuis déjà quelques années. Elles se retrouvent aujourd’hui dotées de nombreux avantages mais également du meilleur des applications natives (notifications push, icônes, mode plein écran).

A noter cependant qu’iOS n’a pas été aussi rapide que Android à doter les PWA de fonctionnalités natives sur son système. Il se rattrape donc en ce moment, en les supportant de mieux en mieux à chaque mise à jour, avec des avancés quasiment chaque mois.

Comment fonctionne-t-elle ?

Pour commencer elle utilise un script « Service Workers », qui va donner l’accès à des fonctionnalités comme l’envoi de notifications push, la mise à jour du contenu en arrière-plan ou encore l’utilisation hors-ligne.

La PWA stocke les fichiers HTML, les fichiers CSS et les images dans la mémoire cache du navigateur, ce qui permet aux développeurs Android de contrôler entièrement l'appel réseau.

Basée sur un modèle « App Shell » elle fournit une enveloppe de l’UI de base avant la mise en place des données. On sépare donc le contenu et la structure de l’application pour gagner en temps de chargement.

Enfin, elle utilise un « manifest.json », un fichier qui lui permet de créer un raccourci sur la page d’accueil depuis le navigateur, et non plus après installation depuis le Store ! Cette manipulation est facilement réalisable sur Android, tandis que sur iOS il faut ruser un peu ou épingler son site.

Il faut savoir qu’iOS a fait beaucoup d’efforts récemment pour intégrer les PWA. En effet le système d’exploitation offre par exemple beaucoup plus d’accès aux outils du smartphone (géolocalisation, gyroscope) et améliore l’expérience utilisateur. Les fonctionnalités du « manifest » ne s’arrêtent pas là puisqu’il permet de rendre un aspect plus natif à l’application via la possibilité de tourner l’écran, d’effectuer un affichage sans barre d’adresse ou encore d’en changer la couleur.

Enfin, conjointement à ces fichiers, on peut coder notre "Progressive Web App" comme un site web classique, avec de l’HTML, du JavaScript et du CSS.

Quels sont les avantages d’une Progressive Web App ?

Voyons ensemble les avantages d’une PWA face à une application native classique :

• On n’a pas besoin d’installer une PWA, on y accède via son URL.
• On peut mettre l’icône d’une PWA en raccourci sur l’accueil d’un téléphone depuis le navigateur sans avoir à l’installer
• La PWA représente un gain d’argent car elle n’est développée qu’une fois, alors qu’une app native a besoin d’être développée pour Android et iOS
• Grâce à sa mise en cache partielle, l’utilisateur ne la re-télécharge pas à chaque fois qu’il l’utilise
• En l’absence de téléchargement, la PWA n’utilise qu’une parcelle très limitée de la mémoire du téléphone
• La PWA a un référencement ! Et oui, grâce à son URL, elle est référencée par Google, elle est donc SEO-friendly
• Elle est utilisable sans connexion internet
• Elle est sécurisée (HTTPS), et responsive (PC, Tablette, Portable)

Citons maintenant les inconvénients :

• Son absence sur les stores mobiles
• Parmi les navigateurs, Chrome fait office de bon élève, mais les autres mettent du temps à s’adapter à la PWA
• Impossible de pas possible de faire du geofencing
• Limite de stockage de données offline est de 50Mb maximum
• Malgré ses nombreuses fonctionnalités, elle offre des possibilités limitées en termes d’UX et d’UI, notamment en 3D (pas d’accès au bluetooth, au touch ID, au Face ID, au NFC, etc.)
• A lire également : Pourquoi utiliser React Native pour le dev mobile ?

La revanche des « Applications natives » face aux "PWA"

Vous vous demandez certainement pourquoi une entreprise devrait choisir une « Application Web Progressive » plutôt qu'une « Application native ». Beaucoup se demande également si les PWA viendront un jour les remplacer.

A la différence des PWA, les applications natives sont écrites pour être exécutées sur des appareils mobiles et non dans un navigateur web. Elles sont développées avec les langages Objective-C et Swift pour iOS et Java pour Android. Certes plus longues et plus chères à développer (à cause du développement de versions distinctes pour les 2 plateformes), les applications natives sont cependant plus sécurisées, s’exécutant sous HTTPS. Un gage de confiance pour l’utilisateur !

Elles peuvent interagir les unes avec les autres  (par exemple en proposant à ses utilisateurs de se connecter via Facebook) et offrent une meilleure expérience utilisateurs. Elles proposent également des solutions manquantes aux PWA comme l’accès aux services Apple (exemple : paiements in app), l’intégration Siri, l’accès aux informations (Touch ID, Face ID etc.).

L'application native permet également d'utiliser beaucoup plus de fonctionnalités que la Progressive Web App , par exemple le geofencing qui consiste à envoyer une notification à l'approche d'un point géolocalisé.

Comme la PWA, l'application native est une bonne solution pour offrir une expérience transparente aux utilisateurs. Le choix entre les deux, devrait être fait en fonction des objectifs et des ressources de votre projet.

Le « développeur natif » a certainement perdu quelques parts de marché, mais n’est pas prêt de disparaître ! Il devra désormais redoubler d’efforts pour concurrencer les PWA, sur des applications plus poussées, en cherchant les dernières fonctionnalités que les PWA ne supportent pas encore.

Conclusion

Grâce à ses URLs, sa rapidité de chargement, ses fonctionnalités et son Design mobile, le PWA semblent être le futur des applications.  Et pour preuve « Twitter Lite », qui a mis en place une PWA pour son expérience mobile, et a vu son taux de rebond baisser de 20% et son nombre de tweets augmenter de 75%. D’autres ont aussi eu cette initiative, comme Tinder, Pinterest ou encore Lancôme.

Au vu de ces bons résultats, les navigateurs et autres plateformes ont fait récemment beaucoup d’efforts afin de supporter et d’ajouter toujours plus de fonctionnalités aux PWA, c’est donc une technologie qui évolue et qui pourrait, à terme, supplanter le marché des applications.