Applications Web Progressives (PWA) : Définition, fonctionnement et installation facile

Les applications mobiles dominent nos smartphones, mais elles ont longtemps été absentes des bureaux et navigateurs. Ces dernières années, les Progressive Web Apps (PWA) ont émergé, transformant notre interaction avec les sites web de toutes sortes.

Qu'est-ce qu'une PWA exactement ? Quelles fonctionnalités offre-t-elle par rapport à un site web classique ? Voici un guide complet et fiable sur les applications web progressives.

Qu'est-ce qu'une application Web progressive ?

Les Progressive Web Apps combinent le meilleur d'un site web standard et d'une application mobile native. Elles offrent une expérience utilisateur fluide, en exploitant les avancées des navigateurs modernes et des applications natives.

Voici les critères essentiels d'une PWA :

• Universelle : Fonctionne de manière transparente sur tous les navigateurs compatibles.
• Réactive : S'adapte à tous les appareils (smartphone, tablette, ordinateur).
• Conçue pour l'expérience mobile : Interface intuitive imitant les apps natives, avec navigation simplifiée.
• Sécurisée : Utilise exclusivement HTTPS pour protéger les données.
• Découvrable : Facilement identifiable et accessible via les moteurs de recherche.
• Engageante : Supporte les notifications push et autres fonctionnalités natives.
• Mise à jour automatique : Toujours à jour sans intervention manuelle.
• Installable : S'installe directement sur l'écran d'accueil sans store d'applications.
• Partageable : Se partage via une simple URL.

En résumé, les PWA offrent une expérience web riche avec la simplicité et l'efficacité des applications natives.

Comment fonctionne une application Web progressive ?

Le cœur des PWA repose sur les Service Workers, des scripts exécutés en arrière-plan par le navigateur, indépendamment des pages web ou des interactions utilisateur.

Les Service Workers gèrent les notifications push, la synchronisation en arrière-plan et surtout le cache pour des performances quasi instantanées, même hors ligne.

Avant eux, l'Application Cache (AppCache) offrait un fonctionnement hors ligne limité et sujet à erreurs, sans contrôle fin pour les développeurs (comme détaillé par A List Apart).

Les Service Workers, eux, sont activés à la demande : lors d'une interaction, ils décident si un cache hors ligne suffit, avec plusieurs niveaux de cache pour une robustesse accrue. Ils assurent aussi une expérience fluide sur connexions instables en servant une version cachée fonctionnelle.

Compatibilité navigateur des PWA

Pour utiliser une PWA, un navigateur compatible et un site PWA-ready sont nécessaires.

Vérifiez la compatibilité via Is Service Worker Ready ? de Jake Archibald, ou Can I Use pour un détail par version.

Les principaux navigateurs supportent pleinement les PWA :

• Desktop (support complet) : Chrome, Firefox, Opera, Edge, Safari.
• Desktop (support partiel) : QQ Browser, Baidu Browser.
• Mobile (support complet) : Chrome, Firefox, Safari, UC Browser, Samsung Internet, Mint Browser, WeChat.
• Mobile (support partiel) : QQ Browser, Android Browser, Opera Mobile.

Edge et Safari sont les derniers à avoir rejoint le support complet.

Comment trouver et installer une PWA

Sur un Samsung Galaxy S8 avec Chrome, par exemple, visitez un site PWA : une invite "Ajouter à l'écran d'accueil" apparaît souvent automatiquement.

Exemple avec Twitter mobile :

Pour découvrir plus : Outweb ou PWA.rocks.

Depuis Chrome 72 (2019), les Trusted Web Activities (TWA) permettent aux PWA d'apparaître sur Google Play, comme Twitter Lite, Instagram Lite ou Maps Go.

Les PWA remplaceront-elles les apps natives ?

Les PWA sont un hybride performant, mais ne remplaceront pas totalement les apps natives pour l'instant, car elles répliquent souvent des sites existants.

Cependant, leurs bénéfices sont prouvés (source : PWA Stats) :

• Trivago : +150 % d'engagement.
• Forbes : Chargement en 0,8 s, +10 % impressions, sessions doublées.
• Twitter Lite : +65 % pages/session, +75 % tweets, interactif en 3G sous 5 s.
• Alibaba : +76 % conversions mobile.

Économisant espace et données, les PWA gagnent du terrain et transformeront le web mobile.