JavaScript Academy · Leçon

L’API Cache

Stockez et servez des réponses depuis le cache.

L’API Cache est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.

Qu’est-ce que l’API de cache ?

L’API de cache stocke des paires requête/réponse dans des caches nommés. Les agents de service l’utilisent pour servir des ressources sans solliciter le réseau, ce qui constitue la base de la prise en charge du mode hors ligne.

L’objet caches

L’objet global caches (un CacheStorage) gère tous vos caches nommés. Il est disponible dans les pages comme dans les agents de service.

// Available globally:
// caches.open(name)
// caches.match(request)
// caches.delete(name)
// caches.keys()

Ouvrir un cache

caches.open(name) renvoie une promesse correspondant à un cache portant ce nom et le crée s’il n’existe pas. Les noms vous permettent de gérer les versions de vos caches.

caches.open('static-v1').then(cache => {
  console.log('cache ready');
});

Précharger avec addAll

Pendant install, cache.addAll(urls) récupère et stocke une liste de ressources en un seul appel. Si une récupération échoue, toute l’opération est rejetée.

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('static-v1').then(cache =>
      cache.addAll(['/', '/styles.css', '/app.js'])
    )
  );
});

waitUntil

event.waitUntil(promise) indique au navigateur de maintenir l’agent actif jusqu’à la résolution ou au rejet de la promesse. Encapsulez votre configuration du cache dans cet appel afin que l’installation ne se termine pas trop tôt.

self.addEventListener('install', (event) => {
  event.waitUntil(setupCache());
});

Ajouter une entrée

cache.put(request, response) stocke une seule réponse, tandis que cache.add(url) récupère et stocke une URL. Utilisez put lorsque vous disposez déjà d’une réponse à enregistrer.

const cache = await caches.open('static-v1');
const response = await fetch('/logo.png');
await cache.put('/logo.png', response);

Rechercher dans le cache

cache.match(request) recherche une réponse stockée. La promesse se résout en la réponse correspondante ou en undefined si aucune correspondance n’est trouvée.

const cache = await caches.open('static-v1');
const hit = await cache.match('/styles.css');
if (hit) console.log('served from cache');

Raccourci caches.match

caches.match(request) recherche simultanément dans tous les caches, ce qui est pratique dans un gestionnaire fetch lorsque le cache contenant la ressource vous importe peu.

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(hit =>
      hit || fetch(event.request)
    )
  );
});

respondWith

Dans un événement fetch, event.respondWith(promise) fournit la réponse que le navigateur utilisera. Résolvez la promesse avec une réponse mise en cache ou récupérée récemment, de type Response.

self.addEventListener('fetch', (event) => {
  event.respondWith(handleRequest(event.request));
});

Cloner les réponses

Le corps d’une réponse ne peut être lu qu’une seule fois. Pour renvoyer une réponse tout en la stockant, commencez par la cloner.

const response = await fetch(request);
cache.put(request, response.clone()); // store a copy
return response; // return the original

Supprimer des entrées du cache

cache.delete(request) supprime une entrée ; caches.delete(name) supprime un cache nommé entier. Utilisez ces méthodes pour supprimer les ressources obsolètes.

await cache.delete('/old-asset.js');
await caches.delete('static-v0'); // remove old cache version

Vérification rapide

Testez votre compréhension de l’API de cache.

Récapitulatif

Vous avez appris à utiliser l’API de cache :

caches.open(name) récupère ou crée un cache nommé.
addAll précharge le cache ; put/add stockent des entrées.
match récupère une réponse ; caches.match recherche dans tous les caches.
respondWith fournit la réponse lors de l’événement fetch.
Clonez les réponses avant de les mettre en cache et de les renvoyer.

Ensuite, vous découvrirez les stratégies de mise en cache.

Questions Fréquemment Posées

La leçon « L’API Cache » est-elle gratuite ?

Oui — le texte complet de « L’API 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 « L’API Cache » ?

Stockez et servez des réponses depuis le cache. 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 2 sur 4.

Combien de temps prend la leçon « L’API 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

← Retour à JavaScript Academy