Une Progressive Web App (PWA) est une application web qui utilise les technologies modernes pour offrir une expérience proche des applications natives : installation sur l'écran d'accueil, fonctionnement offline, notifications push. Sans passer par les stores.
Pourquoi choisir une PWA ?
Une pwa élimine les frictions de distribution (pas d'App Store ni Google Play), fonctionne sur tous les appareils avec un seul code, se met à jour automatiquement et bénéficie des mêmes capacités SEO qu'un site web.
Pour les PME et freelances, une pwa bien faite remplace souvent avantageusement une application native coûteuse. Des marques comme Starbucks, Twitter Lite et Pinterest utilisent des PWA avec d'excellents résultats.
Les trois piliers d'une PWA
1. HTTPS : obligatoire pour les fonctionnalités PWA (Service Workers notamment).
2. Web App Manifest : fichier JSON décrivant l'application pour l'installation :
{
"name": "Mon Application",
"short_name": "MonApp",
"description": "Description de mon application",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2E5693",
"icons": [
{ "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
3. Service Worker : script JavaScript s'exécutant en arrière-plan.
Service Worker : cache et offline
// sw.js
const CACHE_NAME = 'v1';
const ASSETS = ['/', '/css/style.css', '/js/app.js', '/offline.html'];
self.addEventListener('install', e => {
e.waitUntil(
caches.open(CACHE_NAME).then(cache => cache.addAll(ASSETS))
);
});
self.addEventListener('fetch', e => {
e.respondWith(
caches.match(e.request).then(cached => {
return cached || fetch(e.request).catch(() =>
caches.match('/offline.html')
);
})
);
});
Ce Service Worker met en cache les ressources critiques et sert une page offline si le réseau est indisponible.
Notifications Push
Les notifications push permettent de réengager les utilisateurs :
// Demander la permission
const permission = await Notification.requestPermission();
if (permission === 'granted') {
const registration = await navigator.serviceWorker.ready;
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(vapidPublicKey)
});
// Envoyer subscription au serveur...
}
Côté serveur PHP, la librairie web-push-php envoie les notifications via les serveurs push des navigateurs.
Critères d'installabilité
Chrome affiche automatiquement la proposition d'installation quand : HTTPS actif, manifest valide avec icônes, Service Worker enregistré, et l'utilisateur a interagi avec le site. Testez avec le panneau Application de Chrome DevTools.
Outils et frameworks
Vite avec le plugin vite-plugin-pwa génère automatiquement le manifest et le Service Worker avec Workbox. Next.js avec next-pwa fait de même. Pour les projets simples, la documentation Workbox offre des stratégies de cache preconfigurées.
Conclusion
Les PWA offrent un excellent compromis : expérience proche du natif sans les contraintes des stores et du développement multi-plateforme. Pour tout projet web destiné à un usage mobile intensif, l'ajout des fonctionnalités pwa est un investissement rentable qui améliore directement l'engagement et la rétention des utilisateurs.
Les Progressive Web Apps combinent le meilleur du web et des apps natives. En 2025, les PWA bénéficient du Push Notification API universel, des Badging API et File System Access API sur desktop. Le Service Worker reste le cœur technique : maîtrisez les stratégies de cache Workbox (Cache First, Network First, Stale While Revalidate) selon le type de ressource. L'installation sur l'écran d'accueil se déclenche programmatiquement avec beforeinstallprompt. Mesurez l'engagement avec des métriques spécifiques : taux d'installation et sessions hors ligne. Workbox simplifie considérablement la gestion des Service Workers et est la bibliothèque de référence pour des PWA robustes et performantes.
PWA et Core Web Vitals
Une PWA bien optimisée peut atteindre les meilleures notes Lighthouse. Pré-chargez les ressources critiques avec , utilisez le App Shell pattern pour un affichage quasi-instantané, et exploitez le cache Service Worker pour un LCP optimal même en conditions réseau dégradées. Les utilisateurs d'une PWA installée bénéficient d'une expérience aussi fluide qu'une app native.
Notifications push PWA
Implémentez les notifications push en trois étapes : demander la permission avec l'API Notification.requestPermission(), s'abonner au Push Service via pushManager.subscribe() avec votre clé VAPID publique, et envoyer les notifications depuis votre serveur avec la bibliothèque web-push. Les notifications PWA s'affichent même quand le navigateur est fermé, offrant un canal d'engagement aussi puissant que les apps natives. Respectez les bonnes pratiques : demandez la permission après une interaction utilisateur, pas au chargement.
