Revamp fr page to match en-US / fixes #2050 (#2266)

1 files changed, 165 insertions, 189 deletions

diff --git a/files/fr/web/api/notifications_api/using_the_notifications_api/index.html b/files/fr/web/api/notifications_api/using_the_notifications_api/index.html
index 34789ad74d..694ad26f34 100644
--- a/files/fr/web/api/notifications_api/using_the_notifications_api/index.html
+++ b/files/fr/web/api/notifications_api/using_the_notifications_api/index.html
@@ -1,276 +1,252 @@
 ---
-title: Utilisation des Notifications Web
+title: Utilisation de l'API Notifications
 slug: Web/API/Notifications_API/Using_the_Notifications_API
-tags:
-  - Avancé
-  - DOM
-  - Firefox OS
-  - Guide
-  - Notifications
 translation_of: Web/API/Notifications_API/Using_the_Notifications_API
 original_slug: Web/API/notification/Using_Web_Notifications
 ---
-<p>{{SeeCompatTable}}</p>
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
 
-<h2 id="En_bref">En bref</h2>
+<p>L'<a href="/fr/docs/Web/API/Notifications_API">API Notifications</a> permet à une application ou à une page web d'envoyer des notifications affichées en dehors de la page par le système sous-jacent. Cela permet aux applications web d'envoyer des informations aux utilisatrices et utilisateurs même lorsque l'application est en veille ou en arrière-plan. Dans cet article, nous verrons les bases de cette API afin de vous permettre de l'utiliser dans vos propres applications.</p>
 
-<p><span id="result_box" lang="fr"><span class="hps">L'API</span> de <span class="hps">Notifications</span> <span class="hps">Web </span></span><span lang="fr"><span class="hps">permet à une page</span> <span class="hps">Web d'</span><span class="hps">envoyer des notifications</span> <span class="hps">qui s'affichent</span> <span class="hps">hors de la page</span> <span class="hps">au niveau</span> <span class="hps">du système.</span> <span class="hps">Cela permet</span> aux<span class="hps"> applications web</span> <span class="hps">d'envoyer des informations</span> <span class="hps">à un</span> <span class="hps">utilisateur, même si</span> <span class="hps">l'application est inactive</span><span>.</span> <span class="hps">Un des</span> <span class="hps">principaux cas d'utilisation</span> <span class="hps">évidente</span> <span class="hps">est une application</span> <span class="hps">de messagerie Web</span> <span class="hps">qui</span> <span class="hps">informe l'utilisateur</span> <span class="hps">à chaque fois</span> <span class="hps">qu'un nouvel e</span><span>-mail</span> <span class="hps">est reçu,</span> <span class="hps">même si l'utilisateur</span> <span class="hps">fait autre</span> <span class="hps">chose</span> <span class="hps">avec une autre application</span><span>.</span></span></p>
+<p>Généralement, le système sous-jacent utilisé pour les notifications est celui du système d'exploitation. Voyez par exemple comment votre appareil mobile ou ordinateur affiche certaines notifications.</p>
 
-<p>Pour afficher des notifications, il faut commencer par demander la permission appropriée et d'instancier un objet {{domxref("Notification")}} :</p>
+<p><img alt="Une capture d'écran d'Android avec trois notifications." src="android-notification.png"></p>
 
-<pre class="brush: js">Notification.requestPermission( function(status) {
-  console.log(status); // les notifications ne seront affichées que si "autorisées"
-  var n = new Notification("title", {body: "notification body"}); // this also shows the notification
-});
-</pre>
+<p>Le système de notification du système d'exploitation variera selon la plateforme et le navigateur mais ce n'est pas un problème en soi : l'API Notifications a été conçue de façon suffisamment générique pour être compatible avec la plupart des systèmes de notification.</p>
 
-<h2 id="Obtenir_l'autorisation">Obtenir l'autorisation</h2>
+<h2 id="examples">Exemples</h2>
 
