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