diff options
Diffstat (limited to 'files/fr/web/api/cachestorage')
| -rw-r--r-- | files/fr/web/api/cachestorage/delete/index.md | 72 | ||||
| -rw-r--r-- | files/fr/web/api/cachestorage/has/index.md | 72 | ||||
| -rw-r--r-- | files/fr/web/api/cachestorage/index.md | 121 | ||||
| -rw-r--r-- | files/fr/web/api/cachestorage/keys/index.md | 68 | ||||
| -rw-r--r-- | files/fr/web/api/cachestorage/match/index.md | 103 | ||||
| -rw-r--r-- | files/fr/web/api/cachestorage/open/index.md | 76 |
6 files changed, 203 insertions, 309 deletions
diff --git a/files/fr/web/api/cachestorage/delete/index.md b/files/fr/web/api/cachestorage/delete/index.md index 6d088f5d7f..38318b5921 100644 --- a/files/fr/web/api/cachestorage/delete/index.md +++ b/files/fr/web/api/cachestorage/delete/index.md @@ -11,35 +11,33 @@ tags: - delete translation_of: Web/API/CacheStorage/delete --- -<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> +{{APIRef("Service Workers API")}}{{SeeCompatTable}} -<p>La fonction <code><strong>delete</strong></code><strong><code>()</code></strong> de l'interface {{domxref("CacheStorage")}} trouve l'objet {{domxref("Cache")}} correspondant à un <code>cacheName</code>, et si trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie <code>true</code>. Si aucun objet {{domxref("Cache")}} n'est trouvé, elle retourne <code>false</code>.</p> +La fonction **`delete`\*\***`()`\*\* de l'interface {{domxref("CacheStorage")}} trouve l'objet {{domxref("Cache")}} correspondant à un `cacheName`, et si trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie `true`. Si aucun objet {{domxref("Cache")}} n'est trouvé, elle retourne `false`. -<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p> +Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">caches.delete(<em>cacheName</em>).then(function(true) { - // le cache est maintenant supprimé -}); -</pre> + caches.delete(cacheName).then(function(true) { + // le cache est maintenant supprimé + }); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>cacheName</dt> - <dd>Le nom du cache que vous souhaitez supprimer.</dd> -</dl> +- cacheName + - : Le nom du cache que vous souhaitez supprimer. -<h3 id="Retour">Retour</h3> +### Retour -<p>Une {{jsxref("Promise", "Promesse")}} qui renvoie <code>true</code> si l'objet {{domxref("Cache")}} est trouvé et supprimé, <code>false</code> sinon.</p> +Une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si l'objet {{domxref("Cache")}} est trouvé et supprimé, `false` sinon. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens, inutilisés, caches avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec <code>delete().</code></p> +Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens, inutilisés, caches avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec `delete().` -<pre class="brush: js">this.addEventListener('activate', function(event) { +```js +this.addEventListener('activate', function(event) { var cacheWhitelist = ['v2']; event.waitUntil( @@ -51,35 +49,21 @@ translation_of: Web/API/CacheStorage/delete })); }) ); -});</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#cache-storage-delete', 'CacheStorage: delete')}}</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> +## Spécifications +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#cache-storage-delete', 'CacheStorage: delete')}} | {{Spec2('Service Workers')}} | Définition initiale. | +## Compatibilités des navigateurs -<p>{{Compat("api.CacheStorage.delete")}}</p> +{{Compat("api.CacheStorage.delete")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<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("WindowOrWorkerGlobalScope.caches")}}</li> -</ul> +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WindowOrWorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cachestorage/has/index.md b/files/fr/web/api/cachestorage/has/index.md index 5b1b6a6ae0..ae799a0f03 100644 --- a/files/fr/web/api/cachestorage/has/index.md +++ b/files/fr/web/api/cachestorage/has/index.md @@ -12,69 +12,53 @@ tags: - has translation_of: Web/API/CacheStorage/has --- -<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> +{{APIRef("Service Workers API")}}{{SeeCompatTable}} -<p>La méthode <strong><code>has()</code></strong> de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie <code>true</code> si un objet {{domxref("Cache")}} est égal au <code>cacheName</code>.</p> +La méthode **`has()`** de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si un objet {{domxref("Cache")}} est égal au `cacheName`. -<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p> +Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">caches.has(<em>cacheName</em>).then(function(true) { - // le cache existe! -}); -</pre> + caches.has(cacheName).then(function(true) { + // le cache existe! + }); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>cacheName</dt> - <dd>Un {{domxref("DOMString")}} représentant le nom de l'objet {{domxref("Cache")}} que vous cherchez dans le {{domxref("CacheStorage")}}.</dd> -</dl> +- cacheName + - : Un {{domxref("DOMString")}} représentant le nom de l'objet {{domxref("Cache")}} que vous cherchez dans le {{domxref("CacheStorage")}}. -<h3 id="Retour">Retour</h3> +### Retour -<p>Une {{jsxref("Promise", "Promesse")}} qui renvoie <code>true</code> si le cache existe.</p> +Une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si le cache existe. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>L'exemple suivant vérifie qu'un cache nommé 'v1' exists. Si c'est le cas, nous lui ajoutons une liste d'assets. Si non (la promesse <code>has()</code> est rejetée) alors nous exécutons une sorte d'initialisation du cache.</p> +L'exemple suivant vérifie qu'un cache nommé 'v1' exists. Si c'est le cas, nous lui ajoutons une liste d'assets. Si non (la promesse `has()` est rejetée) alors nous exécutons une sorte d'initialisation du cache. -<pre class="brush: js">caches.has('v1').then(function() { +```js +caches.has('v1').then(function() { caches.open('v1').then(function(cache) { return cache.addAll(myAssets); }); }).catch(function() { someCacheSetupfunction(); -});;</pre> +});; +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#cache-storage-has', 'CacheStorage: has')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#cache-storage-has', 'CacheStorage: has')}} | {{Spec2('Service Workers')}} | Définition initiale. | -<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2> +## Compatibilités des navigateurs +{{Compat("api.CacheStorage.has")}} +## Voir aussi -<p>{{Compat("api.CacheStorage.has")}}</p> - -<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> +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cachestorage/index.md b/files/fr/web/api/cachestorage/index.md index 276393aa31..f91758952d 100644 --- a/files/fr/web/api/cachestorage/index.md +++ b/files/fr/web/api/cachestorage/index.md @@ -11,64 +11,55 @@ tags: - ServiceWorker translation_of: Web/API/CacheStorage --- -<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> +{{APIRef("Service Workers API")}}{{SeeCompatTable}} -<p>L'interface <code>CacheStorage</code> représente le stockage des objets {{domxref("Cache")}}.</p> +L'interface `CacheStorage` représente le stockage des objets {{domxref("Cache")}}. -<p>L'interface :</p> +L'interface : -<ul> - <li>Fournit un répertoire principal de tous les caches nommés qui peut être accessible par un {{domxref("ServiceWorker")}} ou un autre type de travailleur ou portée de {{domxref("window")}} (vous n'êtes pas limité à l'utiliser uniquement avec des Service Workers, même si la spécification {{SpecName("Service Workers")}} le définit). - <div class="note"> - <p><strong>Note :</strong> <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1026063">Chrome et Safari n'exposent que "CacheStorage" au contexte fenêtré sur HTTPS</a>. {{domxref("window.caches")}} sera indéfinie, à moins qu'un certificat SSL ne soit configuré.</p></div> - </li> - <li>Maintient une correspondance entre les noms des chaînes de caractères et les objets {{domxref("Cache")}} correspondants.</li> -</ul> +- Fournit un répertoire principal de tous les caches nommés qui peut être accessible par un {{domxref("ServiceWorker")}} ou un autre type de travailleur ou portée de {{domxref("window")}} (vous n'êtes pas limité à l'utiliser uniquement avec des Service Workers, même si la spécification {{SpecName("Service Workers")}} le définit). -<p>Utilisez {{domxref("CacheStorage.open()")}} pour obtenir une instance {{domxref("Cache")}}.</p> + > **Note :** [Chrome et Safari n'exposent que "CacheStorage" au contexte fenêtré sur HTTPS](https://bugs.chromium.org/p/chromium/issues/detail?id=1026063). {{domxref("window.caches")}} sera indéfinie, à moins qu'un certificat SSL ne soit configuré. -<p>Utilisez {{domxref("CacheStorage.match()")}} pour vérifier si une {{domxref("Request", "Requête")}} donnée est une clé dans l'un des objets {{domxref("Cache")}} que l'objet <code>CacheStorage</code> surveille.</p> +- Maintient une correspondance entre les noms des chaînes de caractères et les objets {{domxref("Cache")}} correspondants. -<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p> +Utilisez {{domxref("CacheStorage.open()")}} pour obtenir une instance {{domxref("Cache")}}. -<div class="note"> - <p><strong>Note :</strong> CacheStorage échouera systématiquement avec une <code>SecurityError</code> sur les domaines non certifiés (i.e. ceux qui n'utilisent pas HTTPS, bien que cette définition risque de devenir plus complexe dans le future). Pendant vos tests vous pouvez contourner ce comportement en cochant l'option "Enable Service Workers over HTTP (when toolbox is open)" dans les options Firefox Devtools / le menu gear.</p> -</div> +Utilisez {{domxref("CacheStorage.match()")}} pour vérifier si une {{domxref("Request", "Requête")}} donnée est une clé dans l'un des objets {{domxref("Cache")}} que l'objet `CacheStorage` surveille. -<div class="note"> - <p><strong>Note :</strong> {{domxref("CacheStorage.match()")}} est une méthode de convenance. Il est possible d'implémenter une fonctionnalité équivalente pour matcher une entrée de cache en appelant {{domxref("CacheStorage.open()")}}, puis en retournant {{domxref("CacheStorage.keys()")}}, et en matchant les entrées voulues avec {{domxref("CacheStorage.match()")}}.</p> -</div> +Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. -<h2 id="Méthodes">Méthodes</h2> +> **Note :** CacheStorage échouera systématiquement avec une `SecurityError` sur les domaines non certifiés (i.e. ceux qui n'utilisent pas HTTPS, bien que cette définition risque de devenir plus complexe dans le future). Pendant vos tests vous pouvez contourner ce comportement en cochant l'option "Enable Service Workers over HTTP (when toolbox is open)" dans les options Firefox Devtools / le menu gear. -<dl> - <dt>{{domxref("CacheStorage.match()")}} {{experimental_inline}}</dt> - <dd>Cherche si une {{domxref("Request")}} donnée est la clé de n'importe lequel des objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}, et retourne une {{jsxref("Promise", "Promesse")}} résolue en cet objet {{domxref("Cache")}}.</dd> - <dt>{{domxref("CacheStorage.has()")}} {{experimental_inline}}</dt> - <dd>Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en <code>true</code> si un objet {{domxref("Cache")}} qui correspond au <code>cacheName</code> existe.</dd> - <dt>{{domxref("CacheStorage.open()")}} {{experimental_inline}}</dt> - <dd>Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en l'objet {{domxref("Cache")}} qui correspond au <code>cacheName</code> (si il n'existe pas, un nouveau cache est créé).</dd> - <dt>{{domxref("CacheStorage.delete()")}} {{experimental_inline}}</dt> - <dd>Trouve l'objet {{domxref("Cache")}} correspondant au <code>cacheName</code>, et si il est trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} résolue à <code>true</code>. Si aucun objet {{domxref("Cache")}} n'est trouvé, la {{jsxref("Promise", "Promesse")}} est résolue à <code>false</code>.</dd> - <dt>{{domxref("CacheStorage.keys()")}} {{experimental_inline}}</dt> - <dd>Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau qui contient toutes les chaînes correspondantes aux objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}. Cette méthode peut s'utiliser pour itérer sur une liste de tous les objets {{domxref("Cache")}}.</dd> -</dl> +> **Note :** {{domxref("CacheStorage.match()")}} est une méthode de convenance. Il est possible d'implémenter une fonctionnalité équivalente pour matcher une entrée de cache en appelant {{domxref("CacheStorage.open()")}}, puis en retournant {{domxref("CacheStorage.keys()")}}, et en matchant les entrées voulues avec {{domxref("CacheStorage.match()")}}. -<h2 id="Exemples">Exemples</h2> +## Méthodes -<p>Cet extrait de code est tiré de l'<a href="https://github.com/mdn/sw-test/">exemple MDN sw-test</a> (lancer <a href="https://mdn.github.io/sw-test/">sw-test dans votre navigateur</a>). Ce service worker script attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} pour gérer la phase d'installation de l'app. Cela consiste à appeler {{domxref("CacheStorage.open")}} pour créer un nouveau cache, puis {{domxref("Cache.addAll")}} pour y ajouter une série d'assets.</p> +- {{domxref("CacheStorage.match()")}} {{experimental_inline}} + - : Cherche si une {{domxref("Request")}} donnée est la clé de n'importe lequel des objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}, et retourne une {{jsxref("Promise", "Promesse")}} résolue en cet objet {{domxref("Cache")}}. +- {{domxref("CacheStorage.has()")}} {{experimental_inline}} + - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en `true` si un objet {{domxref("Cache")}} qui correspond au `cacheName` existe. +- {{domxref("CacheStorage.open()")}} {{experimental_inline}} + - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en l'objet {{domxref("Cache")}} qui correspond au `cacheName` (si il n'existe pas, un nouveau cache est créé). +- {{domxref("CacheStorage.delete()")}} {{experimental_inline}} + - : Trouve l'objet {{domxref("Cache")}} correspondant au `cacheName`, et si il est trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} résolue à `true`. Si aucun objet {{domxref("Cache")}} n'est trouvé, la {{jsxref("Promise", "Promesse")}} est résolue à `false`. +- {{domxref("CacheStorage.keys()")}} {{experimental_inline}} + - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau qui contient toutes les chaînes correspondantes aux objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}. Cette méthode peut s'utiliser pour itérer sur une liste de tous les objets {{domxref("Cache")}}. -<p>Dans le second bloc de code, on attends le déclenchement d'un {{domxref("FetchEvent")}}. On construit ensuite une réponse spéciale comme suit :</p> +## Exemples -<ol> - <li>Vérifier si il y a un match pour la requête dans le CacheStorage. Le cas échéant, servir ça.</li> - <li>Sinon, récupérer la requête sur le réseau, puis ouvrir le cache du premier bloc et y ajouter un clone de la requête grâce à {{domxref("Cache.put")}} (<code>cache.put(event.request, response.clone())</code>.)</li> - <li>En cas d'échec (e.g. car le réseau est inaccessible), retourner une réponse par défaut.</li> -</ol> +Cet extrait de code est tiré de l'[exemple MDN sw-test](https://github.com/mdn/sw-test/) (lancer [sw-test dans votre navigateur](https://mdn.github.io/sw-test/)). Ce service worker script attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} pour gérer la phase d'installation de l'app. Cela consiste à appeler {{domxref("CacheStorage.open")}} pour créer un nouveau cache, puis {{domxref("Cache.addAll")}} pour y ajouter une série d'assets. -<p>Enfin, on retourne cette réponse en utilisant {{domxref("FetchEvent.respondWith")}}.</p> +Dans le second bloc de code, on attends le déclenchement d'un {{domxref("FetchEvent")}}. On construit ensuite une réponse spéciale comme suit : -<pre class="brush: js">this.addEventListener('install', function(event) { +1. Vérifier si il y a un match pour la requête dans le CacheStorage. Le cas échéant, servir ça. +2. Sinon, récupérer la requête sur le réseau, puis ouvrir le cache du premier bloc et y ajouter un clone de la requête grâce à {{domxref("Cache.put")}} (`cache.put(event.request, response.clone())`.) +3. En cas d'échec (e.g. car le réseau est inaccessible), retourner une réponse par défaut. + +Enfin, on retourne cette réponse en utilisant {{domxref("FetchEvent.respondWith")}}. + +```js +this.addEventListener('install', function(event) { event.waitUntil( caches.open('v1').then(function(cache) { return cache.addAll([ @@ -109,11 +100,13 @@ self.addEventListener('fetch', function(event) { }); } })); -});</pre> +}); +``` -<p>Cet extrait montre comment l'API peut être utilisée en dehors du contexte d'un Service Worker, et utilise l'opérateur "await" pour un code beaucoup plus lisible.</p> +Cet extrait montre comment l'API peut être utilisée en dehors du contexte d'un Service Worker, et utilise l'opérateur "await" pour un code beaucoup plus lisible. -<pre class="brush: js">// Essayer d'obtenir des données du cache, mais se rabattre sur la récupération en direct. +```js +// Essayer d'obtenir des données du cache, mais se rabattre sur la récupération en direct. async function getData() { const cacheVersion = 1; const cacheName = `myapp-${ cacheVersion }`; @@ -167,35 +160,21 @@ try { console.log( { data } ); } catch ( error ) { console.error( { error } ); -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#cache-storage', 'CacheStorage')}}</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> +## Spécifications +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#cache-storage', 'CacheStorage')}} | {{Spec2('Service Workers')}} | Définition initiale. | +## Compatibilités des navigateurs -<p>{{Compat("api.CacheStorage")}}</p> +{{Compat("api.CacheStorage")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utilisation des Service Workers</a></li> - <li>{{domxref("Cache")}}</li> - <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li> -</ul> +- [Utilisation des Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WindowOrWorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cachestorage/keys/index.md b/files/fr/web/api/cachestorage/keys/index.md index ed61c3716c..3f08fd71b7 100644 --- a/files/fr/web/api/cachestorage/keys/index.md +++ b/files/fr/web/api/cachestorage/keys/index.md @@ -12,32 +12,32 @@ tags: - keys translation_of: Web/API/CacheStorage/keys --- -<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> +{{APIRef("Service Workers API")}}{{SeeCompatTable}} -<p>La méthode <code><strong>keys</strong></code><strong><code>()</code></strong> de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie une liste content les chaines de caractères correspondant à tous les noms des {{domxref("Cache")}} suivient par l'objet {{domxref("CacheStorage")}}. Utilisez cette méthode pour itérer sur une liste de tous les objets {{domxref("Cache")}}.</p> +La méthode **`keys`\*\***`()`\*\* de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie une liste content les chaines de caractères correspondant à tous les noms des {{domxref("Cache")}} suivient par l'objet {{domxref("CacheStorage")}}. Utilisez cette méthode pour itérer sur une liste de tous les objets {{domxref("Cache")}}. -<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p> +Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">caches.keys().then(function(<em>keyList</em>) { - // faire quelque-chose avec votre keylist -}); -</pre> + caches.keys().then(function(keyList) { + // faire quelque-chose avec votre keylist + }); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<p>Aucun.</p> +Aucun. -<h3 id="Retour">Retour</h3> +### Retour -<p>Une {{jsxref("Promise", "Promesse")}} qui retourne une liste de noms de {{domxref("Cache")}} contenus dans un objet {{domxref("CacheStorage")}}.</p> +Une {{jsxref("Promise", "Promesse")}} qui retourne une liste de noms de {{domxref("Cache")}} contenus dans un objet {{domxref("CacheStorage")}}. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens caches, inutilisés, avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec <code>delete().</code></p> +Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens caches, inutilisés, avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec `delete().` -<pre class="brush: js">this.addEventListener('activate', function(event) { +```js +this.addEventListener('activate', function(event) { var cacheWhitelist = ['v2']; event.waitUntil( @@ -49,35 +49,21 @@ translation_of: Web/API/CacheStorage/keys }); }) ); -});</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#dom-cachestorage-keys', 'CacheStorage: keys')}}</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> +## Spécifications +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#dom-cachestorage-keys', 'CacheStorage: keys')}} | {{Spec2('Service Workers')}} | Définition initiale. | +## Compatibilités des navigateurs -<p>{{Compat("api.CacheStorage.keys")}}</p> +{{Compat("api.CacheStorage.keys")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<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> +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cachestorage/match/index.md b/files/fr/web/api/cachestorage/match/index.md index 704f299794..c548c86759 100644 --- a/files/fr/web/api/cachestorage/match/index.md +++ b/files/fr/web/api/cachestorage/match/index.md @@ -12,56 +12,49 @@ tags: - match translation_of: Web/API/CacheStorage/match --- -<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> +{{APIRef("Service Workers API")}}{{SeeCompatTable}} -<p>La fonction <strong><code>match()</code></strong> de l'interface {{domxref("CacheStorage")}} qu'une {{domxref("Request", "Requête")}} est la clé d'un objet {{domxref("Cache")}} object suivie par un objet {{domxref("CacheStorage")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie la {{domxref("Response", "Réponse")}} correspondante.</p> +La fonction **`match()`** de l'interface {{domxref("CacheStorage")}} qu'une {{domxref("Request", "Requête")}} est la clé d'un objet {{domxref("Cache")}} object suivie par un objet {{domxref("CacheStorage")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie la {{domxref("Response", "Réponse")}} correspondante. -<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p> +Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. -<p>Les objets <code>Cache</code> sont cherchés par ordre de création.</p> +Les objets `Cache` sont cherchés par ordre de création. -<div class="note"> - <p><strong>Note :</strong> {{domxref("CacheStorage.match()", "caches.match()")}} est une méthode de commodité. Une fonctionnalité équivalente consiste à appeler {{domxref("cache.match()")}} sur chaque cache (dans l'ordre renvoyé par {{domxref("CacheStorage.keys()", "caches.keys()")}}) jusqu'à ce qu'une {{domxref("Response", "Réponse")}} soit renvoyée.</p> -</div> +> **Note :** {{domxref("CacheStorage.match()", "caches.match()")}} est une méthode de commodité. Une fonctionnalité équivalente consiste à appeler {{domxref("cache.match()")}} sur chaque cache (dans l'ordre renvoyé par {{domxref("CacheStorage.keys()", "caches.keys()")}}) jusqu'à ce qu'une {{domxref("Response", "Réponse")}} soit renvoyée. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">caches.match(<em>request</em>,{<em>options</em>}).then(function(<em>response</em>) { - // faire quelque-chose avec la requête et la réponse -}); -</pre> + caches.match(request,{options}).then(function(response) { + // faire quelque-chose avec la requête et la réponse + }); + +### Paramètres + +- request + - : La {{domxref("Request", "Requête")}} recherchée. +- options {{optional_inline}} -<h3 id="Paramètres">Paramètres</h3> + - : Un objet dont les propriétés contrôlent comment la correspondance est fait avec l'opération `match`. Les options disponible sont: -<dl> - <dt>request</dt> - <dd>La {{domxref("Request", "Requête")}} recherchée.</dd> - <dt>options {{optional_inline}}</dt> - <dd>Un objet dont les propriétés contrôlent comment la correspondance est fait avec l'opération <code>match</code>. Les options disponible sont: - <ul> - <li><code>ignoreSearch</code>: Un {{domxref("Boolean")}} qui détermine si le preocessus de rapprochement doit ignorer la chaîne de requête dans l'url. Défini à <code>true</code>, la partie <code>?value=bar</code> de <code>http://foo.com/?value=bar</code> sera ignoré lors d'un rapporchement. La valeur par défaut est <code>false</code>.</li> - <li><code>ignoreMethod</code>: Un {{domxref("Boolean")}} qui, quand défini à <code>true</code>, empêche l'opération de rapprochement de valider le verbe http de la {{domxref("Request", "Requête")}} <code>http</code> (normalement, seulement <code>GET</code> et <code>HEAD</code> sont authorisés) La valeur par défaut est <code>false</code>.</li> - <li><code>ignoreVary</code>: Un {{domxref("Boolean")}} qui, quand défini à <code>true</code>, dit à l'opération de rapprochement de ne pas faire le rapprochement avec le header <code>VARY</code>. En d'autres termes, si une URL est sélectionnée elle sera conservée indépemment de la présence du header <code>VARY</code>. La valeur par défaut est <code>false</code>.</li> - <li><code>cacheName</code>: Un {{domxref("DOMString")}} qui représente le cache dans lequel on recherche.</li> - </ul> - </dd> -</dl> + - `ignoreSearch`: Un {{domxref("Boolean")}} qui détermine si le preocessus de rapprochement doit ignorer la chaîne de requête dans l'url. Défini à `true`, la partie `?value=bar` de `http://foo.com/?value=bar` sera ignoré lors d'un rapporchement. La valeur par défaut est `false`. + - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand défini à `true`, empêche l'opération de rapprochement de valider le verbe http de la {{domxref("Request", "Requête")}} `http` (normalement, seulement `GET` et `HEAD` sont authorisés) La valeur par défaut est `false`. + - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand défini à `true`, dit à l'opération de rapprochement de ne pas faire le rapprochement avec le header `VARY`. En d'autres termes, si une URL est sélectionnée elle sera conservée indépemment de la présence du header `VARY`. La valeur par défaut est `false`. + - `cacheName`: Un {{domxref("DOMString")}} qui représente le cache dans lequel on recherche. -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<p>Une {{jsxref("Promise", "Promesse")}} qui renvoie les {{domxref("Response", "Réponses")}} correspondante.</p> +Une {{jsxref("Promise", "Promesse")}} qui renvoie les {{domxref("Response", "Réponses")}} correspondante. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Cet exemple est tiré du MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> (voir <a href="https://mdn.github.io/sw-test/">sw-test running live</a>). Nous attendons pour un évènement {{domxref("FetchEvent")}} et nous construisons une réponse comme suit:</p> +Cet exemple est tiré du MDN [sw-test example](https://github.com/mdn/sw-test/) (voir [sw-test running live](https://mdn.github.io/sw-test/)). Nous attendons pour un évènement {{domxref("FetchEvent")}} et nous construisons une réponse comme suit: -<ol> - <li>Vérifier si une correspondance pour la requète est trouvée dans le {{domxref("CacheStorage")}} en utilisant {{domxref("CacheStorage.match")}}. Si oui, la servir.</li> - <li>Si non, ouvrire le cache <code>v1</code> avec <code>open()</code>, mettre le réseau par défaut dans le cache avec {{domxref("Cache.put")}} et retourner un clone du réseau par défaut en utilisant <code>return response.clone()</code> — obligatoire car <code>put()</code> détruit le corps de la réponse.</li> - <li>Si ceci échoue (e.g., parce que le réseau est inactif), retourner une réponse de secours.</li> -</ol> +1. Vérifier si une correspondance pour la requète est trouvée dans le {{domxref("CacheStorage")}} en utilisant {{domxref("CacheStorage.match")}}. Si oui, la servir. +2. Si non, ouvrire le cache `v1` avec `open()`, mettre le réseau par défaut dans le cache avec {{domxref("Cache.put")}} et retourner un clone du réseau par défaut en utilisant `return response.clone()` — obligatoire car `put()` détruit le corps de la réponse. +3. Si ceci échoue (e.g., parce que le réseau est inactif), retourner une réponse de secours. -<pre class="brush: js">self.addEventListener('fetch', function(event) { +```js +self.addEventListener('fetch', function(event) { event.respondWith(caches.match(event.request).then(function(response) { // caches.match() always resolves // but in case of success response will have value @@ -83,35 +76,21 @@ translation_of: Web/API/CacheStorage/match }); } })); -});</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#dom-cachestorage-match', 'CacheStorage: 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> +## Spécifications +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#dom-cachestorage-match', 'CacheStorage: match')}} | {{Spec2('Service Workers')}} | Définition initiale. | +## Compatibilités des navigateurs -<p>{{Compat("api.CacheStorage.match")}}</p> +{{Compat("api.CacheStorage.match")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<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("WindowOrWorkerGlobalScope.caches")}}</li> -</ul> +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WindowOrWorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cachestorage/open/index.md b/files/fr/web/api/cachestorage/open/index.md index 87d45d11b3..009c6e1e94 100644 --- a/files/fr/web/api/cachestorage/open/index.md +++ b/files/fr/web/api/cachestorage/open/index.md @@ -12,39 +12,35 @@ tags: - open translation_of: Web/API/CacheStorage/open --- -<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> +{{APIRef("Service Workers API")}}{{SeeCompatTable}} -<p>La fonction <strong><code>open()</code></strong>de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} correspondant a un <code>cacheName</code>.</p> +La fonction **`open()`**de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} correspondant a un `cacheName`. -<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p> +Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. -<div class="note"> -<p><strong>Note :</strong> Si le {{domxref("Cache")}} spécifié n'existe pas, un nouveau cache sera crée avec <code>cacheName</code> et retournera une {{jsxref("Promise", "Promesse")}} renvoyant le nouvel objet {{domxref("Cache")}}.</p> -</div> +> **Note :** Si le {{domxref("Cache")}} spécifié n'existe pas, un nouveau cache sera crée avec `cacheName` et retournera une {{jsxref("Promise", "Promesse")}} renvoyant le nouvel objet {{domxref("Cache")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">caches.open(<em>cacheName</em>).then(function(<em>cache</em>) { - // faire quelque-chose avec le cache -}); -</pre> + caches.open(cacheName).then(function(cache) { + // faire quelque-chose avec le cache + }); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>cacheName</dt> - <dd>Le nom du cache que vous voulez ouvrir.</dd> -</dl> +- cacheName + - : Le nom du cache que vous voulez ouvrir. -<h3 id="Retour">Retour</h3> +### Retour -<p>Une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} demandé.</p> +Une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} demandé. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Cet exemple est tiré de l'<a href="https://github.com/mdn/sw-test/">exemple MDN sw-test</a> (voir <a href="https://mdn.github.io/sw-test/">sw-test en direct</a>). Ici, nous attendons qu'un {{domxref("InstallEvent")}} se déclenche, puis nous lançons {{domxref("ExtendableEvent.waitUntil", "waitUntil()")}} pour gérer le processus d'installation de l'application. Cela consiste à appeler <code>CacheStorage.open()</code> pour créer un nouveau cache, puis à utiliser {{domxref("Cache.addAll()")}} pour y ajouter une série d'éléments.</p> +Cet exemple est tiré de l'[exemple MDN sw-test](https://github.com/mdn/sw-test/) (voir [sw-test en direct](https://mdn.github.io/sw-test/)). Ici, nous attendons qu'un {{domxref("InstallEvent")}} se déclenche, puis nous lançons {{domxref("ExtendableEvent.waitUntil", "waitUntil()")}} pour gérer le processus d'installation de l'application. Cela consiste à appeler `CacheStorage.open()` pour créer un nouveau cache, puis à utiliser {{domxref("Cache.addAll()")}} pour y ajouter une série d'éléments. -<pre class="brush: js">self.addEventListener('install', function(event) { +```js +self.addEventListener('install', function(event) { event.waitUntil( caches.open('v1').then(function(cache) { return cache.addAll([ @@ -59,35 +55,21 @@ translation_of: Web/API/CacheStorage/open '/sw-test/gallery/snowTroopers.jpg' ]); }) - );</pre> + ); +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#dom-cachestorage-open', 'CacheStorage: open')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#dom-cachestorage-open', 'CacheStorage: open')}} | {{Spec2('Service Workers')}} | Définition initiale. | -<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2> +## Compatibilités des navigateurs +{{Compat("api.CacheStorage.open")}} +## Voir aussi -<p>{{Compat("api.CacheStorage.open")}}</p> - -<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> +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches")}} |