Cache.match()

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

Syntaxe

cache.match(request,{options}).then(function(response) {
  //do something with the response
});

Retour

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

Paramètres

request

La Request à trouver dans le Cache.

options Facultatif

Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération de delete. Les options disponibles sont :

• 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 https://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 Request (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 Response ait un header VARY ou non. Est à false par défaut.
• cacheName: Une DOMString qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par Cache.match()

 

Exemples

Cet exemple est extrait de l'exemple Custom offline page (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

Compatibilités des navigateurs

[1] Le paramètre options ne supporte que cacheName. 

Voir aussi

• Utilisation des Service Workers
• Cache
• WorkerGlobalScope.caches