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 der CacheStorage Schnittstelle überprüft, ob eine gegebene Request oder 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 sich zu undefined auflöst, wenn keine Übereinstimmung 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 praktische Methode. Funktional gleichwertig ist es, cache.match() auf jedem Cache (in der Reihenfolge, die von caches.keys() zurückgegeben wird) aufzurufen, bis eine Response zurückgegeben wird.

Syntax

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 angibt, ob der Abgleichsprozess die Abfragezeichenfolge in der URL ignorieren soll. Zum Beispiel, wenn auf true gesetzt, würde der ?value=bar Teil von http://foo.com/?value=bar beim Abgleich ignoriert werden. Standardmäßig ist dies false.
ignoreMethod: Ein boolescher Wert, der, wenn auf true gesetzt, verhindert, dass Abgleichsoperationen die Request http Methode überprüfen (normalerweise sind nur GET und HEAD erlaubt). Standardmäßig ist dies false.
ignoreVary: Ein boolescher Wert, der, wenn auf true gesetzt, die Abgleichsoperation anweist, keine VARY Header-Überprüfung durchzuführen. Mit anderen Worten, wenn die URL übereinstimmt, erhalten Sie eine Übereinstimmung, unabhängig davon, ob das Response Objekt einen VARY Header hat oder nicht. Standardmäßig ist dies false.
cacheName: Ein String, der einen spezifischen Cache repräsentiert, in dem gesucht werden soll.

Rückgabewert

Ein Promise, das sich zur übereinstimmenden Response auflöst. Wenn keine übereinstimmende Antwort für die angegebene Anfrage gefunden wird, löst sich das Promise mit undefined auf.

Beispiele

Dieses Beispiel stammt aus dem MDN einfachen Service Worker Beispiel (siehe einfachen Service Worker live laufen). Hier warten wir darauf, dass ein FetchEvent ausgelöst wird. Wir konstruieren eine benutzerdefinierte Antwort wie folgt:

Überprüfen Sie, ob eine Übereinstimmung für die Anfrage im CacheStorage mithilfe von CacheStorage.match() gefunden wird. Falls ja, liefern Sie diese.
Falls nicht, öffnen Sie den v1 Cache mit open(), setzen die Standard-Netzwerkanfrage mit Cache.put() in den Cache und geben einen Klon der Standard-Netzwerkanfrage mit return response.clone() zurück. Letzteres ist nötig, da put() den Antwortkörper verbraucht.
Falls dies fehlschlägt (z. B. weil das Netzwerk ausgefallen ist), geben Sie eine Ersatzantwort zurück.

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;
      }
      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