INTERMÉDIAIRE PWA MOBILE

PWA (Progressive Web App)

Définition simple, avantages et explications pour comprendre ces applications web qui révolutionnent l'expérience mobile.

Temps de lecture : 5 minutes
SOMMAIRE
Définition simple Les 3 piliers PWA vs Application native Comment ça marche Avantages Exemples célèbres Limites Questions fréquentes

Qu'est-ce qu'une PWA ?

PWA signifie Progressive Web App. C'est un site web qui se comporte comme une application mobile native.

En termes simples : une PWA est un site web que vous pouvez "installer" sur votre téléphone, qui fonctionne hors-ligne, et qui offre une expérience utilisateur proche d'une véritable application. Mais contrairement à une app traditionnelle, vous n'avez pas besoin de passer par l'App Store ou Google Play.

Ma PWA

Installée sur l'écran d'accueil

Installable Hors-ligne

Rapide comme une app native

Les 3 piliers d'une PWA

Installable

Les visiteurs peuvent ajouter votre site à l'écran d'accueil de leur téléphone comme une application classique, sans passer par un store.

Hors-ligne

Grâce aux Service Workers, le site peut fonctionner même sans connexion internet, ou en afficher une version allégée.

Rapide

Les PWA sont conçues pour être extrêmement rapides, avec un chargement instantané même en réseau lent.

Le saviez-vous ? Le "P" de Progressive signifie que l'expérience s'améliore progressivement selon les capacités du navigateur. Sur un navigateur récent, vous aurez toutes les fonctionnalités ; sur un ancien, le site reste accessible.

PWA vs Application native

Critère PWA Application native
Installation Directe depuis le navigateur Via App Store / Google Play
Découverte Par les moteurs de recherche (SEO) Par recherche dans les stores
Mise à jour Instantanée (à chaque visite) Validation par le store + téléchargement
Coût de développement Un seul code (web) iOS + Android (deux codes)
Accès aux fonctionnalités La plupart (appareil photo, notifications) Toutes (Bluetooth, NFC, etc.)
Stockage Limite variable selon navigateur Espace dédié important

Comment ça marche techniquement ?

1

HTTPS obligatoire

Pour des raisons de sécurité, une PWA doit obligatoirement être servie en HTTPS.

2

Service Worker

C'est le cœur technique de la PWA. Un script qui tourne en arrière-plan, indépendant de la page, et qui gère le cache, les requêtes réseau et les notifications.

3

Manifest.json

Un fichier qui définit l'apparence de l'application (nom, icône, thème, orientation) quand elle est installée sur l'écran d'accueil.

// Extrait de manifest.json
{
  "name": "Ma PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#2563eb"
}
4

Cache et mode hors-ligne

Le Service Worker met en cache les ressources essentielles (HTML, CSS, images) pour que le site fonctionne même sans connexion.

Les avantages des PWA

Pour les utilisateurs
  • Pas d'installation lourde (quelques Mo max)
  • Pas besoin de mettre à jour manuellement
  • Utilisation sans connexion
  • Icône sur l'écran d'accueil
  • Notifications push
  • Expérience fluide et rapide
Pour les entreprises
  • Un seul développement (web)
  • Pas de commission sur les stores (30%)
  • Meilleur référencement (c'est un site web)
  • Taux de conversion amélioré
  • Mises à jour instantanées
  • Accessible à tous, sans store

Exemples de PWA célèbres

AliExpress

Leur PWA a augmenté de 104% le taux de conversion sur les nouveaux utilisateurs. L'application est 4x plus rapide que leur app native.

Twitter (Twitter Lite)

Consommation de données réduite de 70%, chargement 30% plus rapide, engagement augmenté de 65%.

Forbes

Temps de chargement de 3 à 0,8 secondes, sessions 43% plus longues, 100% d'augmentation des impressions.

Spotify

Leur PWA permet d'écouter de la musique sur navigateur avec une expérience quasi-native, disponible sur tous les appareils.

Uber

La PWA de Uber (m.uber.com) se charge en 3 secondes même en réseau 2G, accessible sans installation.

Pinterest

Augmentation de 60% du temps passé sur le site, 40% d'engagement en plus.

Les limites des PWA

  • Support iOS limité : Safari sur iPhone supporte les PWA mais avec des restrictions (pas de notifications push, stockage limité).
  • Visibilité dans les stores : Bien que Google Play les accepte, l'App Store reste réticent.
  • Fonctionnalités matérielles : Pas d'accès à toutes les API natives (Bluetooth, NFC, etc.).
  • Découverte : Les utilisateurs n'ont pas le réflexe d'"installer" un site web.
  • Batterie : Les Service Workers peuvent consommer plus d'énergie s'ils sont mal optimisés.
À savoir : Depuis iOS 14, Apple a amélioré le support des PWA, mais elles restent moins performantes que sur Android. La situation s'améliore avec chaque mise à jour.

Démonstration

Site démo

Ceci est une simulation de PWA

Sur un vrai site compatible PWA, ce bouton déclencherait l'installation.

Critères PWA remplis

  • HTTPS
  • Manifest.json
  • Service Worker
  • Responsive
  • Rapide

Score Lighthouse

95/100

Performance PWA

Questions fréquentes

Faut-il remplacer mon application native par une PWA ?
Pas forcément. Les PWA sont excellentes pour toucher un large public rapidement, mais les apps natives restent indispensables si vous avez besoin de fonctionnalités avancées (jeux, accès matériel poussé). Beaucoup d'entreprises adoptent une stratégie hybride.
Est-ce que je peux mettre ma PWA sur l'App Store ?
Oui, c'est possible depuis 2018, mais Apple reste restrictif. Votre PWA doit offrir une expérience réellement "applicative" et ne pas être un simple site web. La plupart des développeurs privilégient l'installation directe depuis le navigateur.
Quel est le coût de développement d'une PWA ?
C'est généralement moins cher qu'une app native car vous n'avez qu'un seul code à maintenir. Comptez 30 à 50% de moins qu'une app native, mais plus qu'un site web classique à cause des fonctionnalités supplémentaires (Service Workers, manifest).
Les PWA fonctionnent-elles sur ordinateur ?
Oui, et c'est même un avantage. Une PWA peut être installée sur Windows (via Edge ou Chrome), macOS, ou Linux. Twitter, Spotify ou Pinterest proposent des PWA utilisables sur desktop avec une fenêtre d'application dédiée.
Comment savoir si un site est une PWA ?
Si vous êtes sur mobile et qu'une bannière "Ajouter à l'écran d'accueil" apparaît, c'est probablement une PWA. Sur desktop, vous pouvez voir une icône d'installation dans la barre d'adresse. L'outil Lighthouse de Chrome permet de diagnostiquer les PWA.
Quelle est la différence entre PWA et application hybride ?
Une PWA est un site web amélioré, accessible directement par URL. Une application hybride (comme avec Cordova ou Ionic) est une app native qui embarque une vue web, mais doit être installée depuis un store. Les deux utilisent des technologies web, mais la distribution diffère.
Dois-je abandonner mon site responsive pour une PWA ?
Non, une PWA est un site responsive amélioré. Vous pouvez transformer progressivement votre site existant en PWA en ajoutant un Service Worker et un manifest. C'est une évolution, pas une révolution.