PWA : créer une Progressive Web App en 2025
Guide complet pour créer une PWA : service workers, manifest, cache offline et notifications push avec Next.js.
Les Progressive Web Apps representent une evolution majeure du web moderne, combinant la fiabilite d'une application native avec la portee universelle d'un site web. Grace aux service workers, au web manifest et aux strategies de cache avancees, une PWA offre une experience utilisateur fluide meme en conditions reseau degradees.
L'adoption des PWA a explose ces dernieres annees avec des entreprises comme Twitter, Starbucks et Pinterest qui rapportent des gains significatifs en engagement et en conversion. Le standard est desormais supporte par tous les navigateurs majeurs, y compris Safari sur iOS depuis la version 16.4 avec le support des notifications push.
Ce guide couvre l'ensemble du processus de creation d'une PWA avec Next.js, depuis la configuration du manifeste jusqu'au deploiement en production. Vous apprendrez a implementer des strategies de cache avec Workbox, a gerer le mode hors ligne et a declencher l'invite d'installation native du navigateur.
1. Service Workers : les fondamentaux
Un service worker est un script JavaScript qui s'execute en arriere-plan, independamment de la page web, agissant comme un proxy reseau entre le navigateur et le serveur. Il intercepte les requetes via l'evenement fetch et peut retourner des reponses depuis le cache sans jamais contacter le reseau. L'enregistrement se fait via navigator.serviceWorker.register('/sw.js') dans le code client.
Le cycle de vie d'un service worker comprend trois phases critiques : installation, activation et ecoute. Durant la phase install, on pre-cache les ressources essentielles avec caches.open() et cache.addAll(). La phase activate est le moment ideal pour nettoyer les anciens caches en comparant les noms de version et en supprimant les entrees obsoletes avec caches.delete().
La gestion des mises a jour est un aspect souvent neglige mais crucial. Par defaut, le navigateur verifie le script du service worker toutes les 24 heures, et un changement d'un seul octet declenche le telechargement du nouveau worker. L'appel a self.skipWaiting() dans l'evenement install, combine avec clients.claim() dans activate, permet de forcer l'activation immediate sans attendre la fermeture des onglets.
2. Web App Manifest et invite d'installation
Le fichier manifest.json (ou manifest.webmanifest) definit les metadonnees de votre PWA : name, short_name, start_url, display, background_color, theme_color et icons. Le mode display: 'standalone' supprime la barre d'adresse du navigateur et donne a l'application l'apparence d'une app native. Chaque icone doit etre fournie en plusieurs tailles (192x192, 512x512 minimum) au format PNG ou WebP.
L'invite d'installation (beforeinstallprompt) se declenche automatiquement lorsque le navigateur detecte qu'un site remplit les criteres PWA : manifest valide, service worker actif et connexion HTTPS. Vous pouvez intercepter cet evenement avec window.addEventListener('beforeinstallprompt', e => { e.preventDefault(); deferredPrompt = e; }) pour afficher votre propre bouton d'installation personnalise au moment le plus opportun.
En Next.js, le package next-pwa simplifie considerablement la configuration en generant automatiquement le service worker via Workbox. Il suffit d'ajouter withPWA() dans next.config.js et de placer le manifest.json dans le dossier public. L'option runtimeCaching permet de definir des strategies de cache specifiques pour chaque type de ressource directement dans la configuration.
3. Strategies de cache avec Workbox
Workbox propose cinq strategies de cache principales : CacheFirst pour les assets statiques qui changent rarement, NetworkFirst pour le contenu dynamique qui doit rester a jour, StaleWhileRevalidate pour un compromis entre rapidite et fraicheur, NetworkOnly et CacheOnly pour les cas extremes. Chaque strategie s'instancie via les classes du module workbox-strategies et se configure avec des plugins de cache expiration et de quota.
La strategie StaleWhileRevalidate est particulierement adaptee aux API REST et aux images de profil : elle retourne immediatement la version en cache (performance instantanee) tout en lançant une requete reseau en arriere-plan pour mettre a jour le cache. Le plugin ExpirationPlugin limite le nombre d'entrees et leur duree de vie avec maxEntries et maxAgeSeconds, evitant ainsi la saturation du stockage du navigateur.
Pour les requetes d'API, le plugin CacheableResponsePlugin filtre les reponses par code HTTP (statuses: [0, 200]) afin de ne jamais cacher d'erreurs. La precache de Workbox, configuree via workbox.precaching.precacheAndRoute(self.__WB_MANIFEST), gere automatiquement le versioning des fichiers avec des hash de revision, garantissant que les utilisateurs recoivent toujours la derniere version apres une mise a jour.
Besoin d’aide en Technologie ?
Nos experts vous accompagnent. Recevez 3 devis gratuits sous 24h.
Gratuit · Sans engagement · Reponse sous 24h
4. Mode hors ligne et synchronisation
Le mode hors ligne complet necessite une page fallback dediee qui s'affiche lorsqu'aucune ressource en cache ne correspond a la requete. Dans le service worker, on intercepte les echecs de navigation avec un catch sur la strategie NetworkFirst pour servir /offline.html a la place. Cette page doit elle-meme etre pre-cachee lors de l'installation du service worker pour garantir sa disponibilite.
L'API Background Sync permet de reporter les actions utilisateur (envoi de formulaire, like, commentaire) jusqu'au retablissement de la connexion. On enregistre un sync tag via registration.sync.register('sync-forms') et le service worker ecoute l'evenement sync pour relancer les requetes stockees dans IndexedDB. La librairie workbox-background-sync encapsule cette logique avec une file d'attente persistante et des tentatives automatiques.
Pour les donnees critiques, IndexedDB offre un stockage structure cote client bien plus puissant que localStorage. La librairie idb de Jake Archibald fournit une API basee sur les Promises qui simplifie grandement les operations CRUD. Combiner IndexedDB avec un service worker permet de creer des applications veritablement offline-first ou les donnees sont synchronisees de maniere transparente des que le reseau redevient disponible.
5. Notifications push et engagement
Les notifications push reposent sur deux API distinctes : la Push API pour recevoir les messages du serveur et la Notification API pour les afficher a l'utilisateur. L'abonnement se fait via registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: vapidPublicKey }), qui retourne un objet PushSubscription contenant l'endpoint et les cles de chiffrement a envoyer a votre backend.
Cote serveur, la librairie web-push pour Node.js gere le chiffrement et l'envoi des messages vers les endpoints des navigateurs. Chaque notification est chiffree avec le protocole ECDH P-256, garantissant que seul le navigateur destinataire peut la dechiffrer. Le service worker recoit le message dans l'evenement push et appelle self.registration.showNotification() avec le titre, le corps, l'icone et les actions personnalisees.
Les bonnes pratiques dictent de demander la permission au bon moment, jamais au premier chargement de la page. Affichez d'abord une interface expliquant la valeur ajoutee des notifications, puis declenchez Notification.requestPermission() uniquement apres un clic explicite de l'utilisateur. Les taux d'acceptation passent typiquement de 3% (demande immediate) a 15-25% (demande contextuelle) avec cette approche progressive.
Questions frequentes
Quelle est la difference entre une PWA et une application native ?
Une PWA est distribuee via le web sans passer par un app store, se met a jour automatiquement et partage le meme code base pour toutes les plateformes. Elle offre un acces limite aux API natives (Bluetooth, NFC) mais couvre 90% des cas d'usage courants avec un cout de developpement nettement inferieur.
Les PWA fonctionnent-elles sur iOS Safari ?
Oui, depuis iOS 16.4, Safari supporte les notifications push pour les PWA ajoutees a l'ecran d'accueil. Certaines limitations persistent (pas de Background Sync, quota de stockage reduit) mais l'experience est desormais satisfaisante pour la majorite des utilisateurs Apple.
Comment tester le mode hors ligne d'une PWA ?
Chrome DevTools propose un mode Offline dans l'onglet Network, et l'onglet Application affiche le statut du service worker et le contenu du cache. Lighthouse genere un audit PWA complet verifiant tous les criteres : manifest, service worker, HTTPS, icones et mode hors ligne.
Workbox est-il necessaire ou peut-on ecrire un service worker manuellement ?
Un service worker manuel convient pour les projets simples, mais Workbox elimine des heures de code boilerplate pour le precaching, le versioning, les strategies de cache et la synchronisation en arriere-plan. En production, Workbox est recommande pour sa fiabilite testee a grande echelle par Google.
Comment gerer les mises a jour de la PWA sans perturber l'utilisateur ?
Implementez un pattern de notification discrete : detectez le nouveau service worker via l'evenement controllerchange, puis affichez un bandeau proposant de recharger la page. Evitez skipWaiting automatique sur les applications avec des formulaires longs pour ne pas perdre l'etat en cours de saisie.
Guides complementaires
Next.js 14 : guide complet du App Router en français
Guide complet du App Router Next.js 14 en français : layouts, server components, data fetching et déploiement.
TechnologieTailwind CSS : guide complet et bonnes pratiques 2025
Guide complet Tailwind CSS : configuration, responsive design, dark mode, composants réutilisables et bonnes pratiques.
TechnologieAPI REST vs GraphQL : quel choix pour votre projet
Comparatif détaillé REST vs GraphQL : performances, flexibilité, sécurité et cas d'usage pour choisir votre API.
Outils gratuits recommandes
Lancez votre projet technologie
500+ experts verifies prets a vous accompagner. Devis gratuit sous 24h.