PWA (Progressive Web App) — référence d'implémentation
Cette page recense de façon structurée les composants d'une PWA et leurs rôles. Elle décrit quoi fournir et quelles règles appliquer, sans imposer d'ordre de mise en œuvre.
Artefacts
| Artefact | Emplacement type | RĂ´le |
|---|---|---|
| Manifeste d'application | public/manifest.webmanifest |
Métadonnées lisibles par le navigateur (nom, icônes, couleurs, écran d'installation). |
| Service worker | public/sw.js |
Script de gestion du cache local et de l'accès hors ligne. |
| Page hors ligne | public/offline.html |
Page de secours affichée quand aucune ressource n'est disponible. |
| Jeu d'icĂ´nes | public/icons/ |
IcĂ´nes aux formats requis pour mobile et bureau. |
| Intégration | Gabarit principal (template de base) | Déclaration du manifeste et enregistrement du service worker. |
Les chemins ci-dessus sont indicatifs et suivent une convention publique courante ; adaptez-les Ă l'arborescence de votre projet.
Manifeste d'application
Fichier de description exposé au navigateur. Champs structurants :
| Champ | Objet |
|---|---|
name / short_name |
Nom complet et nom court affichés à l'installation. |
icons |
Liste des icĂ´nes avec tailles et types. |
start_url |
Point d'entrée au lancement. |
display |
Mode d'affichage (standalone, browser, etc.). |
theme_color / background_color |
Couleurs de la barre système et de l'écran de démarrage. |
Service worker
Script exécuté en arrière-plan par le navigateur. Responsabilités :
- Interception des requêtes réseau et application des stratégies de cache.
- Pré-chargement d'un ensemble de pages clés à l'installation.
- ContrĂ´le du cycle de vie du cache (versionnement, nettoyage).
Cycle de vie
| Phase | RĂ´le |
|---|---|
install |
Mise en cache initiale des ressources clés. |
activate |
Suppression des caches obsolètes de versions antérieures. |
fetch |
Application de la stratégie de cache par type de requête. |
Pages clés hors ligne
Ensemble minimal de pages rendues disponibles sans réseau. Sélection type :
- Page d'accueil.
- Guides ou contenus prioritaires les plus consultés.
- Glossaire ou index de référence.
Le principe directeur : commencer petit, puis Ă©tendre.
Stratégies de cache
| Type de contenu | Stratégie | Raison |
|---|---|---|
| Pages de documentation | Cache d'abord, revalidation en arrière-plan | Accès rapide et disponibilité hors ligne. |
| Recherche et pages dynamiques | Réseau d'abord | Fraîcheur des résultats. |
| Fichiers statiques versionnés | Mise en cache systématique | Immuables tant que la version ne change pas. |
Mise à jour contrôlée
- Le service worker nettoie les anciens caches lors de l'activation d'une nouvelle version.
- L'utilisateur est informé lorsqu'une mise à jour est disponible ou appliquée.
- Le versionnement du cache évite le service de contenu obsolète.
Critères de validation
| Scénario | Attendu |
|---|---|
| Première visite en ligne | Enregistrement du service worker, mise en cache des pages clés. |
| Bascule hors ligne (mode avion) | Pages clés accessibles ; page de secours sinon. |
| Nouvelle version publiée | Ancien cache purgé, contenu à jour, message utilisateur. |
| Audit PWA | Manifeste valide, service worker actif, aucune régression d'accessibilité ni de référencement. |
Contraintes et limites
- Contenu potentiellement obsolète si le cache n'est pas rafraîchi.
- Stockage local limité, notamment sur mobile.
- L'utilisateur doit percevoir clairement son Ă©tat hors ligne (transparence).
Principes transverses
- Simplicité : périmètre minimal au départ, extension progressive.
- Transparence : l'Ă©tat hors ligne est visible.
- Qualité : aucune régression de référencement ni d'accessibilité.