From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/api/cache/add/index.html | 116 +++++++++++++++++++++ files/fr/web/api/cache/addall/index.html | 118 ++++++++++++++++++++++ files/fr/web/api/cache/delete/index.html | 87 ++++++++++++++++ files/fr/web/api/cache/index.html | 156 +++++++++++++++++++++++++++++ files/fr/web/api/cache/keys/index.html | 96 ++++++++++++++++++ files/fr/web/api/cache/match/index.html | 107 ++++++++++++++++++++ files/fr/web/api/cache/matchall/index.html | 93 +++++++++++++++++ files/fr/web/api/cache/put/index.html | 119 ++++++++++++++++++++++ 8 files changed, 892 insertions(+) create mode 100644 files/fr/web/api/cache/add/index.html create mode 100644 files/fr/web/api/cache/addall/index.html create mode 100644 files/fr/web/api/cache/delete/index.html create mode 100644 files/fr/web/api/cache/index.html create mode 100644 files/fr/web/api/cache/keys/index.html create mode 100644 files/fr/web/api/cache/match/index.html create mode 100644 files/fr/web/api/cache/matchall/index.html create mode 100644 files/fr/web/api/cache/put/index.html (limited to 'files/fr/web/api/cache') diff --git a/files/fr/web/api/cache/add/index.html b/files/fr/web/api/cache/add/index.html new file mode 100644 index 0000000000..25846672e0 --- /dev/null +++ b/files/fr/web/api/cache/add/index.html @@ -0,0 +1,116 @@ +--- +title: Cache.add() +slug: Web/API/Cache/add +tags: + - API + - Add + - Cache + - Experimental + - Méthode + - Reference + - Service Worker + - Service worker API + - ServiceWorker +translation_of: Web/API/Cache/add +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

La méthode add() de l'interface {{domxref("Cache")}} accepte une URL, la récupère, et ajoute l'objet réponse qui en résulte dans le cache. La méthode add() est équivalent au code suivant :

+ +
fetch(url).then(function(response) {
+  if (!response.ok) {
+    throw new TypeError('bad response status');
+  }
+  return cache.put(url, response);
+})
+ +

Pour des opérations plus complexes, il faut utiliser {{domxref("Cache.put","Cache.put()")}} directement.

+ +
+

Note: add() écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête.

+
+ +

Syntaxe

+ +
cache.add(request).then(function() {
+  //request a été ajoutée au cache
+});
+
+ +

Paramètres

+ +
+
request
+
La requête à mettre en cache. Ce paramètre peut être un objet {{domxref("Request", "Requête")}} ou une URL.
+
+ +

Retour

+ +

Une {{jsxref("Promise", "Promesse")}} qui est résolue en void.

+ +

Exceptions

+ + + + + + + + + + + + + + +
ExceptionArrive quand
TypeError +

Le schéma d'URL n'est pas http ou https.

+ +

Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui a échoué.) Cela peut arriver si la requête échoue, mais également si la requête est une cross-origin no-cors (auquel cas le statut retourné est systématiquement 0.)

+
+ +

Exemples

+ +

Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser {{domxref("Cache.add")}} pour y ajouter des ressources.

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.add('/sw-test/index.html');
+    })
+  );
+});
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cache-add', 'Cache: add')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.Cache.add")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/cache/addall/index.html b/files/fr/web/api/cache/addall/index.html new file mode 100644 index 0000000000..9f43ef9387 --- /dev/null +++ b/files/fr/web/api/cache/addall/index.html @@ -0,0 +1,118 @@ +--- +title: Cache.addAll() +slug: Web/API/Cache/addAll +tags: + - API + - Cache + - Experimental + - Méthode + - Reference + - Service Worker + - Service worker API + - ServiceWorker + - addAll +translation_of: Web/API/Cache/addAll +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

La méthode addAll() de l'interface {{domxref("Cache")}} accepte un tableau d'URLS, les récupères, et ajoute les objets réponse qui en résultent au cache en question. Les objets requêtes crées pendant la phase de récupération deviennent des clés vers les opérations de réponse stockées. 

