aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/api/notification
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 12:36:08 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 12:36:08 +0100
commit39f2114f9797eb51994966c6bb8ff1814c9a4da8 (patch)
tree66dbd9c921f56e440f8816ed29ac23682a1ac4ef /files/fr/web/api/notification
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.gz
translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.bz2
translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.zip
unslug fr: move
Diffstat (limited to 'files/fr/web/api/notification')
-rw-r--r--files/fr/web/api/notification/using_web_notifications/index.html275
1 files changed, 0 insertions, 275 deletions
diff --git a/files/fr/web/api/notification/using_web_notifications/index.html b/files/fr/web/api/notification/using_web_notifications/index.html
deleted file mode 100644
index 796e7d152a..0000000000
--- a/files/fr/web/api/notification/using_web_notifications/index.html
+++ /dev/null
@@ -1,275 +0,0 @@
----
-title: Utilisation des Notifications Web
-slug: Web/API/notification/Using_Web_Notifications
-tags:
- - Avancé
- - DOM
- - Firefox OS
- - Guide
- - Notifications
-translation_of: Web/API/Notifications_API/Using_the_Notifications_API
----
-<p>{{SeeCompatTable}}</p>
-
-<h2 id="En_bref">En bref</h2>
-
-<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>Pour afficher des notifications, il faut commencer par demander la permission appropriée et d'instancier un objet {{domxref("Notification")}} :</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>
-
-<h2 id="Obtenir_l'autorisation">Obtenir l'autorisation</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>
-
-<h3 id="Vérifier_l'état_de_la_permission">Vérifier l'état de la permission</h3>
-
-<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>
-
-<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>
-
-<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>
-
-<h3 id="Recevoir_la_permission">Recevoir la permission</h3>
-
-<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>
-
-<p>C'est une pratique usuelle de demander l'autorisation à l'initialisation de l'application:</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;
- }
- });
-});</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>
-
-<h3 id="Manifeste_des_permissions_pour_l'API_de_Notification">Manifeste des permissions pour l'API de Notification</h3>
-
-<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>
-
-<pre>"permissions": {
- "desktop-notification": {
- "description": "Needed for creating system notifications."
- }
-}</pre>
-
-<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>
-
-<h2 id="Créer_une_notification">Créer une notification</h2>
-
-<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>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>
-
-<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>
-
-<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>
-
-<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>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>
-
-<pre class="brush: js">var n = new Notification("Salut!");
-n.onshow = function () {
- setTimeout(n.close.bind(n), 5000);
-}
-</pre>
-
-<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>
-
-<h3 id="Un_petit_exemple">Un petit exemple</h3>
-
-<p>En considérant ce petit bout de HTML assez simple :</p>
-
-<pre class="brush: html">&lt;button&gt;Notifiez moi!&lt;/button&gt;</pre>
-
-<p>Il est possible de gérer les notifications de cette façon :</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;
- }
- });
- }
-
- var button = document.getElementsByTagName('button')[0];
-
- button.addEventListener('click', function () {
- // Si l'utilisateur accepte d'être notifié
- if (window.Notification &amp;&amp; Notification.permission === "granted") {
- var n = new Notification("Coucou !");
- }
-
- // 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;
- }
-
- // Si l'utilisateur est OK
- if (status === "granted") {
- var n = new Notification("Coucou !");
- }
-
- // Sinon, revenons en à un mode d'alerte classique
- else {
- alert("Coucou !");
- }
- });
- }
-
- // Si l'utilisateur refuse d'être notifié
- else {
- // We can fallback to a regular modal alert
- alert("Coucou !");
- }
- });
-});</pre>
-
-<p>Et voici le résultat:</p>
-
-<p>{{ EmbedLiveSample('Simple_example', '100%', 30) }}</p>
-
-<h2 id="Gestion_des_notifications_répétitives">Gestion des notifications répétitives</h2>
-
-<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>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>
-
-<h3 id="Exemple_de_Tag">Exemple de Tag</h3>
-
-<p>Considérons le code HTML suivant:</p>
-
-<pre class="brush: html">&lt;button&gt;Notifie moi!&lt;/button&gt;</pre>
-
-<p>Il est possible de gérer plusieurs notifications de cette manière:</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;
- }
- });
- }
-
- var button = document.getElementsByTagName('button')[0];
-
- button.addEventListener('click', function () {
- // Si l'utilisateur accepte 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'});
- }
- }
-
- // 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.
- 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
- 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'});
- }
- }
-
- // Sinon on bascule sur une alerte modale
- else {
- alert("Hey!");
- }
- });
- }
-
- // Si l'utilisateur refuse les notifications
- else {
- // on bascule sur une alerte modale
- alert("Hey!");
- }
- });
-});</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 cet <a href="https://github.com/mozilla/buddyup/commit/829cba7afa576052cf601c3e286b8d1981f93f45#diff-3">extrait de code</a> pour un exemple d'utilisation.</p>
-
-<h2 id="Spécifications">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>
-
-<h2 id="Compatibilité_Navigateurs">Compatibilité Navigateurs</h2>
-
-<p>{{page("/fr/Web/API/Notification","Browser compatibility")}}</p>
-
-<h2 id="A_lire_aussi">A lire aussi</h2>
-
-<ul>
- <li>{{ domxref("Notification") }}</li>
-</ul>