Tout savoir sur la Progressive Web App (PWA)

Depuis quelques années, que ce soit sur votre mobile ou votre ordinateur, vous avez dû recevoir des notifications de votre navigateur, vous proposant d’ajouter [Nom du site] sur l’écran d’accueil ou d’activer les notifications.

Sans le savoir, vous êtes certainement tombé sur une Progressive Web App.

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

Le terme « Progressive Web App » a été inventé en 2015 par Frances Berriman (designer) et Alex Russell (ingénieur Google). Ce dernier a publié sur son blog l’article Progressive Web Apps : Escaping Tabs Without Losing Our Soul qui pose les bases des Progressive Web Apps (PWA).

Une PWA repose sur les technologies web HTML5, CSS, JavaScript et tend à ressembler à une application native.

On confronte souvent les applications PWA avec les applications mobiles natives, mais il faut savoir que les PWA s’exécutent dans un navigateur web. De ce fait, elles sont multiplateformes : au-delà des tablettes et smartphones, elles couvrent aussi les ordinateurs, les télévisions, les réfrigérateurs, etc.

De plus, elles ne nécessitent pas de téléchargement à partir du store Apple ou Android : un partage de lien suffit.

Progressive Web Apps VS applications web et applications mobiles

Finalement, une application PWA se situe entre une application web et une application native mobile.

Il s’agit d’une application web responsive pouvant être référencée dans les moteurs de recherche et accessible directement, sans installation à partir d’un store.

Les caractéristiques d’une PWA

Quel que soit le support (mobile, ordinateur, tablette…), une application web est identifiée comme PWA dès lors qu’elle répond à un ensemble de caractéristiques, dont les principales sont les suivantes :

• Progressive : fonctionne pour tous les utilisateurs, quel que soit le navigateur et le support ;
• Responsive : s’affiche correctement et s’ajuste automatiquement à la taille de l’écran du terminal utilisé ;
• Avoir une expérience proche d’une application native (mobile ou desktop) : une seule et même application développée ;
• Sécurisée : la connexion doit se faire en HTTPS ;
• Facilement installable sur le device : raccourci sur le bureau pour un PC et sur l’écran d’accueil sur un smartphone ;
• Fonctionne quelle que soit la connectivité : bas débit ou perte de connexion (offline) ;
• Performante : l’application doit être rapide à démarrer et fluide ;
• On peut partager un lien vers l’application.

Pour aller plus loin sur les caractéristiques de PWA, découvrez les avantages et les inconvénients de ce framework présentés dans l’article d’un de mes collègues.

PWA : Les 3 caractéristiques techniques

D’un point de vue technique, une application web est identifiée comme PWA si les 3 critères suivants sont respectés :

1. 🔒 Une connexion à l’application en HTTPS, c’est même un prérequis ;
2. 📄 Un web manifest contenant des informations sur l’application (nom, icône, mode d’affichage…) ;
3. ⚙ Un service worker, qui est l’élément clé des PWA. Il permet notamment de gérer le mode offline et la mauvaise connexion du device en utilisant le cache du navigateur, la synchronisation des données et la réception des notifications push.

Pour quels navigateurs ?

Pour le service worker, nous vous invitons à consulter la documentation MDN. Notons que les services workers sont supportés sur tous les navigateurs sauf Internet Explorer, remplacé par Microsoft Edge aujourd’hui.

A partir de la version 79 de Microsoft Edge, le navigateur est basé sur Chromium, ce qui lui permet de rattraper son retard notamment sur la partie HTML 5 et PWA. Samsung Internet et Opéra sont aussi basés sur Chromium, ce qui explique que les APIs sont également assez proches.

Enfin, à partir du device et du navigateur de votre choix, vous pouvez utiliser les outils comme What pwa can do today  et What web can do today qui vous indiqueront les fonctionnalités supportées pour enrichir vos applications PWA.

What web can do today sur Chrome avec un téléphone Android :

Au moment de la rédaction de cet article, PWA reste limité sur iOS. Il est possible de faire des PWA (ou « HTML5 Apps » 🙂) mais il faudra vérifier les fonctionnalités supportées avant de se lancer dans le développement. Par exemple, certaines fonctionnalités ne sont pas supportées : ajout de l’application sur l’écran d’accueil (qui doit se faire manuellement), absence de notifications push, cache limité (50 Mo)…

Application PWA : comment l’installer sur mon device ?

En règle générale, si votre navigateur détecte que le site que vous visitez peut être installé comme une application PWA, une indication s’affiche à l’écran.

Sur PC

Au niveau de la barre d’adresse, un « + » apparait. En cliquant dessus, vous pourrez ensuite installer l’application.

Sur Chrome

Sur Microsoft Edge (>= 79)

Sur Mobile

Par défaut, une notification apparait tout en bas de l’écran du téléphone. Le texte qui s’affiche sera de la forme « Ajouter [nom de l’application] à l’écran d’accueil ».

Exemple sous Android :

Exemples d’applications PWA

Avant que le site Twitter et le site mobile Twitter ne soient réunis en un seul et même site, Twitter Lite a été développé en PWA pour mobile. Cela a permis de répondre aux problématiques suivantes :

• Le chargement plus rapide de l’application ;
• La réduction de la consommation des données ;
• L’augmentation de l’engagement des utilisateurs grâce aux notifications.

Pour les deux premiers points, l’utilisation du service worker et du cache, ainsi que l’optimisation des ressources, ont été essentielles. Le site de Twitter en PWA a permis aux utilisateurs d’accéder à Twitter sans télécharger l’application mobile et de garder un raccourci de l’application sur l’écran .

Si vous voulez en savoir plus, le billet de blog Google détaille ce cas d’usage.

Il existe aussi d’autres exemples de PWA :

• Le modèle offline intégré sur le site de Starbucks,
• Uber,
• Le mode offline intégré du jeu 2048.

Quand développer une PWA ?

Choisir PWA pour développer son application est pertinent, notamment sur ces différents cas de figure :

• L’ajout de fonctionnalités supplémentaires à une application web existante (ex : ajout du mode offline sur une application Angular ou React) ;
• Le développement « rapide » d’une application mobile spécifique. Par exemple, le formulaire en ligne de l’attestation de déplacement dérogatoire, qui est une PWA ;
• Le développement d’une application mobile / multi-plateforme par une équipe de développeurs front-end (à condition que le besoin couvre les fonctionnalités demandées sur les devices cibles) ;
• Le développement d’une application mobile en s’affranchissant :
  • Des contraintes du store public : on peut citer Stadia, Epic Games et Amazon Luna (cloud gaming) par exemple.
  • Du statut du store d’entreprise : Mobile Device Management (MDM) en cours de déploiement dans une grande entreprise par exemple.
• Le développement d’une version « light » d’une application mobile existante.

Les Progressive Web Apps n’ont pas pour vocation de remplacer les applications natives, même si elles peuvent se retrouver dans les stores.

D’un point de vue personnel, en tant qu’utilisateur, les applications PWA m’ont permis de remplacer quelques applications natives sur mon téléphone, parce que les sites étaient « PWA ready » et se suffisaient largement.

Maintenant que vous savez tout sur la Progressive Web App, nous vous donnons rendez-vous dans le prochain article pour apprendre comment développer une PWA.