+ +
+

Note: addAll() écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à une requête, mais échouera si l'opération put() ainsi créée devrait engendrer l'éffacement d'une entrée cache créée par la même méthode addAll().

+
+ +

Syntaxe

+ +
cache.addAll(requests[]).then(function() {
+  //requests have been added to the cache
+});
+
+ +

Paramètres

+ +
+
requests
+
Un tableau d'objets {{domxref("Request", "Requête")}} à ajouter au cache.
+
+ +

Retour

+ +

Une {{jsxref("Promise", "Promesse")}} qui est résolue en void.

+ +

Exceptions

+ + + + + + + + + + + + + + +
ExceptionArrive quand
TypeError +

Le schéma d'URL n'est pas http ou https.

+ +

Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui a échoué.) Cela peut arriver si la requête échoue, mais également si la requête est une cross-origin no-cors (auquel cas le statut retourné est systématiquement 0.)

+
+ +

Exemples

+ +

Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser addAll() pour y ajouter une série de ressources.

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cache-addall', 'Cache: addAll')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.Cache.addAll")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/cache/delete/index.html b/files/fr/web/api/cache/delete/index.html new file mode 100644 index 0000000000..332a9f984a --- /dev/null +++ b/files/fr/web/api/cache/delete/index.html @@ -0,0 +1,87 @@ +--- +title: Cache.delete() +slug: Web/API/Cache/delete +tags: + - API + - Cache + - Experimental + - Méthode + - Reference + - Service Workers + - ServiceWorker + - delete +translation_of: Web/API/Cache/delete +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

La méthode delete() de l'interface {{domxref("Cache")}} cherche l'entrée {{domxref("Cache")}} dont la clé est la requête passée en argument, et retourne une {{jsxref("Promise", "Promesse")}}. Si une entrée {{domxref("Cache")}} est trouvée, elle est supprimée, et la promesse est résolue à true. Dans le cas contraire, la promesse est résolue à false.

+ +

Syntaxe

+ +
cache.delete(request,{options}).then(function(true) {
+  //your cache entry has been deleted
+});
+
+ +

Paramètres