-<p><span id="result_box" lang="fr"><span class="hps">Avant</span> qu'<span class="hps">une application</span> ne <span class="hps">soit capable d'envoyer</span> <span class="hps">une notification</span><span>,</span> <span class="hps">l'utilisateur doit</span> donner son accord<span>.</span> <span class="hps">C'est</span> <span class="hps">une exigence commune</span> <span class="hps">quand</span> <span class="hps">une API</span> <span class="atn hps">tente d'</span><span>interagir avec</span> quoi que ce soit <span class="hps">en dehors d'une</span> <span class="hps">page Web.</span> <span class="hps">Cela permet </span><span class="hps">d'éviter</span> <span class="atn hps">les notifications "</span><span>spam"</span> <span class="atn hps">pour le bien-</span><span>être de l'utilisateur</span><span>.</span></span></p>
+<p>Un des cas d'usage parmi les plus évidents pour les notifications est un client mail web ou une application de messagerie instantanée qui notifie dès qu'un nouveau message a été reçu, y compris lorsqu'on utilise l'appareil pour autre chose avec une autre application. De nombreux exemples existent pour ce cas, <a href="https://slack.com/">Slack</a> en est un parmi d'autres.</p>
 
-<h3 id="Vérifier_l'état_de_la_permission">Vérifier l'état de la permission</h3>
+<p>Nous avons écrit un exemple concret : une application pour gérer des listes de trucs à faire (« <i lang="en">to-do</i> ») pour vous donner une meilleure idée de la façon dont les notifications web peuvent être utilisées. Les données sont stockées localement avec <a href="/fr/docs/Web/API/IndexedDB_API">IndexedDB</a> et les utilisateurs sont notifiés lorsque les tâches arrivent à échéance grâce aux notifications système. <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">Téléchargez le code de cette application</a>, ou <a href="https://mdn.github.io/to-do-notifications/">testez l'application en <i lang="en">live</i></a>.</p>
 
-<p><span id="result_box" lang="fr"><span class="hps">Une application qui</span> <span class="hps">a besoin d'envoyer</span> <span class="hps">une notification</span> <span class="hps">peut vérifier l'état</span> <span class="hps">d'autorisation</span> <span class="hps">actuel</span> <span class="hps">grâce à la</span> <span class="hps">propriété non modifiable </span></span>{{domxref("Notification.permission")}} <span lang="fr"><span class="hps">.</span> <span class="hps">Il peut avoir</span> <span class="hps">l'une des</span> <span class="hps">trois</span> <span class="hps">valeurs possibles </span><span>:</span></span></p>
+<h2 id="requesting_permission">Demander la permission</h2>
 
-<ul>
- <li><code>default</code>: <span id="result_box" lang="fr"><span class="hps">l'utilisateur</span> <span class="hps">n'a pas encore</span> </span><span lang="fr"><span class="hps">donné</span> s<span class="hps">a permission</span> <span class="hps">(et donc</span> <span class="hps">aucune notification ne sera</span> <span class="hps">affichée à l'utilisateur</span><span>)</span><span>.</span></span></li>
- <li><code>granted</code>: <span id="result_box" lang="fr"><span class="hps">l'utilisateur</span> a <span class="hps">explicitement</span> <span class="hps">accepté d'être</span> <span class="hps">notifié par</span> <span class="hps">l'application</span><span>.</span></span></li>
- <li><code>denied</code>: <span id="result_box" lang="fr"><span class="hps">l'utilisateur</span> a <span class="hps">explicitement</span> <span class="hps">refusé d'être</span> <span class="hps">notifié par</span> <span class="hps">l'application</span><span>.</span></span></li>
-</ul>
+<p>Avant qu'une application puisse envoyer une notification, l'utilisatrice ou l'utilisateur doit lui accorder le droit de le faire. Il s'agit d'un prérequis courant pour les API qui doivent interagir en dehors d'une page web : l'utilisatrice ou l'utilisateur doit, au moins une fois, explicitement accorder la permission à l'application d'afficher des notifications. La personne contrôle ainsi quels sites ou applications sont autorisés à afficher des notifications.</p>
 
-<div class="note">
-<p><strong>Note:</strong> <span id="result_box" lang="fr"><span class="hps">Safari et Chrome</span> antérieurs à <span class="hps">v32</span> <span class="hps">n'</span><span class="hps">appliquent pas</span> <span class="hps">encore</span> <span class="hps">la propriété</span> </span><span style="line-height: 1.5;"> </span><code style="font-style: italic; line-height: 1.5;">permission</code><span style="line-height: 1.5;"> </span><span lang="fr"><span>.</span></span></p>
-</div>
+<p>En raison d'abus des notifications par le passé, les équipes des navigateurs web ont commencé à mettre en place des stratégies pour limiter ce problème. Dans la pratique, vous ne devriez demander la permission à une personne uniquement après que celle-ci a interagi avec votre site/application (par exemple en ayant cliqué sur un bouton). Il ne s'agit pas seulement d'une bonne pratique (on ne devrait pas ennuyer les utilisatrices et utilisateurs avec de trop nombreuses notifications indésirées) mais d'une méthode qui sera implémentée par les différents navigateurs : Firefox le fait depuis Firefox 72 et Safari le fait également depuis quelque temps.</p>
 
-<h3 id="Recevoir_la_permission">Recevoir la permission</h3>
+<p>De plus, pour Chrome et Firefox, il n'est pas possible de demander la permission d'afficher des notifications à moins que le site soit servi dans un contexte sécurisé (c'est-à-dire avec HTTPS) et il n'est plus possible de demander une telle permission depuis une <a href="/fr/docs/Web/HTML/Element/iframe"><code>&lt;iframe&gt;</code></a> d'une origine tierce.</p>
 
-<p><span id="result_box" lang="fr"><span class="hps">Si l'autorisation</span> <span class="hps">n'est pas accordée</span><span>,</span> <span class="hps">l'application doit</span> <span class="hps">utiliser la méthode</span> </span> {{domxref("Notification.requestPermission()")}} <span lang="fr"><span class="hps"> pour</span> <span class="hps">permettre à l'utilisateur</span> <span class="hps">de faire un choix</span><span>.</span> <span class="hps">Cette méthode accepte</span> <span class="hps">une fonction de rappel</span> <span class="hps">qui reçoit</span> <span class="hps">la permission</span> <span class="hps">choisie par l'utilisateur</span> <span class="hps">pour</span> <span class="hps">réagir.</span></span></p>
+<h3 id="checking_current_permission_status">Vérifier l'état de la permission</h3>
 
-<p>C'est une pratique usuelle de demander l'autorisation à l'initialisation de l'application:</p>
+<p>Vous pouvez vérifier si la permission a déjà été accordée ou non grâce à la propriété en lecture seule <a href="/fr/docs/Web/API/notification/permission"><code>Notification.permission</code></a>. Cette dernière peut avoir l'une de ces trois valeurs :</p>
 
-<pre class="brush: js">window.addEventListener('load', function () {
-  Notification.requestPermission(function (status) {
-    // Cela permet d'utiliser Notification.permission avec Chrome/Safari
-    if (Notification.permission !== status) {
-      Notification.permission = status;
-    }
-  });
+<dl>
+ <dt><code>default</code></dt>
+ <dd>La permission n'a pas encore été demandée à l'utilisatrice ou l'utilisateur, les notifications ne seront pas affichées.</dd>
+ <dt><code>granted</code></dt>
+ <dd>La permission d'afficher des notifications a été accordée après que la demande a été affichée.</dd>
+ <dt><code>denied</code></dt>
+ <dd>La permission d'afficher des notifications a été explicitement refusée.</dd>
+</dl>
+
+<h3 id="getting_permission">Obtenir la permission</h3>
+
+<p>Si la permission n'a pas encore été accordée, l'application devra utiliser la méthode <a href="/fr/docs/Web/API/notification/requestPermission"><code>Notification.requestPermission()</code></a> afin de la demander.  Une version très basique consiste à inclure :</p>
+
+<pre class="brush: js">Notification.requestPermission().then(function(result) {
+  console.log(result);
 });</pre>
 
-<div class="note">
-<p><strong>Note:</strong> Chrome ne permettait pas l'appel à {{domxref("Notification.requestPermission()")}} dans l'event load jusqu'à sa version 37 (voir <a href="https://code.google.com/p/chromium/issues/detail?id=274284" title="https://code.google.com/p/chromium/issues/detail?id=274284">issue 274284</a>).</p>
-</div>
+<p>Cela utilise la version de la méthode sous forme de promesse. Si vous souhaitez ou avez besoin de prendre en charge les versions antérieures, vous pourrez avoir besoin de version sous forme d'une fonction de rappel (<i lang="en">callback</i>) :</p>
 
-<h3 id="Manifeste_des_permissions_pour_l'API_de_Notification">Manifeste des permissions pour l'API de Notification</h3>
+<pre class="brush: js">Notification.requestPermission();</pre>
 
-<p>Notez que tant que que l'API de Notification API n'est pas <em>privileged</em> ou <em>certifiée</em>, il vous faudra toujours ajouter une entrée dans votre ficher <code>manifest.webapp</code> pour l'inclure dans une application web ouverte:</p>
+<p>Cette version accepte en paramètre une fonction de rappel qui sera appelée une fois que l'utilisatrice ou l'utilisateur aura répondu à la demande de permission.</p>
 
-<pre>"permissions": {
-  "desktop-notification": {
-    "description": "Needed for creating system notifications."
-  }
-}</pre>
+<h3 id="example">Exemple</h3>
 
-<div class="note">
-<p>Remarque : quand une application est installée, vous ne devriez pas avoir besoin de demander la permission explicitement par le code ci-dessus, mais vous aurez toujours besoin de l'entrée des autorisations ci-dessus pour que les notifications soient lancées.</p>
-</div>
+<p>Dans notre application de démonstration, nous avons inclus un bouton « Activer les notifications » qui, lorsqu'il est pressé, demande la permission pour l'application.</p>
 
-<h2 id="Créer_une_notification">Créer une notification</h2>
+<pre class="brush: html">&lt;button id="enable"&gt;Activer les notifications&lt;/button&gt;</pre>
 
-<p>Créer une notification peut être simplement réalisé en utilisant le constructeur {{domxref("Notification")}}. Ce constructeur s'attend à recevoir un titre à afficher dans la notification et quelques options pour la personnaliser telles qu'une icône {{domxref("Notification.icon","icon")}} ou un texte {{domxref("Notification.body","body")}}.</p>
+<p>Cliquer sur ce bouton déclenche l'appel à la fonction <code>askNotificationPermission()</code> :</p>
 
-<p>Une notification sera affichée dès que possible. Pour connaître son statut d'affichage, quatre événements peuvent être déclenchés au niveau de {{domxref("Notification")}} :</p>
+<pre class="brush: js">function askNotificationPermission() {
+  // La fonction qui sert effectivement à demander la permission
+  function handlePermission(permission) {
+    // On affiche ou non le bouton en fonction de la réponse
+    if(Notification.permission === 'denied' || Notification.permission === 'default') {
+      notificationBtn.style.display = 'block';
+    } else {
+      notificationBtn.style.display = 'none';
+    }
+  }
 
-<ul>
- <li>{{event("show")}}: déclenché quand la notification est affichée à l'utilisateur.</li>
- <li>{{event("click")}}: déclenché quand l'utilisateur clique sur la notification.</li>
- <li>{{event("close")}}: déclenché quand la notification est fermée.</li>
- <li>{{event("error")}}: déclenché quand quelque chose n'a pas fonctionné avec cette notification (surtout quand quelque chose empêche la notification d'être affichée)</li>
-</ul>
+  // Vérifions si le navigateur prend en charge les notifications
+  if (!('Notification' in window)) {
+    console.log("Ce navigateur ne prend pas en charge les notifications.");
+  } else {
+    if(checkNotificationPromise()) {
+      Notification.requestPermission()
+      .then((permission) =&gt; {
+        handlePermission(permission);
+      })
+    } else {
+      Notification.requestPermission(function(permission) {
+        handlePermission(permission);
+      });
+    }
+  }
+}</pre>
+
+<p>Commençons par jeter un œil au deuxième bloc de code : vous verrez qu'on commence par vérifier la prise en charge de l'API Notifications. Si celle-ci est bien disponible, on regarde si la version à base de promesses pour <code>Notification.requestPermission()</code> est prise en charge. Si c'est le cas, on utilise cette version (prise en charge partout à l'exception de Safari) et sinon, on utilise l'ancienne version avec le <i lang="en">callback</i> (prise en charge par Safari).</p>
 
-<p>Ces événements peuvent être suivis en utilisant les gestionnaires d'événements {{domxref("Notification.onshow","onshow")}}, {{domxref("Notification.onclick","onclick")}}, {{domxref("Notification.onclose","onclose")}}, ou {{domxref("Notification.onerror","onerror")}}. Car {{domxref("Notification")}} hérite également de {{domxref("EventTarget")}}, Il est possible d'utiliser cette {{domxref("EventTarget.addEventListener","addEventListener()")}} méthode..</p>
+<p>Pour éviter la duplication du code, nous avons stocké quelques lignes dans la fonction <code>handlePermission()</code> qui correspond au premier bloc de ce fragment de code. Dans cette fonction, on définit explicitement la valeur de <code>Notification.permission</code> (certaines anciennes versions de Chrome avaient un bug et ne réalisaient pas cette initialisation automatiquement) puis on affiche ou on masque le bouton selon que la permission a déjà été demandée ou non. On ne veut pas afficher le bouton si la permission a déjà été accordée, en revanche, si elle a été déclinée, on veut permettre à l'utilisatrice ou à l'utilisateur de changer d'avis plus tard.</p>
 
 <div class="note">
-<p><strong>Note:</strong> Firefox et Safari ferment automatiquement les notifications après un certain temps, de l'ordre de 4 secondes.</p>
+<p><strong>Note :</strong> Avant Chrome 37, Chrome ne permettait pas d'appeler <a href="/fr/docs/Web/API/notification/requestPermission"><code>Notification.requestPermission()</code></a> dans le gestionnaire d'évènements <code>load</code> (voir <a href="https://code.google.com/p/chromium/issues/detail?id=274284">le bug 274284</a>).</p>
+</div>
 
-<p>Cela peut aussi être fait au niveau de l'application web en utilisant la méthode {{domxref("Notification.close()")}},  comme par exemple dans le code suivant:</p>
+<h3 id="feature-detecting_the_requestpermission_promise">Détecter la prise en charge de requestPermission() en promesse</h3>
 
-<pre class="brush: js">var n = new Notification("Salut!");
-n.onshow = function () {
-  setTimeout(n.close.bind(n), 5000);
-}
-</pre>
+<p>Plus haut, nous avons dit vérifier la prise en charge du navigateur pour la version de <code>Notification.requestPermission()</code> avec les promesses. Pour cela, nous avons utilisé :</p>
 
-<p>Quand vous recevez un événement "close", il n'y a aucune garantie que l'utilisateur ait lui-même fermé la notification. C'est en accord avec la spécification, qui dit : "When a notification is closed, either by the underlying notifications platform or by the user, the close steps for it must be run." soit "Quand une notification est fermée, que ce soit par la plateforme ou par l'utilisateur, on procède à l'étape de clôture."</p>
-</div>
+<pre class="brush: js">function checkNotificationPromise() {
+    try {
+      Notification.requestPermission().then();
+    } catch(e) {
+      return false;
+    }
 
-<h3 id="Un_petit_exemple">Un petit exemple</h3>
+    return true;
+  }</pre>
 
-<p>En considérant ce petit bout de HTML assez simple :</p>
+<p>Cela permet de vérifier la présence d'une méthode <code>.then()</code> sur <code>requestPermission()</code>. Si une telle fonction est présente, on continue et on renvoie <code>true</code>. Sinon, on renvoie <code>false</code> dans le bloc de code <code>catch() {}</code>.</p>
 
-<pre class="brush: html">&lt;button&gt;Notifiez moi!&lt;/button&gt;</pre>
+<h2 id="creating_a_notification">Créer une notification</h2>
 
-<p>Il est possible de gérer les notifications de cette façon :</p>
+<p>Pour créer une notification, on utilisera le constructeur <a href="/fr/docs/Web/API/notification"><code>Notification</code></a>. Ce constructeur attend un titre à afficher au sein de la notification et permet d'utiliser différentes options pour améliorer la notification comme <a href="/fr/docs/Web/API/notification/icon"><code>une icône</code></a> ou un texte (<a href="/fr/docs/Web/API/notification/body"><code>body</code></a>).</p>
 
-<pre class="brush: js">window.addEventListener('load', function () {
-  // Premièrement, vérifions que nous avons la permission de publier des notifications. Si ce n'est pas le cas, demandons la
-  if (window.Notification &amp;&amp; Notification.permission !== "granted") {
-    Notification.requestPermission(function (status) {
-      if (Notification.permission !== status) {
-        Notification.permission = status;
-      }
-    });
-  }
+<p>Par exemple, dans notre application de démonstration, on utilise le fragment de code suivant pour créer une notification lorsque c'est nécessaire (ce fragment se trouve dans la fonction <code>createNotification()</code>) :</p>
 
-  var button = document.getElementsByTagName('button')[0];
+<pre class="brush: js">const img = '/to-do-notifications/img/icon-128.png';
+const text = 'Coucou ! Votre tâche "' + titre + '" arrive maintenant à échéance.';
+const notification = new Notification('Liste de trucs à faire', { body: text, icon: img });</pre>
 
-  button.addEventListener('click', function () {
-    // Si l'utilisateur accepte d'être notifié
-    if (window.Notification &amp;&amp; Notification.permission === "granted") {
-      var n = new Notification("Coucou !");
-    }
+<h2 id="closing_notifications">Fermer les notifications</h2>
 
-    // Si l'utilisateur n'a pas choisi s'il accepte d'être notifié
-    // Note: à cause de Chrome, nous ne sommes pas certains que la propriété permission soit définie, par conséquent il n'est pas sûr de vérifier la valeur par défaut.
-    else if (window.Notification &amp;&amp; Notification.permission !== "denied") {
-      Notification.requestPermission(function (status) {
-        if (Notification.permission !== status) {
-          Notification.permission = status;
-        }
+<p>On utilisera la méthode <a href="/fr/docs/Web/API/notification/close"><code>close()</code></a> afin de retirer une notification qui n'est plus pertinente (par exemple parce que la personne l'a déjà lue sur la page web s'il s'agit d'une messagerie ou, dans le cas d'un lecteur de musique, si la chanson en cours de lecture a déjà changé). La plupart des navigateurs effacent les notifications après un certain délai  (généralement autour de 4 secondes) mais ça ne devrait pas être un souci particulier, car cette tâche est souvent gérée par l'utilisateur ou l'agent utilisateur. La fermeture peut également être gérée par le système d'exploitation et les utilisatrices et utilisateurs doivent avoir la main sur ce comportement. D'anciennes versions de Chrome ne retiraient pas les automatiquement les notifications et vous pouvez donc utiliser un <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout"><code>setTimeout()</code></a> uniquement pour ces versions historiques.</p>
 
-        // Si l'utilisateur est OK
-        if (status === "granted") {
-          var n = new Notification("Coucou !");
-        }
+<pre class="brush: js">const n = new Notification('Une super chanson');
+document.addEventListener('visibilitychange', function() {
+  if (document.visibilityState === 'visible') {
+    // L'onglet est désormais visible et la notification n'est plus pertinente
+    // on peut la fermer
+    n.close();
+  }
+});
+</pre>
 
-        // Sinon, revenons en à un mode d'alerte classique
-        else {
-          alert("Coucou !");
-        }
-      });
-    }
+<div class="note">
+<p><strong>Note :</strong> Cette API ne devrait pas être utilisée pour retirer la notification de l'écran après un délai donné car elle supprimera également la notification de la liste des notifications et empêchera toute interaction avec celle-ci après qu'elle a initialement été affichée.</p>
+</div>
 
-    // Si l'utilisateur refuse d'être notifié
-    else {
-      // We can fallback to a regular modal alert
-      alert("Coucou !");
-    }
-  });
-});</pre>
+<div class="note">
+<p><strong>Note :</strong> Lorsque vous recevez un évènement <code>close</code>, il n'y a aucune garantie que celui-ci provienne de l'utilisatrice ou de l'utilisateur. Cela correspond à la spécification qui indique : « lorsqu'une notification est fermée, que ce soit par la plateforme sous-jacente ou par l'utilisateur, l'étape de fermeture correspondante doit être exécutée. ».</p>
+</div>
 
-<p>Et voici le résultat:</p>
+<h2 id="notification_events">Évènements relatifs aux notifications</h2>
 
-<p>{{ EmbedLiveSample('Simple_example', '100%', 30) }}</p>
+<p>Quatre évènements sont déclenchés sur une instance de <a href="/fr/docs/Web/API/notification"><code>Notification</code></a> :</p>
 
-<h2 id="Gestion_des_notifications_répétitives">Gestion des notifications répétitives</h2>
+<dl>
+ <dt><code>click</code></dt>
+ <dd>Déclenché lorsque la personne clique sur la notification.</dd>
+ <dt><code>close</code></dt>
+ <dd>Déclenché lorsque la notification a été fermée.</dd>
+ <dt><code>error</code></dt>
+ <dd>Déclenché si une erreur se produit avec la notification. Généralement, cela a lieu lorsqu'il y a un problème d'affichage.</dd>
+ <dt><code>show</code></dt>
+ <dd>Déclenché lorsque la notification est affichée.</dd>
+</dl>
 
-<p><span id="result_box" lang="fr"><span class="hps">Dans</span> <span class="hps">certains cas, il</span> <span class="alt-edited hps">peut être dérangeant</span> <span class="hps">pour l'utilisateur</span> <span class="alt-edited hps">de lui</span> <span class="hps">envoyer un</span> <span class="hps">nombre élevé de</span> <span class="hps">notifications</span> <span class="hps">-</span> <span class="hps">par exemple,</span> <span class="hps">si une application</span> <span class="hps">pour la messagerie instantanée</span> <span class="hps">peut</span> <span class="hps">notifier à un utilisateur</span> <span class="hps">pour chaque</span> <span class="hps">message entrant</span><span>.</span> </span><span lang="fr"><span class="hps">Pour éviter</span> <span class="hps">une invasion de "bulles" sur le </span><span class="hps">bureau de l'utilisateur</span> <span class="hps">avec des centaines de</span> <span class="hps">notifications inutiles</span><span>,</span> <span class="hps">il est possible de</span> <span class="hps">prendre en charge</span> <span class="hps">la file d'attente</span> <span class="hps">des notifications en attente</span><span>.</span></span></p>
+<p>Ces évènements peuvent être suivis avec les gestionnaires d'évènement <a href="/fr/docs/Web/API/notification/onclick"><code>onclick</code></a>, <a href="/fr/docs/Web/API/notification/onclose"><code>onclose</code></a>, <a href="/fr/docs/Web/API/notification/onerror"><code>onerror</code></a>, et <a href="/fr/docs/Web/API/notification/onshow"><code>onshow</code></a>. <a href="/fr/docs/Web/API/notification"><code>Notification</code></a> héritant également de <a href="/fr/docs/Web/API/EventTarget"><code>EventTarget</code></a>, il est aussi possible d'utiliser la méthode <a href="/fr/docs/Web/API/EventTarget/addEventListener"><code>addEventListener()</code></a>.</p>
 
-<p>Pour ce faire, il est possible d'ajouter un tag à toute nouvelle notification. Si une notification a déjà le même tag et n'a pas encore été affichée, la nouvelle notification va remplacer l'ancienne. Si la notification avec le même tag a déjà été affichée, l'ancienne notification est fermée et la nouvelle est affichée.</p>
+<h2 id="replacing_existing_notifications">Remplacer les notifications existantes</h2>
 
-<h3 id="Exemple_de_Tag">Exemple de Tag</h3>
+<p>Il est généralement peu souhaitable de recevoir de nombreuses notifications sur une courte période. Par exemple, que se passerait-il si une messagerie envoyait une notification pour chaque message reçu alors qu'une discussion est en cours ? Pour éviter de submerger l'utilisatrice ou l'utilisateur avec de trop nombreuses notifications, il est possible de modifier les notifications en attente en remplaçant une ou plusieurs notifications avec une nouvelle notification à jour.</p>
 
-<p>Considérons le code HTML suivant:</p>
+<p>Pour cela, on pourra ajouter une balise à toute nouvelle notification. Si une notification existante possède la balise correspondante et qu'elle n'a pas encore été affichée, la nouvelle notification remplacera la précédente. Si une notification avec la même balise a déjà été affichée, elle est fermée et la nouvelle notification est affichée.</p>
 
-<pre class="brush: html">&lt;button&gt;Notifie moi!&lt;/button&gt;</pre>
+<h3 id="tag_example">Exemple d'utilisation des balises</h3>
 
-<p>Il est possible de gérer plusieurs notifications de cette manière:</p>
+<p>Prenons le fragment HTML qui suit :</p>
 
-<pre class="brush: js">window.addEventListener('load', function () {
-  // Premièrement, vérifions que nous avons la permission de notifier
-  // Sinon, demandons la permission
-  if (window.Notification &amp;&amp; Notification.permission !== "granted") {
-    Notification.requestPermission(function (status) {
-      if (Notification.permission !== status) {
-        Notification.permission = status;
-      }
-    });
-  }
+<pre class="brush: html">&lt;button&gt;Envoyez une notification !&lt;/button&gt;</pre>
+
+<p>Il est possible de gérer plusieurs notifications ainsi :</p>
 
-  var button = document.getElementsByTagName('button')[0];
+<pre class="brush: js">window.addEventListener('load', function () {
+  const button = document.getElementsByTagName('button')[0];
 
   button.addEventListener('click', function () {
-    // Si l'utilisateur accepte les notifications
+    // Si l'utilisateur a permis les notifications
     // essayons d'envoyer 10 notifications
     if (window.Notification &amp;&amp; Notification.permission === "granted") {
-      for (var i = 0; i &lt; 10; i++) {
-        // Grâce au tag, nous ne devrions voir que la notification "Hey! 9"
-        var n = new Notification("Hey! " + i, {tag: 'soManyNotification'});
-      }
+      let i = 0;
+      // On utilise un intervalle, car certains navigateurs (dont Firefox)
+      // bloquent les notifications s'il y en a trop sur une période
+      // donnée
+      const interval = window.setInterval(function () {
+        // Avec la balise, on ne devrait voir que la notification "Coucou ! 9"
+        const n = new Notification("Coucou ! " + i, {tag: 'soManyNotification'});
+        if (i++ == 9) {
+          window.clearInterval(interval);
+        }
+      }, 200);
     }
 
-    // Si l'utilisateur n'a pas choisi s'il accepte d'être notifié // Note: à cause de Chrome, nous ne sommes pas certains que la
-    // propriété permission soit définie, par conséquent il n'est pas
-    // sûr de vérifier la valeur par défault.
+    // Si l'utilisateur n'a pas encore autorisé ou non
+    // Note : À cause de Chrome, on ne peut pas s'assurer que la propriété permission 
+    // est définie et il est donc dangereux de vérifier la valeur "default"
     else if (window.Notification &amp;&amp; Notification.permission !== "denied") {
       Notification.requestPermission(function (status) {
-        if (Notification.permission !== status) {
-          Notification.permission = status;
-        }
-
-        // Si l'utilisateur a accepté les notifications
+        // Si la permission a été accordée
         if (status === "granted") {
-          for (var i = 0; i &lt; 10; i++) {
-            // Grâce au tag, nous ne devrions voir que la notification "Hey! 9"
-            var n = new Notification("Hey! " + i, {tag: 'soManyNotification'});
-          }
+          var i = 0;
+          // On utilise un intervalle, car certains navigateurs (dont Firefox)
+          // bloquent les notifications s'il y en a trop sur une période
+          // donnée
+          var interval = window.setInterval(function () {
+            // Avec la balise, on ne devrait voir que la notification "Coucou ! 9"
+            const n = new Notification("Coucou ! " + i, {tag: 'soManyNotification'});
+            if (i++ == 9) {
+              window.clearInterval(interval);
+            }
+          }, 200);
         }
 
-        // Sinon on bascule sur une alerte modale
+        // Sinon, on peut utiliser une alerte modale classique
         else {
-          alert("Hey!");
+          alert("Coucou !");
         }
       });
     }
 
-    // Si l'utilisateur refuse les notifications
+    // Si l'utilisateur a refusé les notifications
     else {
-      // on bascule sur une alerte modale
-      alert("Hey!");
+      // On utilise une alerte modale classique
+      alert("Coucou !");
     }
   });
 });</pre>
 
-<p>Et voici le résultat:</p>
-
-<p>{{ EmbedLiveSample('Tag_example', '100%', 30) }}</p>
-
-<h2 id="Recevoir_la_notification_du_clic_sur_une_notification">Recevoir la notification du clic sur une notification</h2>
-
-<p>Quand un utilisateur clique sur une notification générée par une application, il sera notifié de cet événement de deux façons, en fonction de la circonstance:</p>
-
-<ol>
- <li>Un événement click si votre application n'a pas été fermée ou placée en arrière-plan entre le moment où vous créez la notification et celui où l'utilisateur clique dessus.</li>
- <li>Sinon un message système</li>
-</ol>
+<p>Voir le résultat de cet exemple :</p>
 
-<p>Voir cet <a href="https://github.com/mozilla/buddyup/commit/829cba7afa576052cf601c3e286b8d1981f93f45#diff-3">extrait de code</a> pour un exemple d'utilisation.</p>
+<p>{{EmbedLiveSample('tag_example', '100%', 30)}}</p>
 
-<h2 id="Spécifications">Spécifications</h2>
+<h2 id="specifications">Spécifications</h2>
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Web Notifications')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Spécification initiale</td>
-  </tr>
- </tbody>
-</table>
+<p>{{Specifications("api.Notification")}}</p>
 
-<h2 id="Compatibilité_Navigateurs">Compatibilité Navigateurs</h2>
+<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
 
-<p>{{page("/fr/Web/API/Notification","Browser compatibility")}}</p>
+<p>{{Compat("api.Notification")}}</p>
 
-<h2 id="A_lire_aussi">A lire aussi</h2>
+<h2 id="see_also">Voir aussi</h2>
 
 <ul>
- <li>{{ domxref("Notification") }}</li>
+ <li><a href="/fr/docs/Web/API/notification"><code>Notification</code></a></li>
 </ul>