Stratégies de mise en cache
Appliquez les modèles « cache d’abord » et « réseau d’abord ».
Stratégies de mise en cache est une leçon JavaScript 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 JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.
Pourquoi les stratégies sont importantes
Les différentes ressources nécessitent un traitement différent. Un logo peut être servi depuis le cache indéfiniment, tandis qu’un flux d’API doit rester à jour. Une stratégie de mise en cache détermine s’il faut essayer le cache ou le réseau en premier, ainsi que la manière de les combiner.
Priorité au cache
Priorité au cache : vérifiez le cache ; si la ressource est trouvée, renvoyez-la ; sinon, récupérez-la sur le réseau. Cette stratégie convient parfaitement aux ressources statiques qui changent rarement, comme les polices, les fichiers CSS et les images.
async function cacheFirst(request) {
const cached = await caches.match(request);
return cached || fetch(request);
}Priorité au cache avec mise en cache de secours
Lorsque la ressource est absente du cache, vous pouvez la récupérer et stocker également le résultat afin que la prochaine requête soit rapide. Le cache se remplit ainsi progressivement au fil de la navigation des utilisateurs.
async function cacheFirst(request) {
const cached = await caches.match(request);
if (cached) return cached;
const fresh = await fetch(request);
const cache = await caches.open('runtime');
cache.put(request, fresh.clone());
return fresh;
}Priorité au réseau
Priorité au réseau : essayez le réseau ; si cela réussit, utilisez la réponse et mettez-la en cache ; en cas d’échec (hors ligne), utilisez le cache comme solution de secours. Cette stratégie convient particulièrement aux contenus fréquemment mis à jour, comme les actualités ou les tableaux de bord.
async function networkFirst(request) {
try {
const fresh = await fetch(request);
const cache = await caches.open('runtime');
cache.put(request, fresh.clone());
return fresh;
} catch (err) {
return caches.match(request);
}
}Obsolète pendant la revalidation
Obsolète pendant la revalidation : renvoyez immédiatement la copie mise en cache pour gagner en rapidité, tout en récupérant en arrière-plan une copie à jour afin de mettre à jour le cache pour la prochaine fois. C’est un excellent équilibre entre rapidité et fraîcheur.
async function staleWhileRevalidate(request) {
const cache = await caches.open('runtime');
const cached = await cache.match(request);
const network = fetch(request).then(res => {
cache.put(request, res.clone());
return res;
});
return cached || network;
}Réseau uniquement et cache uniquement
Deux extrêmes simples :
- Réseau uniquement : récupérez toujours les données, sans jamais les mettre en cache (par exemple, les balises d’analyse).
- Cache uniquement : servez seulement les ressources précachées, sans jamais accéder au réseau (par exemple, une structure d’application).
// network-only:
// return fetch(request);
// cache-only:
// return caches.match(request);Routage selon le type de requête
Les applications réelles choisissent une stratégie pour chaque requête. Inspectez request.url ou request.destination dans le gestionnaire de récupération, puis effectuez le routage en conséquence.
self.addEventListener('fetch', (event) => {
const url = new URL(event.request.url);
if (url.pathname.startsWith('/api/')) {
event.respondWith(networkFirst(event.request));
} else {
event.respondWith(cacheFirst(event.request));
}
});Gestion des solutions de secours hors ligne
Lorsque le réseau et le cache ne contiennent rien, renvoyez une page hors ligne conviviale ou un espace réservé au lieu d’une réponse défectueuse.
async function withOfflineFallback(request) {
return (await caches.match(request)) ||
(await caches.match('/offline.html'));
}Mise en cache des réponses réussies uniquement
Évitez de mettre les erreurs en cache. Vérifiez response.ok (ou le statut) avant le stockage afin qu’une erreur 404 ou 500 ne contamine pas votre cache.
const fresh = await fetch(request);
if (fresh.ok) {
cache.put(request, fresh.clone());
}
return fresh;Choisir une stratégie
Adaptez la stratégie au contenu :
- Ressources statiques : priorité au cache
- Données dynamiques : priorité au réseau
- Contenu mixte : obsolète pendant la revalidation
La plupart des applications combinent plusieurs stratégies grâce au routage des requêtes.
Récapitulatif des stratégies
Les stratégies de mise en cache permettent à un seul service worker de servir intelligemment toute l’application : ressources statiques instantanées, données dynamiques à jour et solutions de secours hors ligne élégantes, le tout choisi pour chaque requête.
Vérification rapide
Vérifiez votre compréhension des stratégies de mise en cache.
Récapitulatif
Vous avez découvert les stratégies de mise en cache :
- Priorité au cache pour les ressources statiques.
- Priorité au réseau pour les données dynamiques à jour.
- Obsolète pendant la revalidation pour associer rapidité et fraîcheur.
- Effectuez le routage pour chaque requête via
request.url/destination. - Ne mettez en cache que les réponses réussies et fournissez des solutions de secours hors ligne.
Ensuite, nous verrons la synchronisation en arrière-plan et les mises à jour du cache.
Questions Fréquemment Posées
La leçon « Stratégies de mise en cache » est-elle gratuite ?
Oui — le texte complet de « Stratégies de mise en cache » 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 JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Stratégies de mise en cache » ?
Appliquez les modèles « cache d’abord » et « réseau d’abord ». Tu pratiques JavaScript 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 JavaScript Academy ?
Aucune expérience préalable n'est requise. JavaScript 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 » ?
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 JavaScript Academy ?
Oui. Chaque leçon JavaScript 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
- Enregistrer un Service Worker
- L’API Cache
- Stratégies de mise en cache
- Synchronisation et mises à jour en arrière-plan