diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/fr/web/api/cache/match/index.html | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/fr/web/api/cache/match/index.html')
-rw-r--r-- | files/fr/web/api/cache/match/index.html | 107 |
1 files changed, 107 insertions, 0 deletions
diff --git a/files/fr/web/api/cache/match/index.html b/files/fr/web/api/cache/match/index.html new file mode 100644 index 0000000000..bfb4f5c0c6 --- /dev/null +++ b/files/fr/web/api/cache/match/index.html @@ -0,0 +1,107 @@ +--- +title: Cache.match() +slug: Web/API/Cache/match +tags: + - API + - Cache + - Experimental + - Méthode + - Reference + - Service Workers + - Service worker API + - ServiceWorker + - match +translation_of: Web/API/Cache/match +--- +<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> + +<p>La méthode <strong><code>match()</code></strong> de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en une {{domxref("Response", "Réponse")}} associée à la première requête qui match dans l'objet {{domxref("Cache")}}. Si aucune requête n'est trouvée, la {{jsxref("Promise", "Promesse")}} est résolue en {{jsxref("undefined")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: js">cache.match(request,{options}).then(function(response) { + // faire quelque chose avec la réponse +}); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt>request</dt> + <dd>La {{domxref("Request")}} à trouver dans le {{domxref("Cache")}}.</dd> + <dt>options {{optional_inline}}</dt> + <dd>Un objet qui définit des options pour l'opération de <code>match</code>. Les options disponibles sont les suivantes : + <ul> + <li><code>ignoreSearch</code>: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à <code>true</code>, la partie <code>?value=bar</code> de l'url <code>http://foo.com/?value=bar</code> sera ignorée lors du matching. Est à <code>false</code> par défaut.</li> + <li><code>ignoreMethod</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true</code>, empêche les opérations de matching de valider la méthode <code>HTTP</code> de la {{domxref("Request", "Requête")}} (en temps normal, seules <code>GET</code> et <code>HEAD</code> sont autorisées.) Est à <code>false</code> par défaut.</li> + <li><code>ignoreVary</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true,</code> indique à l'opération de matching de ne pas effectuer le matching <code>VARY</code> des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header <code>VARY</code> ou non. Est à <code>false</code> par défaut.</li> + </ul> + </dd> +</dl> + +<h3 id="Retour">Retour</h3> + +<p>Une {{jsxref("Promise", "Promesse")}} qui est résolue en la première {{domxref("Response", "Réponse")}} qui match la requête, ou en {{jsxref("undefined")}} si aucune requête n'est trouvée.</p> + +<div class="note"> +<p><strong>Note</strong>: <code>Cache.match()</code> est quasiment identique à {{domxref("Cache.matchAll()")}}, si ce n'est qu'elle est résolue en <code>response[0]</code> (la première réponse qui matche) plutôt que <code>response[]</code> (un tableau de toutes les réponses qui matchent).</p> +</div> + +<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2> + +<p>Cet exemple est extrait de l'exemple <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js">Page hors ligne custom</a> (<a href="https://googlechrome.github.io/samples/service-worker/custom-offline-page/index.html">demo</a>).</p> + +<p>L'exemple suivant se sert d'un cache pour fournir les données demandées même quand une requête échoue. Une clause <code>catch()</code> est déclenchée quand l'appel à <code>fetch()</code> lève une exception. A l'intérieur de la clause <code>catch()</code>, <code>match()</code> est utilisée to pour retourner la réponse appropriée.</p> + +<p>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. <span style="line-height: 19.0909080505371px;">Si notre condition <code>if()</code> 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 <code>event.respondWith()</code>. Si aucun gestionnaire fetch ne décide d'appeler <code>event.respondWith()</code>, la requête sera gérée par le navigateur comme si les service workers n'avaient pas existé. Si </span><code style="font-style: normal; line-height: 19.0909080505371px;">fetch()</code><span style="line-height: 19.0909080505371px;"> retourne une réponse HTTP valide avec un code réponse dans les 4xx ou 5xx, la clause </span><code style="font-style: normal; line-height: 19.0909080505371px;">catch()</code><span style="line-height: 19.0909080505371px;"> ne sera PAS appelée. </span></p> + +<pre class="brush: js">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); + }); + }) + ); + } +});</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#dom-cache-match', 'Cache match')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2> + +<div> +<div> +<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("api.Cache.match")}}</p> +</div> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li> + <li>{{domxref("Cache")}}</li> + <li>{{domxref("WorkerGlobalScope.caches")}}</li> +</ul> |