Préchargement intelligent avec Workbox

Gérer manuellement un Service Worker peut vite devenir complexe. Workbox, une bibliothèque officielle de Google, simplifie l’implémentation des PWA tout en vous permettant d’appliquer des stratégies de cache avancées. Dans cet article, nous allons voir comment utiliser Workbox pour automatiser le préchargement des ressources critiques, améliorer l’expérience hors-ligne, et alléger la maintenance.

Ce quatrième volet du guide PWA se concentre sur le précaching intelligent avec Workbox, une méthode efficace pour mettre en cache uniquement ce qui est nécessaire, au bon moment.

I. Pourquoi utiliser Workbox ?

Workbox vous évite d’écrire manuellement des dizaines de lignes de gestion du cache. Il propose :

• Un système de précaching automatisé (build-time).
• Des stratégies de cache prêtes à l’emploi.
• Un système de mise à jour gérable via versioning.
• Une intégration avec Webpack, Rollup, Vite, etc.

II. Mettre en place Workbox

Le plus simple est d’utiliser le plugin officiel dans un environnement de build (Vite, Webpack, etc.). Voici un exemple avec Vite et vite-plugin-pwa, qui intègre Workbox :

// vite.config.js
import { VitePWA } from 'vite-plugin-pwa';

export default {
	plugins: [
		VitePWA({
			registerType: 'autoUpdate',
			workbox: {
				globPatterns: ['**/*.{js,css,html,woff2,png,svg}'],
				runtimeCaching: [
					{
						urlPattern: /^https:\/\/fonts\.googleapis\.com/,
						handler: 'StaleWhileRevalidate',
						options: {
							cacheName: 'google-fonts',
						},
					},
				],
			}
		})
	]
}

Cette configuration :

• Précharge tous les fichiers HTML, JS, CSS, polices, images
• Applique une stratégie StaleWhileRevalidate aux polices Google

III. Précharger intelligemment (Precaching)

Workbox génère automatiquement une liste des fichiers à mettre en cache lors du build. Ces fichiers sont ensuite « injectés » dans le Service Worker via `workbox-precaching`.

// service-worker.js (généré ou personnalisé)
import { precacheAndRoute } from 'workbox-precaching';

// Injecté automatiquement par Workbox pendant le build
precacheAndRoute(self.__WB_MANIFEST);

Vous pouvez aussi exclure certains fichiers (ex. : assets lourds ou dynamiques) en filtrant avec `globIgnores`.

1. Supprimer du précache les fichiers trop lourds

workbox: {
	globPatterns: ['**/*.{js,css,html}'],
	globIgnores: ['**/admin.html', '**/*.mp4']
}

2. Ajouter un fallback hors-ligne

runtimeCaching: [
	{
		urlPattern: ({ request }) => request.mode === 'navigate',
		handler: 'NetworkFirst',
		options: {
			cacheName: 'html-pages',
			networkTimeoutSeconds: 3,
			fallback: '/offline.html'
		}
	}
]

IV. Optimiser les performances avec des stratégies Workbox

Voici les stratégies principales que Workbox propose, déjà prêtes :

• CacheFirst → contenu statique
• NetworkFirst → HTML et API
• StaleWhileRevalidate → fonts, images, styles
• NetworkOnly → données sensibles (paiement, auth)

Et elles peuvent être combinées en runtime :

import { registerRoute } from 'workbox-routing';
import { NetworkFirst, CacheFirst, StaleWhileRevalidate } from 'workbox-strategies';

registerRoute(
	({ request }) => request.destination === 'image',
	new CacheFirst({ cacheName: 'images' })
);

registerRoute(
	({ url }) => url.pathname.startsWith('/api/'),
	new NetworkFirst({ cacheName: 'api-cache' })
);

V. Mettre à jour facilement votre cache (autoUpdate)

Une des frustrations classiques des PWA vient du cache obsolète. Avec `registerType: 'autoUpdate'` dans VitePWA, le nouveau Service Worker est installé **dès qu’il est prêt**. Vous pouvez aussi déclencher une mise à jour via JS :

if ('serviceWorker' in navigator) {
	navigator.serviceWorker.getRegistration().then(reg => {
		if (reg?.waiting) reg.waiting.postMessage({ type: 'SKIP_WAITING' });
	});
}

Un indicateur visuel peut inviter l’utilisateur à recharger l’app si besoin.

VI. Conclusion

Grâce à Workbox, votre PWA devient plus rapide, plus résiliente, et plus facile à maintenir. Le précaching intelligent et les stratégies de cache automatiques permettent de concentrer vos efforts sur l’expérience utilisateur plutôt que sur la gestion manuelle du cache.

Dans un prochain article, nous explorerons comment gérer les **mises à jour du Service Worker** de façon fluide (et sans frustrer les utilisateurs), en utilisant `clients.claim()` et `skipWaiting()` intelligemment.