Stratégies de mise en cache hors ligne : CacheFirst et NetworkFirst
Implémentez Cache-First pour les ressources statiques et Network-First pour les réponses d’API avec l’API Cache et la bibliothèque Workbox.
Stratégies de mise en cache hors ligne : CacheFirst et NetworkFirst est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Pourquoi les stratégies de mise en cache sont importantes
Les agents de service peuvent intercepter chaque requête, mais vous avez besoin d'une stratégie. Chaque type de contenu nécessite ses propres règles : un logo doit être conservé indéfiniment dans le cache, une réponse d'API doit toujours être récente et les articles d'actualité bénéficient d'une mise en cache obsolète avec revalidation.
L'API de mise en cache
Les agents de service utilisent l'API de mise en cache : un magasin clé-valeur de paires requête → réponse, limité à chaque origine. Les données sont conservées entre les sessions.
// open a cache:
const cache = await caches.open('v1');
// add resources:
await cache.add('/styles.css');
await cache.addAll(['/', '/app.js', '/styles.css']);
// look up:
const response = await cache.match('/styles.css');
// delete:
await cache.delete('/styles.css');Le cache d'abord
Consultez d'abord le cache. Si vous trouvez une réponse, renvoyez-la. Sinon, utilisez le réseau en solution de repli et mettez la réponse en cache. Idéal pour : les ressources statiques, les polices, les logos et le squelette de l'application.
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(cached => {
if (cached) return cached;
return fetch(event.request).then(res => {
const clone = res.clone();
caches.open('v1').then(c => c.put(event.request, clone));
return res;
});
})
);
});Le réseau d'abord
Essayez d'abord le réseau. En cas d'échec (hors connexion), utilisez le cache en solution de repli. Idéal pour : les appels d'API et le contenu dynamique lorsque la fraîcheur compte davantage que la rapidité.
self.addEventListener('fetch', (event) => {
event.respondWith(
fetch(event.request).then(res => {
const clone = res.clone();
caches.open('api-v1').then(c => c.put(event.request, clone));
return res;
}).catch(() => caches.match(event.request))
);
});Obsolète pendant la revalidation
Renvoyez immédiatement le cache (rapidement), puis récupérez les données en arrière-plan et mettez le cache à jour pour la prochaine fois. Idéal pour : les avatars, les articles d'actualité et les données partiellement récentes.
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(cached => {
const network = fetch(event.request).then(res => {
caches.open('v1').then(c => c.put(event.request, res.clone()));
return res;
});
return cached || network;
})
);
});Réseau uniquement
Contournez entièrement le cache : utilisez toujours le réseau. Cette stratégie convient aux requêtes qui ne peuvent pas être mises en cache (points d'accès d'authentification, analyses et mutations).
self.addEventListener('fetch', (event) => {
if (event.request.url.includes('/api/auth')) {
event.respondWith(fetch(event.request));
return;
}
// ... other strategies
});Cache uniquement
N'utilisez jamais le réseau : renvoyez le cache ou échouez. Cette stratégie est utile pour les fichiers précachés que vous ne souhaitez jamais actualiser pendant une session.
Stratégies Workbox
Workbox regroupe toutes les stratégies sous forme de classes nommées. Le code répétitif est ainsi réduit.
import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';
registerRoute(({ request }) => request.destination === 'image',
new CacheFirst({ cacheName: 'images' })
);
registerRoute(({ url }) => url.pathname.startsWith('/api/'),
new NetworkFirst({ cacheName: 'api', networkTimeoutSeconds: 3 })
);
registerRoute(({ request }) => request.destination === 'document',
new StaleWhileRevalidate({ cacheName: 'pages' })
);Expiration du cache
Les caches grossissent indéfiniment si vous ne fixez pas de limites. Workbox fournit ExpirationPlugin.
import { ExpirationPlugin } from 'workbox-expiration';
new CacheFirst({
cacheName: 'images',
plugins: [new ExpirationPlugin({
maxEntries: 50,
maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days
})]
});Réponse pouvant être mise en cache
Par défaut, les navigateurs ne mettent en cache que les réponses 200. Ignorez les réponses 4xx, 5xx et opaques (provenant d'une autre origine avec no-cors) pour éviter de remplir le cache d'erreurs.
Page de secours hors connexion
Affichez une page hors connexion accueillante lorsqu'une navigation échoue : l'expérience est meilleure que l'erreur par défaut du navigateur.
self.addEventListener('install', (e) => {
e.waitUntil(caches.open('offline').then(c => c.add('/offline.html')));
});
self.addEventListener('fetch', (e) => {
if (e.request.mode === 'navigate') {
e.respondWith(
fetch(e.request).catch(() => caches.match('/offline.html'))
);
}
});Choisir la bonne stratégie
Ressources statiques (logo, police, CSS) : cache d'abord. Données d'API (profil utilisateur, fil) : réseau d'abord. Contenu parfois récent (avatars, actualités) : obsolète pendant la revalidation. Authentification : réseau uniquement. Fichiers statiques préinstallés : cache uniquement.
Vérification rapide
Quelle stratégie de mise en cache convient le mieux à un fichier CSS qui change rarement, mais qui doit se charger rapidement ?
Récapitulatif : stratégies de mise en cache
Cache d'abord : ressources statiques (le plus rapide, mais parfois obsolètes). Réseau d'abord : données d'API (les plus récentes, mais plus lentes). Obsolète pendant la revalidation : servir le cache et récupérer les données en arrière-plan. Réseau uniquement : authentification et mutations. Cache uniquement : squelette préinstallé. Utilisez Workbox pour réduire le code répétitif. Fixez des limites d'expiration. Ajoutez une page de secours hors connexion. Choisissez la stratégie selon le type de ressource.
Questions Fréquemment Posées
La leçon « Stratégies de mise en cache hors ligne : CacheFirst et NetworkFirst » est-elle gratuite ?
Oui — le texte complet de « Stratégies de mise en cache hors ligne : CacheFirst et NetworkFirst » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Stratégies de mise en cache hors ligne : CacheFirst et NetworkFirst » ?
Implémentez Cache-First pour les ressources statiques et Network-First pour les réponses d’API avec l’API Cache et la bibliothèque Workbox. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Stratégies de mise en cache hors ligne : CacheFirst et NetworkFirst » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Le manifeste d’application web
- Enregistrement et cycle de vie d’un Service Worker
- Stratégies de mise en cache hors ligne : CacheFirst et NetworkFirst
- Notifications push