PWA : Manifest et Service Worker
Creer une Progressive Web App installable et fonctionnelle hors ligne.
Une Progressive Web App offre une experience similaire a une application native : installation, fonctionnement hors ligne, notifications push.
manifest.json : Definit l'identite de l'app (nom, icones, couleurs, mode d'affichage).
Service Worker : Script qui s'execute en arriere-plan, intercepte les requetes reseau, et gere le cache.
Workbox : Bibliotheque Google qui simplifie la creation de Service Workers avec des strategies de cache pre-definies.
Exemples de code
manifest.json - Identite de la PWA
json
{
"name": "Mon Application PWA",
"short_name": "MonApp",
"description": "Application web progressive",
"start_url": "/",
"display": "standalone",
"background_color": "#0d1117",
"theme_color": "#22d3a7",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}sw.js - Service Worker basique
javascript
// A l'installation, on met en cache les fichiers essentiels
self.addEventListener("install", (event) => {
event.waitUntil(
caches.open("v1").then((cache) =>
cache.addAll(["/", "/offline.html", "/styles.css"])
)
);
});
// A chaque requete, on cherche d'abord dans le cache
// puis on fait un appel reseau si pas trouve
self.addEventListener("fetch", (event) => {
event.respondWith(
caches.match(event.request).then(
(response) => response || fetch(event.request)
)
);
});A retenir
- 1manifest.json definit l'identite de la PWA
- 2Le Service Worker intercepte les requetes reseau
- 3Workbox simplifie la gestion du cache
- 4Les PWA sont installables et fonctionnent hors ligne
Exercice pratique
Completer un manifest.json PWA
Completez le fichier
manifest.json pour une application de suivi fitness. L'application doit :1S'appeler "FitTracker" (name) avec l'abbreviation "Fit" (short_name)
2Avoir une description pertinente
3S'afficher en mode
standalone (comme une app native)4Avoir un theme sombre : background_color "#1a1a2e" et theme_color "#00d4aa"
5Definir au moins une icone (192x192)
6Avoir le start_url a "/"
json