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 Schnittstelle überprüft, ob eine gegebene Request oder URL-Zeichenfolge 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.

Hinweis:>caches.match() ist eine bequeme Methode. Eine gleichwertige Funktionalität besteht darin, cache.match() auf jedem Cache (in der Reihenfolge der von caches.keys() zurückgegebenen Werte) aufzurufen, bis eine Response zurückgegeben wird.

Syntax

match(request)
match(request, options)

Parameter

request

Die Request, die Sie abgleichen möchten. Dies kann ein Request-Objekt oder eine URL-Zeichenfolge sein.

options Optional

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

ignoreSearch: Ein boolescher Wert, der angibt, ob der Abgleichsvorgang den Abfrage-String in der URL ignorieren soll. Zum Beispiel, wenn auf true gesetzt, würde der ?value=bar Teil von http://foo.com/?value=bar ignoriert, wenn ein Abgleich durchgeführt wird. Standardmäßig ist dies false.
ignoreMethod: Ein boolescher Wert, der, wenn auf true gesetzt, verhindert, dass die Abgleichsoperationen die http-Methode der Request validieren (normalerweise sind nur GET und HEAD erlaubt). Standardmäßig ist dies false.
ignoreVary: Ein boolescher Wert, der, wenn er auf true gesetzt ist, der Abgleichsoperation mitteilt, das VARY-Header-Matching nicht 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 dies false.
cacheName: Eine Zeichenfolge, die einen bestimmten Cache zum Durchsuchen darstellt.

Rückgabewert

Ein Promise, das sich zu der übereinstimmenden Response auflöst. Falls keine übereinstimmende Antwort für die angegebene Anfrage gefunden wird, wird das Promise mit undefined aufgelöst.

Beispiele

Dieses Beispiel stammt aus dem MDN einfachen Service Worker Beispiel (siehe einfacher Service Worker läuft live). Hier warten wir darauf, dass ein FetchEvent ausgelöst wird. Wir konstruieren eine benutzerdefinierte Antwort folgendermaßen:

Überprüfen Sie, ob ein Treffer für die Anfrage im CacheStorage gefunden wird, indem CacheStorage.match() verwendet wird. Falls vorhanden, wird dieser bedient.
Falls nicht, öffnen Sie den v1-Cache mit open(), legen Sie die Standard-Netzwerkanfrage mit Cache.put() in den Cache und geben Sie eine Kopie der Standard-Netzwerkanfrage zurück, indem Sie return response.clone() verwenden. Letzteres ist notwendig, weil put() den Antwortkörper konsumiert.
Wenn 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