CacheStorage: 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 CacheStorage-Interfaces überprüft, ob ein gegebener Request oder eine URL-Zeichenkette ein Schlüssel für eine gespeicherte Response ist. Diese Methode gibt ein Promise für eine Response zurück oder ein Promise, das auf undefined aufgelöst wird, wenn kein Treffer gefunden wird.

Sie können auf CacheStorage über die Window.caches-Eigenschaft in Fenstern oder über die WorkerGlobalScope.caches-Eigenschaft in Workern zugreifen.

Cache-Objekte werden in der Reihenfolge ihrer Erstellung durchsucht.

Note: caches.match() ist eine Komfortmethode. Eine gleichwertige Funktionalität besteht darin, cache.match() auf jedem Cache aufzurufen (in der Reihenfolge, die von caches.keys() zurückgegeben wird), bis eine Response zurückgegeben wird.

Syntax

js
match(request)
match(request, options)

Parameter

request

Der Request, den Sie abgleichen möchten. Dies kann ein Request-Objekt oder eine URL-Zeichenkette sein.

options Optional

Ein Objekt, dessen Eigenschaften steuern, wie das Matching in der match-Operation durchgeführt wird. Die verfügbaren Optionen sind:

ignoreSearch

Ein boolescher Wert, der festlegt, ob der Abgleichsprozess die Abfragezeichenfolge in der URL ignorieren soll. Wenn beispielsweise true gesetzt ist, würde der Teil ?value=bar von http://foo.com/?value=bar bei der Durchführung eines Abgleichs ignoriert werden. Standardmäßig ist dieser auf false gesetzt.

ignoreMethod

Ein boolescher Wert, der, wenn auf true gesetzt, verhindert, dass Abgleichsoperationen die http-Methode des Request validieren (normalerweise sind nur GET und HEAD erlaubt). Standardmäßig ist dieser auf false gesetzt.

ignoreVary

Ein boolescher Wert, der, wenn auf true gesetzt, der Abgleichsoperation vorschreibt, keine VARY-Header-Überprüfung durchzuführen. Mit anderen Worten, wenn die URL übereinstimmt, erhalten Sie einen Treffer, unabhängig davon, ob das Response-Objekt einen VARY-Header hat oder nicht. Standardmäßig ist dieser auf false gesetzt.

cacheName

Eine Zeichenkette, die einen spezifischen Cache repräsentiert, innerhalb dessen gesucht werden soll.

Rückgabewert

Ein Promise, das zur übereinstimmenden Response aufgelöst wird. Wenn keine übereinstimmende Antwort auf die angegebene Anfrage gefunden wird, wird das Promise mit undefined aufgelöst.

Beispiele

Dieses Beispiel stammt aus dem MDN einfaches Service Worker Beispiel (siehe einfacher Service Worker live). Hier warten wir auf ein FetchEvent. Wir konstruieren eine benutzerdefinierte Antwort wie folgt:

  1. Überprüfen, ob ein Treffer für die Anfrage im CacheStorage mit CacheStorage.match() gefunden wird. Falls ja, dieser wird verwendet.
  2. Wenn nicht, öffnen Sie den v1 Cache mit open(), legen Sie die Standardnetzwerkanfrage mit Cache.put() in den Cache und geben Sie mit return response.clone() einen Klon der Standardnetzwerkanfrage zurück. Letzteres ist notwendig, da put() den Antwortkörper verbraucht.
  3. Wenn dies fehlschlägt (z.B. weil das Netzwerk ausgefallen ist), geben Sie eine Ersatzantwort zurück.
js
self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      // caches.match() always resolves
      // but in case of success response will have value
      if (response !== undefined) {
        return response;
      } else {
        return fetch(event.request)
          .then((response) => {
            // response may be used only once
            // we need to save clone to put one copy in cache
            // and serve second one
            let responseClone = response.clone();

            caches.open("v1").then((cache) => {
              cache.put(event.request, responseClone);
            });
            return response;
          })
          .catch(() => caches.match("/gallery/myLittleVader.jpg"));
      }
    }),
  );
});

Spezifikationen

Specification
Service Workers
# cache-storage-match

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch