Cache: match() Methode
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.
Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die match() Methode des Cache Interfaces gibt ein Promise zurück, das auf die Response aufgelöst wird, die mit der ersten übereinstimmenden Anfrage im Cache Objekt verknüpft ist. Wenn keine Übereinstimmung gefunden wird, wird das Promise auf undefined aufgelöst.
Syntax
match(request)
match(request, options)
Parameter
request-
Der
Request, für den Sie versuchen, Antworten imCachezu finden. Dies kann einRequestObjekt oder ein URL-String sein. optionsOptional-
Ein Objekt, das Optionen für die
match-Operation festlegt. Die verfügbaren Optionen sind:ignoreSearch-
Ein boolescher Wert, der angibt, ob der Abfrage-String in der URL ignoriert werden soll. Zum Beispiel, wenn auf
truegesetzt, würde der?value=bar-Teil vonhttp://foo.com/?value=barbei der Durchführung einer Übereinstimmung ignoriert. Standardmäßig auffalsegesetzt. ignoreMethod-
Ein boolescher Wert, der, wenn auf
truegesetzt, Übereinstimmungsoperationen daran hindert, diehttp-Methode desRequestzu validieren (normalerweise sind nurGETundHEADerlaubt). Standardmäßig auffalsegesetzt. ignoreVary-
Ein boolescher Wert, der, wenn er auf
truegesetzt ist, der Übereinstimmungsoperation sagt, dass keineVARY-Header-Übereinstimmung durchgeführt werden soll — d.h. wenn die URL übereinstimmt, erhalten Sie eine Übereinstimmung, unabhängig davon, ob dasResponseObjekt einenVARY-Header hat. Standardmäßig auffalsegesetzt.
Rückgabewert
Ein Promise, das auf die erste Response aufgelöst wird, die der Anfrage entspricht, oder auf undefined, wenn keine Übereinstimmung gefunden wurde.
Hinweis:
Cache.match() ist im Grunde identisch mit Cache.matchAll(), außer dass es anstelle von einer Auflösung mit einem Array aller übereinstimmenden Antworten nur mit der ersten übereinstimmenden Antwort aufgelöst wird (also response[0]).
Beispiele
Dieses Beispiel stammt aus dem benutzerdefinierten Offline-Seiten Beispiel (Live-Demo). Es verwendet einen Cache, um ausgewählte Daten bereitzustellen, wenn eine Anfrage fehlschlägt. Eine catch()-Klausel wird ausgelöst, wenn der Aufruf von fetch() eine Ausnahme auslöst. Innerhalb der catch()-Klausel wird match() verwendet, um die richtige Antwort zurückzugeben.
In diesem Beispiel werden nur HTML-Dokumente, die mit dem GET HTTP-Verb abgerufen werden, im Cache gespeichert. Wenn unsere if ()-Bedingung falsch ist, wird dieser Fetch-Handler die Anfrage nicht abfangen. Wenn andere Fetch-Handler registriert sind, haben sie die Möglichkeit, event.respondWith() aufzurufen. Wenn keine Fetch-Handler event.respondWith() aufrufen, wird die Anfrage vom Browser bearbeitet, als ob kein Service Worker beteiligt wäre. Wenn fetch() eine gültige HTTP-Antwort mit einem Antwortcode im Bereich von 4xx oder 5xx zurückgibt, wird catch() NICHT aufgerufen.
self.addEventListener("fetch", (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").includes("text/html")
) {
console.log("Handling fetch event for", event.request.url);
event.respondWith(
fetch(event.request).catch((e) => {
console.error("Fetch failed; returning offline page instead.", e);
return caches
.open(OFFLINE_CACHE)
.then((cache) => cache.match(OFFLINE_URL));
}),
);
}
});
Spezifikationen
| Specification |
|---|
| Service Workers # cache-match |
Browser-Kompatibilität
Loading…