10 min
Bienvenue dans ce guide complet sur les Progressive Web Apps (PWA) ! Dans cet article, nous allons explorer en détail ce que sont les PWA, comment les créer, les avantages et inconvénients, et les meilleures pratiques pour les développer.
PWA : à mi-chemin entre les Apps Web et les Apps Mobiles
Une PWA (Progressive Web App) est une application web qui offre une expérience utilisateur similaire à celle des applications mobiles natives.
Elle combine le meilleur du web et des applications mobiles.
Cette approche est rendue possible grâce à des technologies web modernes comme le Manifest, les Service Workers et les APIs web.
Comprendre le fonctionnement d’une PWA
Pour transformer un site web en PWA, il faut respecter certaines normes et utiliser des technologies spécifiques.
📄 Le Manifest
Le manifest est un fichier JSON qui décrit les métadonnées de l’application, comme :
- Son nom
- Son icône
- Sa couleur de thème
- Son orientation (portrait/paysage)
- Son affichage (fullscreen, etc.)
- Etc.
Un PWA a la particularité de pouvoir être installée sur l’écran d’accueil d’un smartphone, tout comme une application native, et c’est ce fichier 📄 manifest.json qui décrit les informations et caractéristiques de l’application.
⚙️ Le Service Worker
Le Service Worker est un script qui s’exécute en arrière-plan du navigateur, indépendamment de la page web. Il agit comme un proxy entre le réseau et l’application, permettant de gérer les requêtes réseau, le cache, et d’autres fonctionnalités avancées.
👉 En bref, là où le manifest permet de configurer l’application, le Service Worker gère quant à lui son aspect fonctionnel.
Grâce au Service Worker et par l’intermédiaire d’APIs web, une PWA intègre des fonctionnalités proche des applications natives telles que les notifications push en arrière-plan avec Push API et le fonctionnement hors-ligne avec Cache API.
Fonctionnalités clés
Vous l’aurez compris, une PWA est une application web qui tend à se rapprocher des applications mobiles natives. Résumons les fonctionnalités clés d’une PWA :
- 🔖 Installation sur l’écran d’accueil : Permet à l’utilisateur d’ajouter l’application à son écran d’accueil, comme une application native.
- 💾 Cache intelligent des ressources : Stockage en cache des ressources (assets statiques, API, etc.)
- 🔔 Notifications push en arrière-plan : Envoi de notifications même lorsque l’application n’est pas ouverte.
- 📴 Mode hors ligne : Accès au contenu même sans connexion internet.
- 📱 Responsive : S’adapte à toutes les tailles d’écran (mobile, tablette, desktop).
- ↕️ Expérience full-screen : Permet une expérience immersive en plein écran, sans les éléments de l’interface du navigateur (barre d’adresse URL, barre d’outils, etc.).
- 🔄 Mise à jour automatique : Les mises à jour sont gérées en arrière-plan, sans intervention de l’utilisateur.
Tuto : Créer une PWA
Nous allons voir comment créer rapidement et efficacement une PWA simple à l’aide des langages HTML, CSS et JavaScript.
1. Structure de la PWA
Créer un dossier pour votre PWA : Par exemple, my-pwa, contenant les fichiers suivants :
📂 my-pwa
├── 📄 index.html
├── 📄 manifest.json
├── 📄 service-worker.js
├── 🖼️ icon.png
2. Page d’accueil de la PWA
Au sein de votre fichier 📄 index.html, vous allez définir la page d’accueil de votre PWA. C’est ici que vous allez spécifier le manifest, l’icône de votre application et importer votre Service Worker.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma PWA</title>
<link rel="manifest" href="manifest.json">
<link rel="icon" href="icon.png">
</head>
<body>
<h1>Ma PWA</h1>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(() => console.log('Service Worker enregistré'))
.catch(err => console.log('Erreur Service Worker:', err));
}
</script>
</body>
</html>
Le service worker n’est pas enregistré comme un script classique (<script src="..."></script>), mais via l’API navigator.serviceWorker.register(). Cela permet au navigateur de gérer le service worker en arrière-plan.
Ici, si le navigateur supporte les service workers, il enregistre le fichier 📄 service-worker.js et affiche un message dans la console pour confirmer l’enregistrement.
3. Définition du Manifest
Au sein de votre fichier 📄 manifest.json, vous allez définir les informations élémentaires de votre app comme son nom, son icône, sa couleur de thème, etc.
{
"name": "Ma PWA",
"short_name": "PWA",
"start_url": "/",
"display": "standalone",
"orientation": "portrait",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
name: Nom complet de l’application.short_name: Nom court de l’application, utilisé lorsque l’espace est limité.start_url: URL de démarrage de l’application.display: Mode d’affichage de l’application (standalone, fullscreen, minimal-ui, etc.).orientation: Orientation de l’application (portrait, landscape).background_color: Couleur de fond de l’application (utilisé par le splash screen lors du chargement de l’application).theme_color: Couleur du thème de l’application (utilisé pour la partie supérieure de l’écran).icons: Tableau d’icônes de l’application. Nous en renseignerons une seule pour cet exemple, mais vous pouvez en ajouter plusieurs avec différentes tailles et types. Le navigateur utilisera la meilleure icône disponible en fonction de l’appareil et de la résolution.
Une fois votre manifest créé, vous remarquerez que votre navigateur vous propose désormais d’installer votre application sur l’écran d’accueil de votre appareil.
Sur mobile avec Chrome, vous verrez accéderez à l’option d’installation via le menu ⋮ > Ajouter à l'écran d'accueil en haut à droite de l’écran.
4. Ajouter un Service Worker
Le service worker est un script qui s’exécute en arrière-plan et permet de gérer les fonctionnalités avancées de votre PWA, comme le cache, les notifications push, etc.
Pour ajouter un Service Worker à votre PWA, vous devez créer un fichier 📄 service-worker.js.
self.addEventListener('install', (event) => {
console.log('Service Worker installé');
});
self.addEventListener('activate', (event) => {
console.log('Service Worker activé');
});
self.addEventListener('fetch', (event) => {
console.log('Service Worker intercepte la requête', event.request.url);
});
Le code ci-dessus est un exemple de base d’un Service Worker. Il écoute les événements :
install: Cet événement est déclenché lorsque le Service Worker est installé pour la première fois. Autrement dit, lorsque l’utilisateur visite votre PWA pour la première fois ou que le Service Worker est mis à jour ( et donc réinstallé).activate: Cet événement est déclenché lorsque le Service Worker est activé.fetch: Cet événement est déclenché lorsque l’application effectue une requête réseau.
Exemple : Mode hors ligne avec mise en cache programmable côté client
Voici un exemple de mise en cache des ressources par le Service Worker.
Événement install : Vous pouvez y mettre en place des actions comme la mise en cache des ressources.
const CACHE_NAME = 'cache-v1';
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME).then(cache => {
return cache.addAll([
'/index.html',
'/icon.png',
"/manifest.json"
]);
})
);
});
On met ici dans un cache nommé cache-v1 les ressources essentielles de l’application, comme la page d’accueil, l’icône et le manifest.
Événement fetch : Vous pouvez y mettre en place des actions comme la récupération des ressources en cache au lieu de les récupérer sur le réseau.
// ... (code précédent)
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});
Ici, on intercepte les requêtes réseau et on vérifie si la ressource demandée est déjà en cache.
- Si oui, on la renvoie depuis le cache
- Sinon, on la récupère sur le réseau
Pour visualiser le fonctionnement du Service Worker, vous pouvez ouvrir les outils de développement de votre navigateur (F12) et aller dans l’onglet Application. Vous pourrez voir le cache que vous venez de créer dans la section Storage > Cache Storage et les requêtes interceptées par le Service Worker.
Si vous souhaitez tester le mode hors ligne, vous pouvez activer le mode hors ligne dans les outils de développement (F12) en cochant l’option Offline dans l’onglet Network. Cela simule une absence de connexion réseau et vous constaterez que votre PWA continue de fonctionner en affichant les ressources mises en cache. ✨
5. Testez votre PWA
Une fois installée, votre PWA doit apparaître dans la liste des applications installées de votre appareil et une icône d’application doit être visible sur l’écran d’accueil de votre smartphone ou de votre bureau sur PC.
Au lancement de votre PWA, vous devriez voir l’icône et le nom Ma PWA s’afficher dans un splash screen, avant de charger la page d’accueil définie dans votre fichier 📄 index.html.
PWA : Avantages & limites
Pourquoi créer une PWA plutôt qu’une application native ou un site web classique ? Voyons les avantages et les limites des PWA.
🚀 Avantages des PWA
- Expérience utilisateur proche des applications natives : exploitation des fonctionnalités des périphériques du téléphone, notifications push, etc.
- Pas besoin d’app store : les PWA sont accessibles directement via un navigateur web, sans passer par les stores d’applications (App Store, Google Play).
- Cross-platform : une seule base de code pour toutes les plateformes (iOS, Android, desktop).
- Moins de coûts de dev : pas besoin de développer et maintenir des applications natives pour chaque plateforme. Les mises à jour sont instantanées et ne nécessitent pas de validation par les stores, à la manière des sites web.
- SEO-friendly : les PWA sont indexables par les moteurs de recherche, ce qui permet d’améliorer la visibilité et le référencement naturel.
⚠️ Limites & inconvénients
- Compatibilité navigateurs : certaines fonctionnalités ne sont pas disponibles sur tous les navigateurs (notamment Safari).
- Moins de visibilité sur les stores : bien que pouvant exploiter le SEO, les PWA ne sont pas listées dans les stores d’applications, ce qui peut limiter leur découvrabilité.
- Moins de fonctionnalités natives : les PWA ne peuvent pas accéder à toutes les fonctionnalités matérielles des appareils (NFC, Bluetooth, accès complet au système de fichiers, etc.) et certaines APIs sont limitées ou non supportées.
- Performances : les PWA reposant sur des langages web peuvent être moins performantes que les applications natives pour des tâches intensives (jeux 3D, traitement vidéo, etc.).
Résumé : quand utiliser une PWA ?
✅ Quand utiliser une PWA
- Vous voulez une app mobile légère sans passer par les stores
- Votre audience a des connexions lentes ou instables
- Vous visez plusieurs plateformes avec une seule base de code
- Votre app est axée sur le contenu et des interactions simples (blog, e-commerce, dashboard, forum…)
- Vous voulez bénéficier du référencement (SEO)
❌ Quand éviter une PWA
- Vous avez besoin de fonctionnalités natives avancées : NFC, Bluetooth, capteurs spécifiques, accès aux contacts, SMS, appels, fichiers système
- Vous comptez sur la visibilité via les stores (App Store, Play Store)
- Votre public est principalement sur iOS et vous avez besoin de notifications push fiables
- Vous développez un jeu 3D ou une app lourde (montage vidéo, réalité augmentée, etc.)
Quel avenir pour les PWA ?
Les PWA ont connu une adoption croissante ces dernières années car elles sont de plus en plus reconnues comme une alternative viable aux applications natives.
De grandes entreprises comme X, Pinterest, Starbucks et Uber ont déjà adopté les PWA pour améliorer l’expérience utilisateur sur mobile.
Cependant, des obstacles à leur développement subsistent, notamment en ce qui concerne la compatibilité variable avec les navigateurs et les limitations des fonctionnalités natives, notamment sur iOS où Safari ne supporte pas certaines fonctionnalités avancées des PWA, comme les notifications push.
Il est important que les navigateurs travaillent ensemble pour améliorer la compatibilité des PWA.
Il est également essentiel que les développeurs testent leurs PWA sur différents navigateurs et plateformes pour s’assurer d’une expérience utilisateur cohérente.
Les PWA offrent une expérience utilisateur proche des applications natives tout en bénéficiant des avantages des sites web. Bien que certaines limitations et incompatibilités subsistent, les PWA sont une technologie prometteuse qui est susceptible de devenir de plus en plus populaire dans les années à venir.