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 der Cache-Schnittstelle gibt ein Promise zurück, das sich auf die Response auflöst, die mit der ersten übereinstimmenden Anfrage im Cache-Objekt verknüpft ist. Wenn keine Übereinstimmung gefunden wird, löst sich das Promise in undefined auf.

Syntax

js
match(request)
match(request, options)

Parameter

request

Die Request, für die Sie versuchen, Antworten im Cache zu finden. Dies kann ein Request-Objekt oder eine URL-Zeichenkette sein.

options Optional

Ein Objekt, das Optionen für die match-Operation festlegt. Die verfügbaren Optionen sind:

ignoreSearch

Ein boolescher Wert, der angibt, ob die Abfragezeichenfolge in der URL ignoriert werden soll. Wenn zum Beispiel true gesetzt ist, würde der ?value=bar-Teil von http://foo.com/?value=bar bei der Durchführung einer Übereinstimmung ignoriert werden. Standardmäßig ist es false.

ignoreMethod

Ein boolescher Wert, der, wenn er auf true gesetzt ist, verhindert, dass Matching-Operationen die HTTP-Methode der Request validieren (normalerweise sind nur GET und HEAD erlaubt). Standardmäßig ist es false.

ignoreVary

Ein boolescher Wert, der, wenn auf true gesetzt, der Übereinstimmungsoperation mitteilt, kein VARY- Header-Matching durchzuführen – d. h., wenn die URL übereinstimmt, erhalten Sie eine Übereinstimmung, unabhängig davon, ob das Response-Objekt einen VARY-Header hat. Standardmäßig ist es false.

Rückgabewert

Ein Promise, das sich auf die erste Response auflöst, die der Anfrage entspricht, oder auf undefined, wenn keine Übereinstimmung gefunden wird.

Note: Cache.match() ist im Wesentlichen identisch mit Cache.matchAll(), außer dass es sich nicht mit einem Array aller übereinstimmenden Antworten auflöst, sondern nur mit der ersten übereinstimmenden Antwort (d. h. 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 korrekte Antwort zurückzugeben.

In diesem Beispiel werden nur HTML-Dokumente, die mit dem HTTP-Verb GET abgerufen werden, im Cache gespeichert. Wenn unsere if ()-Bedingung falsch ist, dann fängt dieser Fetch-Handler die Anfrage nicht ab. Wenn andere Fetch-Handler registriert sind, erhalten sie die Gelegenheit, event.respondWith() aufzurufen. Wenn keine Fetch-Handler event.respondWith() aufrufen, wird die Anfrage vom Browser so behandelt, 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.

js
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

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
match

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Siehe auch