Cache.match()

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La méthode match() de l'interface Cache retourne une Promesse qui est résolue en une Réponse associée à la première requête qui match dans l'objet Cache. Si aucune requête n'est trouvée, la Promesse est résolue en undefined.

Syntaxe

cache.match(request,{options}).then(function(response) {
  // faire quelque chose avec la réponse
});

Paramètres

request
La Request à trouver dans le Cache.
options Facultatif
Un objet qui définit des options pour l'opération de match. Les options disponibles sont les suivantes :
  • ignoreSearch: Un Boolean qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à true, la partie ?value=bar de l'url http://foo.com/?value=bar sera ignorée lors du matching. Est à false par défaut.
  • ignoreMethod: Un Boolean qui, quand mis à true, empêche les opérations de matching de valider la méthode HTTP de la Requête (en temps normal, seules GET et HEAD sont autorisées.) Est à  false par défaut.
  • ignoreVary: Un Boolean qui, quand mis à true, indique à l'opération de matching de ne pas effectuer le matching VARY des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la Réponse ait un header VARY ou non. Est à false par défaut.

Retour

Une Promesse qui est résolue en la première Réponse qui match la requête, ou en undefined si aucune requête n'est trouvée.

Note: Cache.match() est quasiment identique à Cache.matchAll(), si ce n'est qu'elle est résolue en response[0] (la première réponse qui matche) plutôt que response[] (un tableau de toutes les réponses qui matchent).

Exemples

Cet exemple est extrait de l'exemple Page hors ligne custom (demo).

L'exemple suivant se sert d'un cache pour fournir les données demandées même quand une requête échoue. Une clause catch() est déclenchée quand l'appel à fetch() lève une exception. A l'intérieur de la clause catch()match() est utilisée to pour retourner la réponse appropriée.

Dans cet exemple, nous avons décidé que seul les documents HTML récupérés via le verbe HTTP GET seront mis en cache. Si notre condition if() est false, le gestionnaire fetch n'intercepte pas la requête. Si d'autres gestionnaires fetch sont enregistrés, ils ont une occasion d'appeler event.respondWith(). Si aucun gestionnaire fetch ne décide d'appeler event.respondWith(), la requête sera gérée par le navigateur comme si les service workers n'avaient pas existé. Si fetch() retourne une réponse HTTP valide avec un code réponse dans les 4xx ou 5xx, la clause catch() ne sera PAS appelée. 

self.addEventListener('fetch', function(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').indexOf('text/html') !== -1) {
    console.log('Handling fetch event for', event.request.url);
    event.respondWith(
      fetch(event.request).catch(function(e) {
        console.error('Fetch failed; returning offline page instead.', e);
        return caches.open(OFFLINE_CACHE).then(function(cache) {
          return cache.match(OFFLINE_URL);
        });
      })
    );
  }
});

Spécifications

Specification Statut Commentaire
Service Workers
La définition de 'Cache match' dans cette spécification.
Version de travail Définition initiale.

Compatibilités des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
match
Expérimentale
Chrome Support complet 43Edge Support complet 16Firefox Support complet 39
Notes
Support complet 39
Notes
Notes Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE Aucun support NonOpera Support complet 30Safari Support complet 11WebView Android Support complet 43Chrome Android Support complet 43Firefox Android Support complet 39Opera Android Support complet 30Safari iOS Support complet 11Samsung Internet Android Support complet 4.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi