Cache.match()
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis avril 2018.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
La méthode match() de l'interface Cache retourne une Promesse qui est résolue en une Réponse associée à la première requête qui match dans l'objet Cache. Si aucune requête n'est trouvée, la Promesse est résolue en undefined.
Syntaxe
cache.match(request, { options }).then(function (response) {
// faire quelque chose avec la réponse
});
Paramètres
- request
- options Facultatif
-
Un objet qui définit des options pour l'opération de
match. Les options disponibles sont les suivantes :ignoreSearch: UnBooleanqui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis àtrue, la partie?value=barde l'urlhttp://foo.com/?value=barsera ignorée lors du matching. Est àfalsepar défaut.ignoreMethod: UnBooleanqui, quand mis àtrue, empêche les opérations de matching de valider la méthodeHTTPde laRequête(en temps normal, seulesGETetHEADsont autorisées.) Est àfalsepar défaut.ignoreVary: UnBooleanqui, quand mis àtrue,indique à l'opération de matching de ne pas effectuer le matchingVARYdes header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que laRéponseait un headerVARYou non. Est àfalsepar défaut.
Retour
Une Promesse qui est résolue en la première Réponse qui match la requête, ou en undefined si aucune requête n'est trouvée.
Note :
Cache.match() est quasiment identique à Cache.matchAll(), si ce n'est qu'elle est résolue en response[0] (la première réponse qui matche) plutôt que response[] (un tableau de toutes les réponses qui matchent).
Exemples
Cet exemple est extrait de l'exemple Page hors ligne custom (demo).
L'exemple suivant se sert d'un cache pour fournir les données demandées même quand une requête échoue. Une clause catch() est déclenchée quand l'appel à fetch() lève une exception. A l'intérieur de la clause catch(), match() est utilisée to pour retourner la réponse appropriée.
Dans cet exemple, nous avons décidé que seul les documents HTML récupérés via le verbe HTTP GET seront mis en cache. Si notre condition if() est false, le gestionnaire fetch n'intercepte pas la requête. Si d'autres gestionnaires fetch sont enregistrés, ils ont une occasion d'appeler event.respondWith(). Si aucun gestionnaire fetch ne décide d'appeler event.respondWith(), la requête sera gérée par le navigateur comme si les service workers n'avaient pas existé. Si fetch() retourne une réponse HTTP valide avec un code réponse dans les 4xx ou 5xx, la clause catch() ne sera PAS appelée.
self.addEventListener("fetch", function (event) {
// We only want to call event.respondWith() if this is a GET request for an HTML document.
if (
event.request.method === "GET" &&
event.request.headers.get("accept").indexOf("text/html") !== -1
) {
console.log("Handling fetch event for", event.request.url);
event.respondWith(
fetch(event.request).catch(function (e) {
console.error("Fetch failed; returning offline page instead.", e);
return caches.open(OFFLINE_CACHE).then(function (cache) {
return cache.match(OFFLINE_URL);
});
}),
);
}
});
Spécifications
| Specification |
|---|
| Service Workers # cache-match |
Compatibilité des navigateurs
Chargement…