+ +
+
request
+
La {{domxref("Request", "Requête")}} à supprimer.
+
options {{optional_inline}}
+
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 {{domxref("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 {{domxref("Boolean")}} qui, quand mis à true, empêche les opérations de matching de valider la méthode HTTP de la {{domxref("Request", "Requête")}} (en temps normal, seules GET et HEAD sont autorisées.) Est à  false par défaut.
    • +
  • ignoreVary: Un {{domxref("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 {{domxref("Response", "Réponse")}} ait un header VARY ou non. Est à false par défaut.
    • +
  • cacheName: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par Cache.delete().
    • +
+
+
+ +

Retour

+ +

Une {{jsxref("Promise", "Promesse")}} qui est résolue à true si l'entrée de cache est supprimée, ou à false dans le cas contraire.

+ +

Exemples

+ +
caches.open('v1').then(function(cache) {
+  cache.delete('/images/image.png').then(function(response) {
+    someUIUpdateFunction();
+  });
+})
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('Service Workers', '#dom-cache-delete', 'Cache: delete')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilités des navigateurs

+ +
+
+ + +

{{Compat("api.Cache.delete")}}

+
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/cache/index.html b/files/fr/web/api/cache/index.html new file mode 100644 index 0000000000..6f5843d631 --- /dev/null +++ b/files/fr/web/api/cache/index.html @@ -0,0 +1,156 @@ +--- +title: Cache +slug: Web/API/Cache +tags: + - API + - API Cache + - API Service worker + - Cache + - Interface + - Reference + - Service Workers + - Stockage + - hors ligne +translation_of: Web/API/Cache +--- +

{{APIRef("Service Workers API")}} {{SeeCompatTable}}

+ +

L'interface Cache fournit un mécanisme de stockage pour les paires d'objets Request/Response qui sont mises en cache, par exemple dans le cadre du cycle de vie {{domxref("ServiceWorker")}}. Il est à noter que l'interface Cache est exposée à des portées fenêtrées ainsi qu'à des service workers. Vous n'êtes pas obligé de l'utiliser avec des services workers, même si elle est définie dans la spécification relative aux services workers.

+ +

Une origine peut avoir plusieurs objets nommés Cache. Vous êtes responsable de l'implémentation de la manière dont votre script (par exemple dans un {{domxref("ServiceWorker")}}) gère les mises à jour du cache. Les éléments d'un cache ne sont pas mis à jour, sauf demande explicite ; ils n'expirent pas, sauf s'ils sont supprimés. Utilisez {{domxref("CacheStorage.open", "CacheStorage.open()")}} pour ouvrir un objet Cache spécifique et appelez ensuite l'une des méthodes Cache pour maintenir le Cache.

+ +

Vous êtes également responsable de la purge périodique des entrées du cache. Chaque navigateur a une limite stricte sur la quantité de mémoire cache qu'une origine donnée peut utiliser. Les estimations de l'utilisation du quota de cache sont disponibles via le lien {{domxref("StorageEstimate")}} API. Le navigateur fait de son mieux pour gérer l'espace disque, mais il peut supprimer le stockage en cache d'une origine. Le navigateur supprime généralement toutes les données d'une origine ou aucune des données d'une origine. Veillez à nommer les caches et à n'utiliser les caches qu'à partir de la version du script sur laquelle ils peuvent fonctionner en toute sécurité. Pour plus d'informations, voir Suppression des anciens caches.

+ +
+

Note : Les implémentations initiales du cache (dans Blink et Gecko) résolvent les engagements {{domxref("Cache.add()")}}, {{domxref("Cache.addAll()")}}, et {{domxref("Cache.put()")}} lorsque le corps de la réponse est entièrement écrit sur le stockage. Des versions plus récentes de la spécification précisent que le navigateur peut résoudre la promesse dès que l'entrée est enregistrée dans la base de données, même si le corps de réponse est encore en cours d'écriture.

+
+ +
+

Note : L'algorithme des correspondances de clés est dépendant de la valeur de l'en-tête VARY. Ainsi, pour faire correspondre une nouvelle clé, il faut examiner à la fois la clé et la valeur des entrées dans le Cache.

+
+ +
+

Note : L'API de mise en cache n'honore pas les en-têtes de mise en cache HTTP.

+
+ +

Méthodes

+ +
+
{{domxref("Cache.match", "Cache.match(request, options)")}} {{experimental_inline}}
+
Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en une réponse associée à la première requête correspondante dans l'objet {{domxref("Cache")}}.
+
{{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}} {{experimental_inline}}
+
Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en un tableau de toutes les requêtes correspondantes dans l'objet {{domxref("Cache")}}.
+
{{domxref("Cache.add", "Cache.add(request)")}} {{experimental_inline}}
+
Prend une URL, la récupère et ajoute l'objet réponse associé au cache donné. C'est une fonctionnalité équivalente à l'appel de fetch(), puis à l'utilisation de Cache.put() pour ajouter les résultats  au cache.
+
{{domxref("Cache.addAll", "Cache.addAll(requests)")}} {{experimental_inline}}
+
Prend un tableau d'URLs, les récupère, et ajoute les objets réponses associés au cache donné.
+
{{domxref("Cache.put", "Cache.put(request, response)")}} {{experimental_inline}}
+
Prend à la fois une requête et sa réponse et l'ajoute au cache donné.
+
{{domxref("Cache.delete", "Cache.delete(request, options)")}} {{experimental_inline}}
+
Trouve l'entrée {{domxref("Cache")}} dont la clé est la requête, et le cas échéant, supprime l'entrée {{domxref("Cache")}} et retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout à true. Si aucune entrée {{domxref("Cache")}} n'est trouvée, elle retourne false.
+
{{domxref("Cache.keys", "Cache.keys(request, options)")}} {{experimental_inline}}
+
Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en un tableau clés {{domxref("Cache")}}.
+
+ +

Exemples

+ +

Cet extrait de code provient de l'exemple de mise en cache sélective. (voir selective caching live) Le code utilise {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} pour ouvrir tous les objets {{domxref("Cache")}} avec un en-tête Content-Type qui débute par font/.

+ +

Le code utilise alors {{domxref("Cache.match", "Cache.match(request, options)")}} pour voir s'il y a déjà une fonte correspondante dans le cache, et le cas échéant, la retourne. S'il n'y a pas de correspondance, le code récupère la fonte à partir du réseau et utilise {{domxref("Cache.put","Cache.put(request, response)")}} pour mettre en cache la ressource récupérée.

+ +

Le code gère les exceptions déclenchées par l'opération de {{domxref("Globalfetch.fetch","fetch()")}}. A noter qu'une réponse HTTP en erreur (e.g., 404) ne déclenchera pas une exception. Elle retournera un objet de réponse normal qui dispose du code d'erreur approprié.

+ +

Cet extrait de code illustre également une bonne pratique pour versionner les caches utilisés par le service worker. Bien qu'il y ait seulement un cache dans cet exemple, la même approche peut être utilisée pour des caches multiples. Il associe un identifiant  court avec un nom de cache versionné et spécifique. Le code supprime aussi tous les caches qui ne sont pas nommés dans CURRENT_CACHES.

+ +
Note: In Chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the service-worker.js script is performing.
+ +
var CACHE_VERSION = 1;
+
+// Shorthand identifier mapped to specific versioned cache.
+var CURRENT_CACHES = {
+  font: 'font-cache-v' + CACHE_VERSION
+};
+
+self.addEventListener('activate', function(event) {
+  var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
+    return CURRENT_CACHES[key];
+  });
+
+  // Active worker won't be treated as activated until promise resolves successfully.
+  event.waitUntil(
+    caches.keys().then(function(cacheNames) {
+      return Promise.all(
+        cacheNames.map(function(cacheName) {
+          if (expectedCacheNames.indexOf(cacheName) == -1) {
+            console.log('Deleting out of date cache:', cacheName);
+
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  console.log('Handling fetch event for', event.request.url);
+
+  event.respondWith(
+
+    // Opens Cache objects that start with 'font'.
+    caches.open(CURRENT_CACHES['font']).then(function(cache) {
+      return cache.match(event.request).then(function(response) {
+        if (response) {
+          console.log(' Found response in cache:', response);
+
+          return response;
+        }
+      }).catch(function(error) {
+
+        // Handles exceptions that arise from match() or fetch().
+        console.error('  Error in fetch handler:', error);
+
+        throw error;
+      });
+    })
+  );
+});
+ +

Storing cookies in Caches

+ +

L'API Fetch exige que les en-têtes {{httpheader("Set-Cookie")}} soient supprimés avant de renvoyer un objet {{domxref("Response")}} à partir de {{domxref("WindowOrWorkerGlobalScope", "fetch()")}}. Ainsi, une réponse stockée dans un cache ne contiendra pas d'en-têtes.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#cache', 'Cache')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.Cache")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/cache/keys/index.html b/files/fr/web/api/cache/keys/index.html new file mode 100644 index 0000000000..9852434719 --- /dev/null +++ b/files/fr/web/api/cache/keys/index.html @@ -0,0 +1,96 @@ +--- +title: Cache.keys() +slug: Web/API/Cache/keys +tags: + - API + - Cache + - Experimental + - Méthode + - Reference + - Service Workers + - ServiceWorker + - keys +translation_of: Web/API/Cache/keys +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

La méthode keys() de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}.

+ +

Les requêtes sont retournées dans le même ordre que l'ordre d'insertion.

+ +
+

Note: Les requêtes avec des URLs déjà présentes mais des headers différents peuvent être retournées si leurs réponses comportent le header VARY.

+
+ +

Syntaxe

+ +
cache.keys(request,{options}).then(function(response) {
+  // fait quelque chose avec votre tableau de réponses
+});
+
+ +

Paramètres

+ +
+
request {{optional_inline}}
+
La {{domxref("Request", "Requête")}} à retourner, si une clé en particulier est désirée.
+
options {{optional_inline}}
+
Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération keys. Les options disponibles sont :
+
+
    +
  • ignoreSearch: Un {{domxref("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 {{domxref("Boolean")}} qui, quand mis à true, empêche les opérations de matching de valider la méthode HTTP de la {{domxref("Request", "Requête")}} (en temps normal, seules GET et HEAD sont autorisées). Est à  false par défaut.
    • +
  • ignoreVary: Un {{domxref("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 {{domxref("Response", "Réponse")}} ait un header VARY ou non. Est à false par défaut.
    • +
  • cacheName: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par Cache.keys().
    • +
+
+
+ +

Retour

+ +

Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}.

+ +

Exemples

+ +
caches.open('v1').then(function(cache) {
+  cache.keys().then(function(keys) {
+    keys.forEach(function(request, index, array) {
+      cache.delete(request);
+    });
+  });
+})
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cache-keys', 'Cache: keys')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilités des navigateurs

+ +
+
+ + +

{{Compat("api.Cache.keys")}}

+
+
+ +

Voir aussi

+ + 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 +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

La méthode match() 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")}}.

+ +

Syntaxe

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

Paramètres

+ +
+
request
+
La {{domxref("Request")}} à trouver dans le {{domxref("Cache")}}.
+
options {{optional_inline}}
+
Un objet qui définit des options pour l'opération de match. Les options disponibles sont les suivantes : +
    +
  • ignoreSearch: Un {{domxref("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 {{domxref("Boolean")}} qui, quand mis à true, empêche les opérations de matching de valider la méthode HTTP de la {{domxref("Request", "Requête")}} (en temps normal, seules GET et HEAD sont autorisées.) Est à  false par défaut.
    • +
  • ignoreVary: Un {{domxref("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 {{domxref("Response", "Réponse")}} ait un header VARY ou non. Est à false par défaut.
    • +
+
+
+ +

Retour

+ +

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.

+ +
+

Note: Cache.match() est quasiment identique à {{domxref("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

+ + + + + + + + + + + + + + +
SpecificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cache-match', 'Cache match')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilités des navigateurs

+ +
+
+ + +

{{Compat("api.Cache.match")}}

+
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/cache/matchall/index.html b/files/fr/web/api/cache/matchall/index.html new file mode 100644 index 0000000000..4ea5b00be0 --- /dev/null +++ b/files/fr/web/api/cache/matchall/index.html @@ -0,0 +1,93 @@ +--- +title: Cache.matchAll() +slug: Web/API/Cache/matchAll +tags: + - API + - Cache + - Experimental + - Méthode + - Reference + - Service Workers + - Service worker API + - ServiceWorker + - matchAll +translation_of: Web/API/Cache/matchAll +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

La méthode matchAll() de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}.

+ +

Syntaxe

+ +
cache.matchAll(request,{options}).then(function(response) {
+  // faire quelque chose avec le tableau des réponses
+});
+
+ +

Paramètres

+ +
+
request
+
La {{domxref("Request", "Requête")}} à trouver dans le {{domxref("Cache")}}.
+
options {{optional_inline}}
+
Un objet d'options vous permettant de définir des options de contrôle spécifiques pour la correspondance effectuée. Les options disponibles sont les suivantes : +
    +
  • ignoreSearch: Un {{domxref("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 {{domxref("Boolean")}} qui, quand mis à true, empêche les opérations de matching de valider la méthode HTTP de la {{domxref("Request", "Requête")}} (en temps normal, seules GET et HEAD sont autorisées.) Est à  false par défaut.
    • +
  • ignoreVary: Un {{domxref("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 {{domxref("Response", "Réponse")}} ait un header VARY ou non. Est à false par défaut.
    • +
+
+
+ +

Retour

+ +

Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}.

+ +
+

Note: {{domxref("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

+ +
caches.open('v1').then(function(cache) {
+  cache.matchAll('/images/').then(function(response) {
+    response.forEach(function(element, index, array) {
+      cache.delete(element);
+    });
+  });
+})
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cache-matchall', 'Cache: matchAll')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilités des navigateurs

+ +
+
+ + +

{{Compat("api.Cache.matchAll")}}

+
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/cache/put/index.html b/files/fr/web/api/cache/put/index.html new file mode 100644 index 0000000000..16dfeed1fb --- /dev/null +++ b/files/fr/web/api/cache/put/index.html @@ -0,0 +1,119 @@ +--- +title: Cache.put() +slug: Web/API/Cache/put +tags: + - API + - Cache + - Experimental + - Méthode + - Reference + - Service Workers + - Service worker API + - ServiceWorker + - put +translation_of: Web/API/Cache/put +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

La méthode put() de l'interface {{domxref("Cache")}} permet d'ajouter des paires clé/valeur à l'objet {{domxref("Cache")}} en cours.

+ +

Souvent, le comportement voulu est juste de {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} une ou plusieurs requête, et d'ajouter les résultats directement dans le cache. Dans ce type de cas, il est plus judicieux d'utiliser  {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}} , étant donné que ces méthodes sont des raccourcis pour une ou plusieurs de ces opérations :

+ +
fetch(url).then(function(response) {
+  if (!response.ok) {
+    throw new TypeError('Bad response status');
+  }
+  return cache.put(url, response);
+})
+ +
+

Note: put() écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête.

+
+ +
+

Note: Les implémentations initiales de Cache (à la fois dans Blink et Gecko) résolvent les promesses   {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, et {{domxref("Cache.put")}} quand le corps de la réponse est entièrement écrit en stockage.  Les versions plus récentes des spécifications sont plus précises en déclarant que le navigateur peut résoudre ces promesses dès que l'entrée est enregistrée en base de donnée, même si le reste de la requête est encore en train d'arriver.

+
+ +
+

Note: Depuis Chrome 46, l'API Cache ne stocke que les requêtes depuis des origines sécurisées, à savoir celles servies en HTTPS.

+
+ +

Syntaxe

+ +
cache.put(request, response).then(function() {
+  // la paire requête/réponse a été ajoutée au cache
+});
+
+ +

Paramètres

+ +
+
request
+
La {{domxref("Request", "Requête")}} à ajouter au cache.
+
response
+
La {{domxref("Response", "Réponse")}} à associer à la requête.
+
+ +

Retour

+ +

Une {{jsxref("Promise", "Promesse")}} est retournée avec void.

+ +
+

Note: La promesse sera rompue avec un TypeError si le schéma d'URL n'est pas http ou https.

+
+ +

Exemples

+ +

Cet extrait de code est tiré du MDN sw-test example (lancez sw-test dans votre navigateur). On attend le déclenchement d'un {{domxref("FetchEvent")}}, puis l'on va retourner une réponse spéciale d'après la procédure suivante :

+ +
    +
  1. Vérifier si un match pour la requête a été trouvé dans le {{domxref("CacheStorage")}} grâce à  {{domxref("CacheStorage.match","CacheStorage.match()")}} . Si oui, servir cette réponse.
    2. +
  2. Sinon, ouvrir le cache v1 avec open(), insérer la requête réseau par défaut dans le cache via {{domxref("Cache.put","Cache.put()")}} , et retourner un clone de cette requête avec return response.clone() — nécessaire car put() détruit le corps de la réponse.
    3. +
  3. En cas d'échec (e.g., car le réseau est inaccessible), retourner une réponse de secours.
    4. +
+ +
var response;
+var cachedResponse = caches.match(event.request).catch(function() {
+  return fetch(event.request);
+}).then(function(r) {
+  response = r;
+  caches.open('v1').then(function(cache) {
+    cache.put(event.request, response);
+  });
+  return response.clone();
+}).catch(function() {
+  return caches.match('/sw-test/gallery/myLittleVader.jpg');
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cache-put', 'Cache: put')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.Cache.put")}}

+
+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf