1 files changed, 65 insertions, 38 deletions
diff --git a/files/fr/web/api/clients/index.html b/files/fr/web/api/clients/index.html
index 0d309a8cfc..3607baccad 100644
--- a/files/fr/web/api/clients/index.html
+++ b/files/fr/web/api/clients/index.html
@@ -7,64 +7,91 @@ tags:
   - Experimental
   - Interface
   - Reference
+  - Service Workers
+  - Service worker API
   - ServiceWorker
+  - Workers
 translation_of: Web/API/Clients
 ---
-<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+<div>{{APIRef("Service Workers API")}}</div>
 
-<p>L'interface <code>Clients</code> de l'<a href="/en-US/docs/Web/API/ServiceWorker_API">API de Service Workers</a> repésente un conteneur de liste d'objets {{domxref("Client")}}.</p>
+<p class="summary">L'interface <code>Clients</code> permet d'accéder aux objets <a href="/fr/docs/Web/API/Client"><code>Client</code></a>. On y accède via <code><a href="/fr/docs/Web/API/ServiceWorkerGlobalScope"><code>self</code></a>.clients</code> au sein d'un <a href="/fr/docs/Web/API/Service_Worker_API">service worker</a>.</p>
 
-<h2 id="Méthodes">Méthodes</h2>
+<h2 id="methods">Méthodes</h2>
 
 <dl>
- <dt>{{domxref("Clients.get()")}}</dt>
- <dd>Récupère un service worker client correspondant à un id et le retourne dans une {{jsxref("Promise")}}.</dd>
- <dt>{{domxref("Clients.matchAll()")}}</dt>
- <dd>Récupèere une liste de service worker clients et les retourne dans une {{jsxref("Promise")}}. On inclut un paramètre <code>option</code> pour retourner tous les services worker clients dont l'origine est la même que le service worker d'origine. Si <code>option</code> n'est pas inclut, la méthode retourne seulement les service worker clients controllés par le service worker.</dd>
- <dt>{{domxref("Clients.openWindow()")}}</dt>
- <dd>Ouvre un service worker {{domxref("Client")}} dans une nouvelle fenêtre de navigation.</dd>
- <dt>{{domxref("Clients.claim()")}}</dt>
- <dd>Permet à un service worker actif de se définir comme étant le worker actif de la page quand le worker et la page sont dans la même portée.</dd>
+  <dt><a href="/fr/docs/Web/API/Clients/get"><code>Clients.get()</code></a></dt>
+  <dd>Retourne une <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise</code></a> (« <i>Promesse</i> ») pour un <a href="/fr/docs/Web/API/Client"><code>Client</code></a> correspondant à un <a href="/fr/docs/Web/API/Client/id"><code>id</code></a> donné.</dd>
+  <dt><a href="/fr/docs/Web/API/Clients/matchAll"><code>Clients.matchAll()</code></a></dt>
+  <dd>Retourne une <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise</code></a> (« <i>Promesse</i> ») pour un tableau d'objets <a href="/fr/docs/Web/API/Client"><code>Client</code></a>. L'argument options vous permet de contrôler les types de clients renvoyés.</dd>
+  <dt><a href="/fr/docs/Web/API/Clients/openWindow"><code>Clients.openWindow()</code></a></dt>
+  <dd>Ouvre une nouvelle fenêtre de navigateur pour une url donnée et renvoie une <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise</code></a> (« <i>Promesse</i> ») pour le nouveau <a href="/fr/docs/Web/API/WindowClient"><code>WindowClient</code></a>.</dd>
+  <dt><a href="/fr/docs/Web/API/Clients/claim"><code>Clients.claim()</code></a></dt>
+  <dd>Permet à un service worker actif de se définir comme le <a href="/fr/docs/Web/API/ServiceWorkerContainer/controller"><code>controller</code></a> (« <i>Controlleur</i> ») pour tous les clients dans son <a href="/fr/docs/Web/API/ServiceWorkerRegistration/scope"><code>scope</code></a> (« <i>sa portée</i> »).</dd>
 </dl>
 
-<h2 id="Exemples">Exemples</h2>
+<h2 id="exemple">Exemple</h2>
 
-<pre class="brush: js">clients.matchAll(options).then(function(clients) {
-  for(i = 0 ; i &lt; clients.length ; i++) {
-    if(clients[i] === 'index.html') {
-      clients.openWindow(clients[i]);
-      // ou faire quelque chose qui inclut le client concerné
+<p>L'exemple suivant montre une fenêtre de chat existante ou en crée une nouvelle lorsque l'utilisateur clique sur une notification.</p>
+
+<pre class="brush: js">addEventListener('notificationclick', event =&gt; {
+  event.waitUntil(async function() {
+    const allClients = await clients.matchAll({
+      includeUncontrolled: true
+    });
+
+    let chatClient;
+
+    // Voyons si nous avons déjà une fenêtre de discussion ouverte :
+    for (const client of allClients) {
+      const url = new URL(client.url);
+
+      if (url.pathname == '/chat/') {
+        // Excellent, utilisons-la !
+        client.focus();
+        chatClient = client;
+        break;
+      }
     }
-  }
+
+    // Si nous n'avons pas trouvé de fenêtre de discussion existante,
+    // ouvrons-en une nouvelle :
+    if (!chatClient) {
+      chatClient = await clients.openWindow('/chat/');
+    }
+
+    // Envoyez un message au client :
+    chatClient.postMessage("Nouveaux messages !");
+  }());
 });</pre>
 
-<h2 id="Spécifications">Spécifications</h2>
+<h2 id="specifications">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', '#clients', 'Clients')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{SpecName('Service Workers', '#clients', 'Clients')}}</td>
+      <td>{{Spec2('Service Workers')}}</td>
+      <td>Définition initiale.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
 
 <p>{{Compat("api.Clients")}}</p>
 
-<h2 id="À_voir_aussi">À voir aussi :</h2>
+<h2 id="see_also">Voir aussi</h2>
 
 <ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
- <li><a href="https://github.com/mdn/sw-test">Example simple de service workers</a></li>
- <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Est-ce que les ServiceWorker sont prêt?</a></li>
- <li>{{jsxref("Promise")}}</li>
- <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation optimisée des web workers</a></li>
+  <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+  <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Le ServiceWorker est-il prêt ?</a> <small>(en anglais)</small></li>
+  <li>L'objet <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise</code></a></li>
 </ul>