📲
web

PWA

Application web progressive qui offre une expérience similaire à une app native.

Définition

Une PWA (Progressive Web App) est une application web qui utilise des technologies modernes pour offrir une expérience similaire à une application native : installation sur l'écran d'accueil, fonctionnement hors connexion, notifications push, et performances rapides.

Les PWA combinent le meilleur du web (URL partageable, pas de store) et des apps natives (installation, offline, notifications).

Les 3 piliers techniques

1. Service Worker

Script JavaScript qui s'execute en arriere-plan, indépendamment de la page web. Il intercepte les requêtes réseau et gere le cache.

// sw.js
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll(['/index.html', '/style.css', '/app.js']);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cached) => {
      return cached || fetch(event.request);
    })
  );
});

2. Web App Manifest

Fichier JSON qui décrit l'application : nom, icône, couleur, mode d'affichage.

{
  "name": "Mon Application",
  "short_name": "MonApp",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4A90E2",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

3. HTTPS obligatoire

Les Service Workers ne fonctionnent que sur des connexions sécurisées (HTTPS).

Capacités d'une PWA

  • Installation sur l'écran d'accueil (sans app store)
  • Fonctionnement hors connexion (cache des ressources)
  • Notifications push
  • Synchronisation en arriere-plan (Background Sync)
  • Accès à la camera, au GPS, aux capteurs
  • Raccourcis d'application (shortcuts)
  • Badge de notification sur l'icône

PWA vs App Native vs App Hybride

PWA Native Hybride
Installation Navigateur Store Store
Offline Oui (Service Worker) Oui Oui
Performance Bonne Excellente Moyenne
Coût dev Faible (1 codebase) Eleve (iOS + Android) Moyen
Mise à jour Instantanée Store review Store review
Accès hardware Limite Complet Moyen

Exemples de PWA connues

  • Twitter Lite : 65% d'augmentation de pages vues, 75% de tweets en plus
  • Pinterest : +60% d'engagement, +44% de revenus publicitaires
  • Starbucks : PWA 99.84% plus petite que l'app iOS

Besoin d'aide technique ?

Decrivez votre projet pour des conseils personnalises par nos experts.

Recevoir des conseils

Questions fréquentes

Les PWA fonctionnent-elles sur iOS ?
Oui, depuis iOS 11.3 (2018). Safari supporte les Service Workers et l'installation sur l'ecran d'accueil. Certaines fonctionnalites restent limitees (pas de push notifications sur iOS jusqu'a iOS 16.4).
Une PWA peut-elle remplacer une app native ?
Pour la majorite des cas d'usage (contenu, e-commerce, outils de productivite), oui. Pour les jeux complexes, l'acces hardware avance (Bluetooth, NFC), ou les experiences tres specifiques a l'OS, une app native reste preferable.
Comment rendre un site existant 'PWA' ?
Ajoutez un Web App Manifest, enregistrez un Service Worker pour le cache offline, et assurez-vous que le site est en HTTPS. C'est faisable en quelques heures pour un site existant.

Pages liées

Chaque semaine, le meilleur de la tech française

Tendances, salaires, outils et opportunités — directement dans votre boîte mail.

Gratuit. Desabonnement en un clic. Pas de spam.