Développer une PWA : pourquoi et comment s’y prendre ?
Développer une PWA (Progressive Web Application) est désormais une alternative aux applications mobiles natives, lorsque l’on souhaite proposer une expérience enrichie sur mobile aux utilisateurs.
Avantages et mise œuvre, voici l’essentiel à retenir sur les PWA.
Les 8 principaux avantages d’une Progressive Web Application
Pour être qualifié de “Progressive Web Application”, un site web doit être :
• Responsive : Le site Internet s’adapte à n’importe quel type d’appareil (smartphone, tablette, ordinateur), à n’importe quelle forme d’affichage et à toutes les tailles des écrans.
• Indépendant de la connexion : Le site Internet s’enrichit pour être utilisable hors-ligne. Il est donc accessible plus rapidement.
• Installable : L’application web peut être ajoutée sous la forme d’un raccourci sur l’appareil. Il s’agit ici du critère principal permettant d’identifier une PWA sur un appareil compatible.
• Automatiquement à jour : Le site Internet se met automatiquement à jour de façon transparente pour l’utilisateur.
• Sécurisé : La fiabilité du site Internet est assurée par le protocole HTTPS.
• Optimisé pour le référencement : L’application web est référencée par les moteurs de recherche de la même manière que les autres sites Internet.
• Amélioré grâce à l’ajout de fonctionnalités spécifiques : L’expérience de l’utilisateur est enrichie grâce à des fonctionnalités propres à l’appareil utilisé comme par exemple les notifications “push” pour les smartphones.
• Partageable : Au sein de l’application mobile, il est possible de partager, sans friction, une page en particulier à l’aide d’une URL.
Cette liste de caractéristiques n’est toutefois pas exhaustive, certains critères variant selon les appareils supportés.
3 concepts pour mettre en place une Progressive Web Application
Comme pour le HTML5 il y a plus de dix ans, les PWA sont une collection de nouvelles technologies et méthodologies qui permettent de transformer un site web classique en une application web. Dans ce cadre, trois concepts sont essentiels pour développer une PWA :
- MANIFEST.JSON :
Le fichier manifest.json est un fichier qui va décrire les métadonnées du site mobile : nom de l’application, icône, URL de démarrage, orientation de l’écran, couleur du thème, etc.
- SERVICE WORKER :
Clef de voûte d’une Progressive Web Application, il s’agit d’un fichier JavaScript qui sera exécuté en parallèle du serveur web. Il sert ainsi de proxy interne qui peut intercepter les requêtes HTTP pour, par exemple, utiliser le cache propre à l’application, et permettre un fonctionnement hors-ligne de la Progressive Web Application.
- APPLICATION SHELL :
L’application Shell correspond au squelette de l’application web. L’objectif principal de développer une PWA est le chargement rapide, il est donc important de faire apparaître de façon quasi instantanée, un premier aperçu de l’application, appelé le First Meaningful Paint. Ce squelette pourra être mis en cache et être complété par des données dynamiques lors du chargement de l’application.
4 outils pour développer une PWA
Parmi les outils utiles pour développer une PWA :
- Lighthouse PWA Analysis Tool : Il permet d’évaluer la qualité de votre site Internet (vitesse, accessibilité, etc.), mais également de vérifier la compatibilité de votre site avec les principes d’une PWA. Toutes ces informations sont ensuite enregistrées dans un rapport d’audit et une note de 0 à 100 est donnée, l’objectif étant d’atteindre la note maximale de 100 pour une Progressive Web Application optimale.
- Web App Manifest Generator : Il permet d’accélérer l’écriture du fichier manifest.json en automatisant notamment la génération des vignettes pour les différentes tailles d’icône.
- What Web Can Do Today : Il précise toutes les fonctionnalités qui peuvent être prises en charge par votre navigateur web et évite ainsi les problèmes de compatibilité avec les PWA.
- MobileHTML5.org : Il propose de tester la compatibilité des services d’une Progressive Web Application sur votre navigateur.
C’est décidé, vous souhaitez développer une PWA ?
Avant de vous lancer, prenez le temps de lire notre livre blanc ! Vous y trouverez des explications et exemples concrets qui vous aideront à faire les bons choix !
