Pourquoi évoluer vos Web Apps en Progressive Web Apps?

Aujourd'hui, 60% du trafic internet provient de téléphones mobiles. Il est donc impératif pour tout développeur d’application web de tenir en considération d’abord l'expérience mobile!

• La 1ere réponse à cette réalité a été le concept de Responsive Design en 2010, qui a permis d'adapter les applications web aux différentes résolutions d'écrans.
• L'étape suivante est le concept de Progressive Web Apps, introduit par Google en 2015 à partir de la vision de Steve Jobs en 2012, qui permet d’offrir un expérience plus similaire à celle des app-mobiles native en terme de rapidité et de fonctionnalité. 

Qu’est ce qu’une Progressive Web App?

Une Progressive Web App (ou Application PWA) est une application construite à partir des technologies Web standard (HTML, CSS et JavaScript), mais augmentée avec des fonctionnalités additionnelles qui lui permette de rivaliser avec les app-mobile natives.

Avantages et Inconvenients des Progressive Web Apps

Les avantages des applications PWA:

• Responsive: S’adapte aux différentes résolutions d'écrans: desktop, mobile, tablette etc.
• Sécuritaire: Fonctionnent uniquement via le protocole sécuritaire HTTPS.
• Installable: Peut être installée web sur l'écran d'accueil du téléphone sans télécharger à partir d’un App-Store.
• A Jour: Se met automatiquement à jour sans le moindre téléchargement.
• Partageable: L’application peut être distribuée juste en partageant son URL.
• Réactivable: Elles facilitent la réactivation de l'application grâce à des fonctionnalités telles que les notifications Web.
• Offline: Fonctionne même lorsque l'utilisateur a perdu sa connexion Internet.
• Coûts de développement: Le même code qui fonctionne sur le Web, Android et iOS, et géré uniquement par des developeur web, pas besoin de développeurs mobile Android ou iOS.
  

Les inconvenients des applications PWA:

• Support limité de toutes les fonctionnalités PWA dans les environment Apple.
• Tous les appareils ne supportent pas la gamme complète des fonctionnalités PWA (même discours pour les systèmes d'exploitation iOS et Android).
• Usage plus important de la batterie des téléphones.
• Accès limité à certains composantes matérielles des téléphones. 

Anatomie d'une Progressive Web App

Une application PWA est une application web standard avec 2 éléments additionnels: le Manifest et le Service Worker.

Le Manifest

Le Manifest est un simple fichier JSON qui définit les paramètres de base de PWA pour contrôler l'apparence de l'application à l'utilisateur, définir son apparence au lancement, icônes, autres fonctionnalités de base telles que les couleurs, les polices et l'orientation de l'écran.

Le Service Worker

Le Service Worker est un fichier javascript que le navigateur web exécute en arrière plan, qui permet d'accéder à des fonctionnalités avancées afin d’améliorer l'expérience de l’usager.

Aujourd’hui, les Service Workers supportent:

• Push Notifications: Pour envoyer des alertes aux utilisateurs
• Installation: Pour installer l’application sur téléphone, sans passer par un app-store.
• Gestion Réseau: Pour intercepter et de gérer les requêtes réseau, y compris la gestion programmatique d'une cache de réponses. Il s'agit d'une API qui prend en charge les expériences offline en donnant aux développeurs un contrôle complet de l'expérience. 

Exemple de Progressive Web Apps

1. Wutsi

La plateforme Wutsi a migré vers PWA dès Juillet 2020. Les fonctionnalités PWA supportées  permet aux usagers:

• D’installer Wutsi sur leur téléphone.
• De recevoir des alertes lorsque de nouvelles Stories sont publiées.
• De bénéficier d’un temps de chargement des pages 5 fois plus rapide, grâce à la stratégie de caching implémentée qui permet de stocker localement images, CSS, scripts et le contenu des Stories, afin de limiter les téléchargements via réseau.

La prochaine étape va être de permettre aux usagers d'accéder à leur Stories en mode offline, sans connexion internet.

2. Pinterest

L'équipe d'ingénieur de Pinterest a conçu en 3 mois la version PWA de leur plateforme afin d'accélérer leur expansion internationale. Les résultats obtenus ont été impressionnant:

• La taille de l’app PWA: 150Kb (vs 10Mb Android, 56Mb iOS)
• La taille de chargement des pages réduit de 20s à moins de 3.9s.
• La durée des visites des utilisateur a augmenté de 40%.

Conclusion

PWA offre une excellente alternative pour développer des applications mobiles, de façons rapide et peu coûteuse.

Dans la prochaine série d’articles, nous allons vous montrer comment convertir une application web standard en une application PWA.