Utiliser l’API Cache pour le hors-ligne
Stockez requêtes et réponses dans le navigateur avec l'API Cache pour rendre votre site disponible hors connexion et plus résilient.
L’API Cache est un système qui stocke et récupère des couples requête/réponse réseau. Elle a été conçue pour permettre aux service workers de mettre en cache des requêtes et de fournir des réponses rapides quelle que soit la qualité du réseau, mais elle peut aussi servir de mécanisme de stockage général. Pour la performance et la résilience, c’est la brique qui rend un site disponible hors connexion : un atout d’expérience utilisateur qui complète le cache HTTP du navigateur et soutient indirectement votre SEO en fiabilisant l’accès au contenu.
L’API est exposée via la propriété globale caches, accessible depuis une fenêtre, une iframe, un worker ou un service worker. Disponible dans tous les navigateurs modernes, elle se détecte simplement par la présence de caches dans l’objet global.
L’API Cache est souvent réduite au hors-ligne, mais je la vois surtout comme un outil de fiabilité d’accès au contenu, ce qui sert le SEO de façon indirecte mais réelle. Couplée à un service worker, elle garantit des réponses rapides même sur un réseau capricieux. Mon conseil : penser sa stratégie de mise en cache dès le départ, pas comme une rustine ajoutée après coup.
Ce que l'API Cache peut stocker
Les caches ne stockent que des paires d’objets Request et Response, qui représentent les requêtes et réponses HTTP. Comme ces objets peuvent transporter n’importe quel type de données transférable par HTTP, la capacité est vaste : au moins quelques centaines de mégaoctets, et potentiellement bien plus selon l’espace disponible sur l’appareil. Pour ouvrir un cache, on utilise caches.open en lui passant un nom ; s’il n’existe pas, il est créé.
Voici les principales méthodes de l’API Cache et leur rôle.
| Méthode | Rôle | À noter |
|---|---|---|
caches.open(name) |
Ouvre ou crée un cache nommé |
Renvoie une promesse résolue avec l’objet Cache |
cache.add(request) |
Récupère une requête et stocke la réponse |
Échoue si le statut n’est pas dans la plage 200 |
cache.addAll(urls) |
Ajoute un tableau de requêtes ou d’URL |
Rejette si une seule requête échoue |
cache.put(request, response) |
Stocke une réponse, y compris générée par votre code |
Plus permissif : accepte les réponses non CORS |
cache.match(request) |
Recherche une entrée correspondante |
Renvoie la réponse ou undefined |
cache.delete(request) |
Supprime une paire requête/réponse |
Accepte les mêmes options que match |
Ajouter des ressources au cache
Trois méthodes permettent d’alimenter un cache, une logique proche de celle employée pour précharger et prérendre des ressources à l’avance. add prend une requête ou une URL, l’envoie sur le réseau et stocke la réponse ; addAll fait de même pour un tableau, mais rejette si une seule requête échoue. put est la plus souple : elle accepte une réponse issue du réseau ou créée par votre code, y compris des réponses non CORS ou hors de la plage 200. Chaque nouvelle entrée écrase l’entrée correspondante existante.
<script>
const cache = await caches.open('my-cache');
// Recuperer et stocker une ressource
cache.add('/data.json');
// Ajouter plusieurs ressources
cache.addAll(['/weather/today.json', '/weather/tomorrow.json']);
// Stocker une reponse creee par votre code
cache.put('/test.json', new Response('{"foo": "bar"}'));
</script>Récupérer et supprimer des entrées
Pour retrouver un élément, utilisez cache.match : la méthode renvoie une promesse résolue avec la réponse trouvée, ou undefined sinon. Le navigateur compare plus que l’URL : deux requêtes diffèrent si leur chaîne de requête, leurs en-têtes Vary ou leur méthode HTTP changent. Les options ignoreSearch, ignoreMethod et ignoreVary permettent d’assouplir cette correspondance. Pour toutes les réponses correspondantes, utilisez matchAll ; pour chercher dans tous les caches d’un coup, caches.match. Pensez à articuler ces caches avec la mise en cache de longue durée côté serveur. Enfin, cache.delete retire une entrée et caches.delete supprime un cache entier.
La méthode add échoue si la récupération échoue ou si le statut sort de la plage 200, et les requêtes inter-origines hors mode CORS, dont le statut vaut 0, ne peuvent pas être stockées ainsi. Pour ces cas, passez par put, plus permissif. Pensez aussi que la recherche par filtrage devient lente sur de grands volumes : maintenez plutôt un index dans IndexedDB.
À faire
- détecter la présence de l’API avant usage
- choisir add, addAll ou put selon le besoin
- assouplir match avec les options quand c’est pertinent
- indexer dans IndexedDB pour les recherches volumineuses
À éviter
- tenter de stocker des réponses non CORS avec add
- supposer que match compare uniquement l’URL
- filtrer de grands ensembles d’entrées à chaque recherche
- oublier de supprimer les caches devenus obsolètes
Points clés à retenir
- Ouvrir ou créer un cache nommé avec caches.open.
- Alimenter le cache avec add, addAll ou put selon le contexte.
- Récupérer les réponses avec match, matchAll ou caches.match.
- Assouplir la correspondance via ignoreSearch, ignoreMethod et ignoreVary.
- Maintenir un index dans IndexedDB pour les recherches sur de grands volumes.
L’API Cache stocke des couples requête/réponse pour rendre votre site rapide et disponible hors connexion.
Quiz : testez vos connaissances
Quiz : testez vos connaissances
-
Que stocke l'API Cache ?
- Seulement des fichiers images et des feuilles de style
- N'importe quelle variable JavaScript de l'application
- Uniquement des paires d'objets Request et Response
Les caches ne conservent que des paires d’objets
RequestetResponse, qui représentent les requêtes et réponses HTTP. Comme ces objets transportent tout type de données transférable par HTTP, la capacité reste très large. -
L'API Cache est-elle réservée aux service workers ?
- Oui, elle ne fonctionne que dans un service worker
- Non, elle sert aussi de stockage général accessible depuis une fenêtre ou un worker
- Oui, sauf pour les requêtes inter-origines
L’API Cache a été conçue pour les service workers, mais elle fonctionne aussi comme mécanisme de stockage général, accessible depuis une fenêtre, une iframe ou un worker.
-
Quelle est la différence entre les méthodes add et put ?
- put ne fonctionne que pour les ressources inter-origines
- add et put font exactement la même chose
- add récupère une ressource sur le réseau et échoue hors de la plage 200, put accepte une réponse créée par votre code
addrécupère une ressource sur le réseau et la stocke, mais échoue si le statut sort de la plage 200.putest plus permissive et accepte une réponse construite par votre propre code.
À propos de l'auteur
Besoin d'un accompagnement SEO ?
Un site qui échoue hors connexion perd des visiteurs et de la fiabilité aux yeux des moteurs.