Livre Blanc

Tout savoir sur les Progressive Web Applications

Introduction

Les Progressive Web Apps tirent profit des progrès faits par les navigateurs web pour proposer la même expérience, que ce soit sur mobile ou Desktop. Poussées par Google, elles sont destinées à être le web de demain.

De grandes marques internationales comme Twitter, Starbucks et Ali Express, ou françaises comme l’Équipe ont déjà démontré l’intérêt que pouvaient avoir les PWA pour accroître l’engagement de leurs utilisateurs et donc leur rentabilité.

Pour autant, les PWA ne sont pas forcément adaptées à tous les usages et doivent s’inscrire dans une stratégie globale pour créer l’expérience utilisateurs la plus réussie à travers tous les usages possibles. Depuis quelques années, la comptabilité des PWA s’est accélérée et promet de grandes perspectives pour le futur !

Ce livre blanc va revenir sur les différentes technologies qui ont fait du web ce qu’il est aujourd’hui. Puis suivra une présentation fonctionnelle et technique des Progressive Web Apps, leurs avantages mais aussi leurs défauts ; ainsi que les questions à se poser avant de se lancer dans l’aventure des PWA.

Soutenues et poussées par Google, nous n’avons aucun doute sur l’intérêt qu’elles peuvent représenter pour le futur du web face aux applications mobiles.

Qu'est-ce qu'une Progressive Web Application ?

Véritable alternative aux applications mobiles, les PWA représentent une nouvelle étape dans le développement de sites internet : elles permettent d’allier technologies web et nouveautés offertes par les appareils mobiles (Appareil Photo, GPS, Notifications…). Le tout, en diminuant de beaucoup les coûts de développement par rapport à une application mobile native (certains parlent de 90%). Apparues pour la première fois en 2015, les PWA commencent à se démocratiser sur les supports majeurs du marché d’aujourd’hui malgré quelques défauts qui restent à corriger. En 2020, elles pourraient représenter 50% des expériences en ligne !

Comme pour le HTML5 il y a plus de dix ans, les Progressive Web App sont une collection de nouvelles technologies et méthodologies qui permettent de transformer un site web classique en une application web. Cette application web sera installable et utilisable sur tous types d’écrans et de supports, et ce sans distinction : ordinateurs, mobiles (Android ou iOS), tablettes et tous les écrans à venir dans les prochaines années ! Une PWA est donc ainsi installable sur mobile via un site internet mais pas par les stores. La spécificité d’une PWA est aussi de permettre l’utilisation des fonctionnalités propres au mobile (mode hors-ligne, notification, …) même si la compatibilité varie selon les systèmes d’exploitation.

Une Progressive Web Application est constituée de trois éléments majeurs : un manifest.json, un service worker et un squelette d’application (Application Shell).

Manifest.json :

Le fichier manifest.json est un fichier qui va décrire les métadonnées du site mobile. On y retrouve :

• Le nom de l’application
• L’icône à utiliser lorsque la PWA est installée et toutes ses tailles souhaitées
• L’URL de démarrage
• L’orientation de l’écran
• Le mode d’affichage (plein écran ou fenêtre)
• La couleur du thème à utiliser pour l’application, notamment dans la barre d’état sur mobile

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, permettre un fonctionnement hors-ligne de la Progressive Web Application.

Le Service Worker s’installe et s’initialise lors de la première visite sur l’application. Une fois installé, il est possible d’activer, sur validation de l’utilisateur, des notifications et d’autres fonctionnalités additionnelles.

Application Shell :

L’Application Shell correspond au squelette de l’application web. L’objectif principal d’une Progressive Web Application étant de charger rapidement, il est important de faire apparaître de façon quasi instantanée, un premier aperçu de l’application (du moins, le temps qu’elle finisse de charger). C’est ce qu’on appelle le First Meaningful Paint.

Ce squelette peut donc être mis en cache, il pourra alors être complété par des données dynamiques lors du chargement de l’application.

Pour charger instantanément, le contenu est donc séparé de l’habillage de l’application, où l’on retrouvera par exemple le menu de navigation ou le logo du site.

Pourquoi choisir une PWA ?

Avec le développement de l’Internet très haut-débit et de la 4G – en attendant la 5G d’ici quelques années – l’utilisateur n’a jamais été aussi impatient. Une étude publiée par Google détaille ainsi le comportement des utilisateurs sur mobiles :

• 53% des visites sur un site Internet seront sans doute abandonnées si le chargement dure plus de 3 secondes
• Les sites qui chargent en moins de 5 secondes gagnent jusqu’à deux fois plus de revenus publicitaires que les sites plus lents et les utilisateurs y passent jusqu’à 70% de temps en plus
• Un site met en moyenne 19 secondes à charger complètement sur un réseau 3G

Sans surprise, le temps de chargement est le premier critère qui fait fuir les utilisateurs sur mobiles ! Le principal objectif des Progressive Web Applications est donc d’optimiser les temps de chargement pour conserver l’utilisateur un maximum de temps sur son site Internet tout en proposant une expérience cross-platform.

Et cela fonctionne :

• Pinterest, réseau social de partage de photographies, a remarqué un taux d’engagement en croissance de 60% sur son site Internet depuis son passage en Progressive Web Applications ;
• Le réseau social Twitter a diminué le taux de rebond de son site mobile de 20% et augmenté de 75% le nombre de tweets envoyés depuis la version mobile optimisée PWA de son site Internet

Une PWA permet aussi de fournir facilement et à moindre une expérience mobile enrichie à un site web déjà existant.