diff options
Diffstat (limited to 'files/fr/web/api/notification')
26 files changed, 1933 insertions, 0 deletions
diff --git a/files/fr/web/api/notification/actions/index.html b/files/fr/web/api/notification/actions/index.html new file mode 100644 index 0000000000..2f4177861b --- /dev/null +++ b/files/fr/web/api/notification/actions/index.html @@ -0,0 +1,58 @@ +--- +title: Notification.actions +slug: Web/API/notification/actions +tags: + - API + - API Notifications + - Notification + - Notifications + - Propriété + - Reference + - actions +translation_of: Web/API/Notification/actions +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><span class="seoSummary">La propriété <strong><code>actions</code></strong> en lecture seule de l'interface {{domxref ("Notification")}} renvoie la liste des {{domxref ("NotificationAction")}} objets définis à l'aide de l'option <code>actions</code> lors de la création de la notification à l'aide du constructeur {{domxref("Notification.Notification","Notification()")}}.</span> Il s'agit d'une liste des actions définies par l'application que l'utilisateur peut choisir de prendre directement depuis le contexte d'une notification.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Le périphérique et l'agent utilisateur peuvent ne pouvoir afficher qu'un nombre limité d'actions (en raison, par exemple, d'un espace d'écran limité). Cette limite peut être déduite de {{DOMxRef ("Notification.maxActions")}}.</p> +</div> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox notranslate"><var>Notification</var>.actions</pre> + +<h3 id="Value" name="Value">Valeur</h3> + +<p>Un tableau en lecture seule d'objets {{domxref ("NotificationAction")}}, chacun décrivant une action unique que l'utilisateur peut choisir dans une notification.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-actions','actions')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div> + +<p>{{Compat("api.Notification.actions")}}</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li>{{DOMxRef("Notification.maxActions")}}</li> +</ul> diff --git a/files/fr/web/api/notification/badge/index.html b/files/fr/web/api/notification/badge/index.html new file mode 100644 index 0000000000..f179a2a7bf --- /dev/null +++ b/files/fr/web/api/notification/badge/index.html @@ -0,0 +1,46 @@ +--- +title: Notification.badge +slug: Web/API/notification/badge +tags: + - API Notification + - API badge + - Notification + - Notifications + - Propriété + - Reference +translation_of: Web/API/Notification/badge +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><span class="seoSummary">La propriété <strong><code>badge</code></strong> de l'interface {{domxref ("Notification")}} renvoie l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.</span></p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox notranslate">const url = Notification.badge</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>Une {{domxref('USVString')}} contenant une URL.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-badge','badge')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td><span class="tlid-translation translation" lang="fr"><span title="">Définition initiale</span></span>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div> + +<p>{{Compat("api.Notification.badge")}}</p> diff --git a/files/fr/web/api/notification/body/index.html b/files/fr/web/api/notification/body/index.html new file mode 100644 index 0000000000..430c868dd3 --- /dev/null +++ b/files/fr/web/api/notification/body/index.html @@ -0,0 +1,54 @@ +--- +title: Notification.body +slug: Web/API/notification/body +tags: + - API + - API Notifications + - Corps + - Notification + - Notifications + - Propriété + - Reference +translation_of: Web/API/Notification/body +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><span class="seoSummary">La propriété <span class="tlid-translation translation" lang="fr">en lecture seule</span> <strong><code>body</code></strong> de l'interface {{domxref ("Notification")}} est la chaîne de caractères qui correspond au corps de la notification, comme définis à l'aide de l'option <code>body</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.</span></p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox notranslate"><var>Notification</var>.body +</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>Une {{domxref("DOMString")}} contenant le corps de la notification.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-body','body')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div> + +<p>{{Compat("api.Notification.body")}}</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> +</ul> diff --git a/files/fr/web/api/notification/close/index.html b/files/fr/web/api/notification/close/index.html new file mode 100644 index 0000000000..95c7066399 --- /dev/null +++ b/files/fr/web/api/notification/close/index.html @@ -0,0 +1,82 @@ +--- +title: Notification.close() +slug: Web/API/notification/close +tags: + - API + - API Notifications + - Méthode + - Notification + - Notifications + - Reference + - close + - fermeture +translation_of: Web/API/Notification/close +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p>La méthode <code>close()</code> de l'interface {{domxref("Notification")}} est <span class="tlid-translation translation" lang="fr">utilisée </span>pour fermer / supprimer une notification précédemment affichée.</p> + +<div class="note"> +<p><strong>Note:</strong> Cette API ne doit pas être utilisée uniquement pour supprimer la notification de l'écran après un délai fixe, car cette méthode supprimera également la notification de toute barre de notification, empêchant ainsi les utilisateurs d'interagir avec elle après son affichage initial. Une utilisation valable de cette API serait de supprimer une notification qui n'est plus pertinente (par exemple, l'utilisateur a déjà lu la notification sur la page Web dans le cas d'une application de messagerie ou la chanson suivante est déjà en cours de lecture dans une application musicale).</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox notranslate">Notification.close()</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<p>Aucun.</p> + +<h3 id="Returns">Returns</h3> + +<p>Void.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans l'extrait de code suivant, nous avons une simple fonction qui, lorsqu'elle est appelée, crée un objet <code>options</code>, puis de celui-ci une nouvelle notification. À la fin de la fonction, elle appelle également <code>close()</code> dans une fonction {{domxref ("EventTarget.addEventListener", "addEventListener ()")}} pour supprimer la notification lorsque le contenu pertinent a été lu sur la page Web.</p> + +<pre class="brush:js notranslate">function spawnNotification(theBody, theIcon, theTitle) { + const options = { + body: theBody, + icon: theIcon + } + + const n = new Notification(theTitle, options) + document.addEventListener('visibilitychange', () => { + if (document.visibilityState === 'visible') { + // The tab has become visible so clear the now-stale Notification. + n.close() + } + }) +} +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div> + +<p>{{Compat("api.Notification.close")}}</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> +</ul> diff --git a/files/fr/web/api/notification/data/index.html b/files/fr/web/api/notification/data/index.html new file mode 100644 index 0000000000..102d0dd905 --- /dev/null +++ b/files/fr/web/api/notification/data/index.html @@ -0,0 +1,56 @@ +--- +title: Notification.data +slug: Web/API/notification/data +tags: + - API + - API Notifications + - Notification + - Notifications + - Propriété + - Reference + - données +translation_of: Web/API/Notification/data +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><span class="seoSummary">La propriété en lecture seule <strong><code>data</code></strong> de l'interface {{domxref ("Notification")}} renvoie un clone structuré des données de la notification, comme définis à l'aide de l'option <code>data</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification() ")}}.</span></p> + +<p>Les données de la notification peuvent être des données arbitraires, sans restriction de format que vous souhaitez associer à la notification.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox notranslate"><var>Notification</var>.data +</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>Un clone structuré.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-data','data')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div> + +<p>{{Compat("api.Notification.data")}}</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> +</ul> diff --git a/files/fr/web/api/notification/dir/index.html b/files/fr/web/api/notification/dir/index.html new file mode 100644 index 0000000000..d3f0131d1a --- /dev/null +++ b/files/fr/web/api/notification/dir/index.html @@ -0,0 +1,64 @@ +--- +title: Notification.dir +slug: Web/API/notification/dir +tags: + - API + - API Notifications + - Notification + - Notifications + - Propriété + - Reference + - direction +translation_of: Web/API/Notification/dir +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><span class="seoSummary">La propriété en lecture seule <strong><code>dir</code></strong> de l'interface {{domxref ("Notification")}} indique le sens du texte de la notification, définis à l'aide de l'option <code>dir</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.</span></p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="eval notranslate"><var>Notification</var>.dir +</pre> + +<h3 id="Value" name="Value">Valeur</h3> + +<p>Une {{domxref ("DOMString")}} spécifiant la direction du texte. Les valeurs possibles sont:</p> + +<ul> + <li><code>auto</code>: adopte le comportement de réglage de la langue du navigateur (par défaut).</li> + <li><code>ltr</code>: de gauche à droite.</li> + <li><code>rtl</code> : de droite à gauche.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: La plupart des navigateurs semblent ignorer les paramètres explicites de ltr et rtl, et utilisent simplement le paramètre à l'échelle du navigateur.</p> +</div> + +<h2 id="Spécifications">Spécifications</h2> + +<table> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-dir','dir')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div> + +<p>{{Compat("api.Notification.dir")}}</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> +</ul> diff --git a/files/fr/web/api/notification/icon/index.html b/files/fr/web/api/notification/icon/index.html new file mode 100644 index 0000000000..a91a139a2e --- /dev/null +++ b/files/fr/web/api/notification/icon/index.html @@ -0,0 +1,54 @@ +--- +title: Notification.icon +slug: Web/API/notification/icon +tags: + - API + - API Notifications + - Icône + - Notification + - Notifications + - Propriété + - Reference +translation_of: Web/API/Notification/icon +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p>La propriété en lecture seule <strong><code>icon</code></strong> de l'interface {{domxref ("Notification")}} contient l'URL d'une icône à afficher dans le cadre de la notification, comme définis à l'aide de l'option <code>icon</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification"," Notification()")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox notranslate"><var>Notification</var>.icon +</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>Une {{domxref("USVString")}}.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-icon','icon')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div> + +<p>{{Compat("api.Notification.icon")}}</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> +</ul> diff --git a/files/fr/web/api/notification/image/index.html b/files/fr/web/api/notification/image/index.html new file mode 100644 index 0000000000..bfbb48f984 --- /dev/null +++ b/files/fr/web/api/notification/image/index.html @@ -0,0 +1,53 @@ +--- +title: Notification.image +slug: Web/API/notification/image +tags: + - API + - API Notifications + - Image + - Notification + - Notifications + - Propriété + - Reference +translation_of: Web/API/Notification/image +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p>La propriété en lecture seule <code><strong>image</strong></code> de l'interface {{domxref ("Notification")}} contient l'URL d'une image à afficher dans le cadre de la notification, comme définis à l'aide de l'option <code>image</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification"," Notification()")}}.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox notranslate"><var>Notification</var>.image</pre> + +<h3 id="Value" name="Value">Valeur</h3> + +<p>Une {{domxref("USVString")}}.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#image-resource','image')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div> + +<p>{{Compat("api.Notification.image")}}</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> +</ul> diff --git a/files/fr/web/api/notification/index.html b/files/fr/web/api/notification/index.html new file mode 100644 index 0000000000..a31557abc2 --- /dev/null +++ b/files/fr/web/api/notification/index.html @@ -0,0 +1,179 @@ +--- +title: Notification +slug: Web/API/notification +tags: + - API + - API Notifications + - Interface + - Notifications + - Reference +translation_of: Web/API/Notification +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><span class="seoSummary">L'interface Notification de l'<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API">API Notifications</a> est utilisée pour configurer et afficher les notifications de bureau à l'utilisateur. L'apparence et les fonctionnalités spécifiques de ces notifications varient selon les plates-formes, mais elles permettent généralement de fournir des informations de manière asynchrone à l'utilisateur.</span></p> + +<h2 id="Constructeur">Constructeur</h2> + +<dl> + <dt>{{domxref("Notification.Notification", "Notification()")}}</dt> + <dd>Créer une nouvelle instance de l'object <code>Notification</code>.</dd> +</dl> + +<h2 id="Propriétés">Propriétés</h2> + +<h3 id="Propriétés_statiques">Propriétés statiques</h3> + +<p><em>Ces propriétés ne sont disponibles que sur l'objet </em><code>Notification</code> <em>lui-même.</em></p> + +<dl> + <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt> + <dd>Une chaîne représentant l'autorisation actuelle d'afficher les notifications. Les valeurs possibles sont: + <ul> + <li><code>denied</code> — L'utilisateur refuse d'afficher des notifications.</li> + <li><code>granted</code> — L'utilisateur accepte d'afficher des notifications.</li> + <li><code>default</code> — Le choix de l'utilisateur est inconnu et donc le navigateur agira comme si la valeur était refusée.</li> + </ul> + </dd> + <dt>{{domxref("Notification.maxActions")}} {{readonlyinline}}</dt> +</dl> + +<h3 id="Propriétés_de_linstance">Propriétés de l'instance</h3> + +<p><em>Ces propriétés ne sont disponibles que sur les instances de l'objet </em><code>Notification</code><em>.</em></p> + +<dl> + <dt>{{domxref("Notification.actions")}} {{readonlyinline}}</dt> + <dd>Tableau d'actions de la notification comme spécifié dans le paramètre <code>options</code> du constructeur.</dd> + <dt>{{domxref("Notification.badge")}} {{readonlyinline}}</dt> + <dd>L'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.</dd> + <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt> + <dd>Une chaîne représentant le corps de la notification telle que spécifiée dans le paramètre <code>options</code> du constructeur.</dd> + <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt> + <dd>Renvoie un clone structuré des données de la notification.</dd> + <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt> + <dd>La direction du texte de la notification comme spécifié dans le paramètre <code>options</code> du constructeur.</dd> + <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt> + <dd>Code de langue de la notification tel que spécifié dans le paramètre <code>options</code> du constructeur.</dd> + <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt> + <dd>L'ID de la notification (le cas échéant) tel que spécifié dans le paramètre <code>options</code> du constructeur.</dd> + <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt> + <dd>L'URL de l'image utilisée comme icône de la notification comme spécifié dans le paramètre <code>options</code> du constructeur.</dd> + <dt>{{domxref("Notification.image")}} {{readonlyinline}}</dt> + <dd>L'URL d'une image à afficher dans le cadre de la notification, comme spécifié dans le paramètre <code>options</code> du constructeur.</dd> + <dt>{{domxref("Notification.renotify")}} {{readonlyinline}}</dt> + <dd>Spécifie si l'utilisateur doit être averti après qu'une nouvelle notification remplace l'ancienne.</dd> + <dt>{{domxref("Notification.requireInteraction")}} {{readonlyinline}}</dt> + <dd>Un {{jsxref ("Boolean")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement.</dd> + <dt>{{domxref("Notification.silent")}} {{readonlyinline}}</dt> + <dd>Spécifie si la notification doit être silencieuse, c'est-à-dire qu'aucun son ou vibration ne doit être émis, quels que soient les paramètres de l'appareil.</dd> + <dt>{{domxref("Notification.timestamp")}} {{readonlyinline}}</dt> + <dd>Spécifie l'heure à laquelle une notification est créée ou applicable (passée, présente ou future).</dd> + <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt> + <dd>Le titre de la notification tel que spécifié dans le premier paramètre du constructeur.</dd> + <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt> + <dd>Spécifie un modèle de vibration pour les périphériques dotés d'un matériel de vibration à émettre.</dd> +</dl> + +<h3 id="Gestionnaires_dévénements">Gestionnaires d'événements</h3> + +<dl> + <dt>{{domxref("Notification.onclick")}}</dt> + <dd>Un gestionnaire pour l'événement {{domxref ("Element/click_event", "click")}}. Il est déclenché à chaque fois que l'utilisateur clique sur la notification.</dd> + <dt>{{domxref("Notification.onclose")}}</dt> + <dd>Un gestionnaire pour l'événement {{domxref ("HTMLDialogElement/close_event", "close")}}. Il est déclenché lorsque l'utilisateur ferme la notification.</dd> + <dt>{{domxref("Notification.onerror")}}</dt> + <dd>Un gestionnaire pour l'événement {{domxref ("HTMLElement/error_event", "error")}}. Il est déclenché chaque fois que la notification rencontre une erreur.</dd> + <dt>{{domxref("Notification.onshow")}}</dt> + <dd>Un gestionnaire pour l'événement {{domxref ("Element/show_event", "show")}}. Il est déclenché lorsque la notification est affichée.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<h3 id="Méthodes_statiques">Méthodes statiques</h3> + +<p><em>Ces méthodes ne sont disponibles que sur l'objet </em><code>Notification</code> <em>lui-même.</em></p> + +<dl> + <dt>{{domxref("Notification.requestPermission()")}}</dt> + <dd>Demande l'autorisation à l'utilisateur d'afficher les notifications.</dd> +</dl> + +<h3 id="Méthodes_dinstance">Méthodes d'instance</h3> + +<p><em>Ces propriétés ne sont disponibles que sur une instance de l'objet </em><code>Notification</code><em> ou via son </em><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a><em>. L'objet </em><code>Notification</code><em> hérite également de l'interface {{domxref ("EventTarget")}}.</em></p> + +<dl> + <dt>{{domxref("Notification.close()")}}</dt> + <dd>Ferme programmatiquement une instance de notification.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<p>Supposons ce HTML de base:</p> + +<pre class="brush: html notranslate"><button onclick="notifyMe()">Notifie moi !</button></pre> + +<p>Il est possible d'envoyer une notification comme suit - nous présentons ici un ensemble de code assez détaillé et complet que vous pourriez utiliser si vous vouliez d'abord vérifier si les notifications sont prises en charge, puis vérifiez si l'autorisation a été accordée pour l'{{glossary("Origin","origine")}} actuelle d'envoyer des notifications, puis demander l'autorisation si nécessaire, avant d'envoyer une notification.</p> + +<pre class="brush: js notranslate">function notifyMe() { + // Vérifions si le navigateur prend en charge les notifications + if (!('Notification' in window)) { + alert('Ce navigateur ne prend pas en charge la notification de bureau') + } + + // Vérifions si les autorisations de notification ont déjà été accordées + else if (Notification.permission === 'granted') { + // Si tout va bien, créons une notification + const notification = new Notification('Salut toi!') + } + + // Sinon, nous devons demander la permission à l'utilisateur + else if (Notification.permission !== 'denied') { + Notification.requestPermission().then((permission) => { + // Si l'utilisateur accepte, créons une notification + if (permission === 'granted') { + const notification = new Notification('Salut toi!') + } + }) + } + + // Enfin, si l'utilisateur a refusé les notifications, et que vous + // voulez être respectueux, il n'est plus nécessaire de les déranger. +} +</pre> + +<p>Nous ne montrons plus d'exemple en direct sur cette page, car Chrome et Firefox n'autorisent plus les demandes de notification des {{htmlelement ("iframe")}}s d'origine croisée, avec d'autres navigateurs à suivre. Pour voir un exemple en action, consultez notre <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">exemple de liste de tâches</a> (voir également l'<a href="https://mdn.github.io/to-do-notifications/">application en cours d'exécution</a>.)</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: dans l'exemple ci-dessus, nous générons des notifications en réponse à un geste de l'utilisateur (en cliquant sur un bouton). Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.</p> +</div> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div> + +<p>{{Compat("api.Notification")}}</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> +</ul> diff --git a/files/fr/web/api/notification/lang/index.html b/files/fr/web/api/notification/lang/index.html new file mode 100644 index 0000000000..6a0d93759f --- /dev/null +++ b/files/fr/web/api/notification/lang/index.html @@ -0,0 +1,55 @@ +--- +title: Notification.lang +slug: Web/API/notification/lang +tags: + - API + - API Notifications + - Notification + - Notifications + - Propriété + - Reference +translation_of: Web/API/Notification/lang +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><span class="seoSummary">La propriété en lecture seule <strong><code>lang</code></strong> de l'interface {{domxref ("Notification")}} indique la langue utilisée dans la notification, comme définis à l'aide de l'option <code>lang</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.</span></p> + +<p>La langue elle-même est spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant <a href="http://www.rfc-editor.org/rfc/bcp/bcp47.txt">une balise de langue BCP 47</a>. Consultez la page des <a href="http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/">codes de langue à 2 lettres ISO</a> de Sitepoint pour une référence simple.</p> + +<h2 id="Syntaxz">Syntaxz</h2> + +<pre class="syntaxbox notranslate"><var>N</var><var>otification</var>.lang +</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>Une {{domxref("DOMString")}} spécifiant la balise de langue.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-lang','lang')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div> + +<p>{{Compat("api.Notification.lang")}}</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> +</ul> diff --git a/files/fr/web/api/notification/maxactions/index.html b/files/fr/web/api/notification/maxactions/index.html new file mode 100644 index 0000000000..75c6bb0192 --- /dev/null +++ b/files/fr/web/api/notification/maxactions/index.html @@ -0,0 +1,65 @@ +--- +title: Notification.maxActions +slug: Web/API/notification/maxActions +tags: + - API + - API Notifications + - Notification + - Notifications + - Propriété + - Reference + - actions +translation_of: Web/API/Notification/maxActions +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p>L'attribut <strong><code>maxActions</code></strong> de l'interface {{domxref ("Notification")}} renvoie le nombre maximal d'actions prises en charge par l'appareil et l'agent utilisateur. En effet, c'est le nombre maximum d'éléments dans le tableau {{domxref ("Notification.actions")}} qui seront respectés par l'agent utilisateur.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox notranslate"><var>Notification</var>.maxActions +</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>Un entier {{JSxRef ("Number")}} qui indique le plus grand nombre d'actions de notification pouvant être présentées à l'utilisateur par l'agent utilisateur et l'appareil.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>L'extrait de code suivant enregistre le nombre maximal d'actions prises en charge.</p> + +<pre class="brush: js notranslate">const { maxActions } = Notification +console.log(`This device can display at most ${maxActions} actions on each notification.`); +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Web Notifications")}}</td> + <td>{{Spec2("Web Notifications")}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div> + +<p>{{Compat("api.Notification.maxActions")}}</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li>{{domxref("Notification.actions")}}</li> +</ul> diff --git a/files/fr/web/api/notification/notification/index.html b/files/fr/web/api/notification/notification/index.html new file mode 100644 index 0000000000..7a88a02ec3 --- /dev/null +++ b/files/fr/web/api/notification/notification/index.html @@ -0,0 +1,98 @@ +--- +title: Notification() +slug: Web/API/notification/Notification +tags: + - API + - API Notifications + - Constructeur + - Notification + - Notifications + - Reference +translation_of: Web/API/Notification/Notification +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><span class="seoSummary">Le constructeur <strong><code>Notification()</code></strong> crée une nouvelle instance d'objet {{domxref ("Notification")}}, qui représente une notification utilisateur.</span></p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox notranslate">const <var>myNotification</var> = new Notification(<var>title</var>, <var>options</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code><var>title</var></code></dt> + <dd>Définit un titre pour la notification, qui s'affiche en haut de la fenêtre de notification.</dd> + <dt><code><var>options</var></code> {{optional_inline}}</dt> + <dd>Un objet d'options contenant tous les paramètres personnalisés que vous souhaitez appliquer à la notification. Les options possibles sont: + <ul> + <li><code>dir</code>: La direction dans laquelle afficher la notification. La valeur par défaut est <code>auto</code>, qui adopte simplement le comportement du paramètre de langue du navigateur, mais vous pouvez remplacer ce comportement en définissant les valeurs de <code>ltr</code> et <code>rtl</code> (bien que la plupart des navigateurs semblent ignorer ces paramètres.)</li> + <li><code>lang</code>: La langue de la notification, telle que spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant une <a href="http://www.rfc-editor.org/rfc/bcp/bcp47.txt">balise de langue BCP 47</a>. Consultez la page des <a href="http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/">codes de langue à 2 lettres ISO</a> de Sitepoint pour une référence simple.</li> + <li><code>badge</code>: Un {{domxref ("USVString")}} contenant l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.</li> + <li><code>body</code>: Un {{domxref ("DOMString")}} représentant le corps du texte de la notification, qui est affiché sous le titre.</li> + <li><code>tag</code>: Un {{domxref ("DOMString")}} représentant un tag d'identification pour la notification.</li> + <li><code>icon</code>: Une {{domxref ("USVString")}} contenant l'URL d'une icône à afficher dans la notification.</li> + <li><code>image</code>: Une {{domxref ("USVString")}} contenant l'URL d'une image à afficher dans la notification.</li> + <li><code>data</code>: Données arbitraires que vous souhaitez associer à la notification. Elles peuvent être de n'importe quel type de données.</li> + <li><code>vibrate</code>: Un <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/API/Vibration#Vibration_patterns">modèle de vibration</a> que le matériel de vibration de l'appareil émet avec la notification.</li> + <li><code>renotify</code>: Un {{domxref ("Boolean")}} spécifiant si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne. La valeur par défaut est <code>false</code>, ce qui signifie qu'ils ne seront pas notifiés.</li> + <li><code>requireInteraction</code>: Un {{domxref ("Boolean")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. La valeur par défaut est <code>false</code>.</li> + <li><code>actions</code>: Un tableau de {{domxref ("NotificationAction")}} représentant les actions disponibles pour l'utilisateur lorsque la notification est présentée. Ce sont des options parmi lesquelles l'utilisateur peut choisir pour agir sur l'action dans le contexte de la notification elle-même. Le nom de l'action est envoyé au gestionnaire de notifications du service worker pour lui faire savoir que l'action a été sélectionnée par l'utilisateur.</li> + <li><code>silent</code>: Un {{domxref ("Boolean")}} spécifiant si la notification est silencieuse (aucun son ni vibration émis), quels que soient les paramètres de l'appareil. La valeur par défaut est <code>false</code>, ce qui signifie qu'il ne sera pas silencieux.</li> + </ul> + </dd> +</dl> + +<h2 id="Exemple">Exemple</h2> + +<p>Dans notre <a href="https://chrisdavidmills.github.io/emogotchi/">démo Emogotchi</a> (<a href="https://github.com/mdn/emogotchi">voir le code source</a>), nous exécutons une fonction <code>spawnNotification()</code> lorsque nous voulons déclencher une notification. La fonction reçoit des paramètres pour spécifier le corps, l'icône et le titre souhaités, puis elle crée l'objet <code>options</code> nécessaire et déclenche la notification à l'aide du constructeur <code>Notification()</code>.</p> + +<pre class="brush: js notranslate">function spawnNotification(theBody, theIcon, theTitle) { + const options = { + body: theBody, + icon: theIcon + } + const n = new Notification(theTitle, options) +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Web Notifications","#dom-notification-notification","Notification() constructor")}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div> + +<p>{{Compat("api.Notification.Notification")}}</p> + +<h3 id="Notes_Chrome">Notes Chrome</h3> + +<p>À partir de Chrome 49, les notifications ne fonctionnent pas en mode navigation privée.</p> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}</p> + +<h3 id="Notes_Internet_Explorer">Notes Internet Explorer</h3> + +<p>La version 38.14352 et celles supérieure de MS Edge prend en charge l'<code>API Notification</code>. <a href="https://en.wikipedia.org/wiki/Microsoft_Edge#Release_history">Wikipédia - MS Edge</a><br> + IE 11 et inférieur n'est pas pris en charge.</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> +</ul> diff --git a/files/fr/web/api/notification/onclick/index.html b/files/fr/web/api/notification/onclick/index.html new file mode 100644 index 0000000000..209d7c519f --- /dev/null +++ b/files/fr/web/api/notification/onclick/index.html @@ -0,0 +1,63 @@ +--- +title: Notification.onclick +slug: Web/API/notification/onclick +tags: + - API + - DOM + - Notifications + - Propriété + - Reference + - onclick +translation_of: Web/API/Notification/onclick +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p>La propriété <strong><code>onclick</code></strong>, rattachée à l'interface {{domxref("Notification")}}, définit un gestionnaire d'évènement à déclencher lorsque la notification recçoit un évènement {{event("click")}} (qui se produit lorsqu'un utilisateur clique sur la notification).</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox"><em>Notification</em>.onclick = function(event) { ... }; +</pre> + +<p>Le comportement par défaut consiste à déplacer le focus sur la zone d'affichage (<em>viewport</em>) du <a href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context">contexte de navigation</a> de la notification. Pour éviter ce comportement, on pourra appeler la méthode <code><a href="/fr/docs/Web/API/Event/preventDefault">preventDefault()</a></code> sur l'objet représentant l'évènement.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans l'exemple qui suit, on utilise le gestionnaire d'évènement <code>onclick</code> pour ouvrir une page dans un nouvel onglet (avec le paramètre <code>'_blank'</code>) lorsqu'on clique sur la notification :</p> + +<pre class="brush: js">notification.onclick = function(event) { + event.preventDefault(); // empêcher le navigateur de passer le focus sur l'onglet de la navigation + window.open('http://www.mozilla.org', '_blank'); +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-onclick','onclick')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Standard évolutif</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Notification.onclick")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Notification")}}</li> + <li><a href="/fr/docs/Web/API/notification/Using_Web_Notifications">Utiliser l'API Notifications</a></li> +</ul> diff --git a/files/fr/web/api/notification/onclose/index.html b/files/fr/web/api/notification/onclose/index.html new file mode 100644 index 0000000000..2f3b5d6781 --- /dev/null +++ b/files/fr/web/api/notification/onclose/index.html @@ -0,0 +1,35 @@ +--- +title: Notification.onclose +slug: Web/API/notification/onclose +tags: + - API + - API Notifications + - Notification + - Notifications + - Propriété + - Reference + - onclose +translation_of: Web/API/Notification/onclose +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><span class="seoSummary">La propriété <strong><code>onclose</code></strong> de l'interface {{domxref ("Notification")}} définit un écouteur d'événements pour recevoir les événements {{domxref ("HTMLDialogElement/close_event", "close")}}. Ces événements se produisent lorsqu'une {{domxref ("Notification")}} est fermée.</span></p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox notranslate"><var>Notification</var>.onclose = function(event) { ... } +Notification.onclose = (event) => { ... } +</pre> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div> + +<p>{{Compat("api.Notification.onclose")}}</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li>{{domxref("Notification")}}</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> +</ul> diff --git a/files/fr/web/api/notification/onerror/index.html b/files/fr/web/api/notification/onerror/index.html new file mode 100644 index 0000000000..67554d5a83 --- /dev/null +++ b/files/fr/web/api/notification/onerror/index.html @@ -0,0 +1,54 @@ +--- +title: Notification.onerror +slug: Web/API/notification/onerror +tags: + - API + - API Notifications + - Notification + - Notifications + - Propriété + - Reference + - onerror +translation_of: Web/API/Notification/onerror +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><span class="seoSummary">La propriété <strong><code>onerror</code></strong> de l'interface {{domxref ("Notification")}} spécifie un écouteur d'événements pour recevoir les événements {{domxref ("HTMLElement/error_event", "error")}}. Ces événements se produisent lorsque quelque chose ce déroule mal avec une {{domxref ("Notification")}}</span> (dans de nombreux cas, une erreur qui empêche l'affichage de la notification.)</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox notranslate"><var>Notification</var>.onerror = function(event) { ... } +<var>Notification</var>.onerror = (even) => { ... } +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-onerror','onerror')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div> + +<p>{{Compat("api.Notification.onerror")}}</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li>{{domxref("Notification")}}</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> +</ul> diff --git a/files/fr/web/api/notification/onshow/index.html b/files/fr/web/api/notification/onshow/index.html new file mode 100644 index 0000000000..1f77b326e5 --- /dev/null +++ b/files/fr/web/api/notification/onshow/index.html @@ -0,0 +1,35 @@ +--- +title: Notification.onshow +slug: Web/API/notification/onshow +tags: + - API + - API Notifications + - Notification + - Notifications + - Propriété + - Reference + - onshow +translation_of: Web/API/Notification/onshow +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><span class="seoSummary">La propriété <strong><code>onshow</code></strong> de l'interface {{domxref ("Notification")}} définit un écouteur d'événements pour recevoir des événements {{domxref ("Element/show_event", "show")}}. Ces événements se produisent lorsqu'une {{domxref ("Notification")}} est affiché.</span></p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox notranslate"><var>Notification</var>.onshow = function() { ... } +<var>Notification</var>.onshow = () => { ... } +</pre> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div> + +<p>{{Compat("api.Notification.onshow")}}</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li>{{domxref("Notification")}}</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> +</ul> diff --git a/files/fr/web/api/notification/permission/index.html b/files/fr/web/api/notification/permission/index.html new file mode 100644 index 0000000000..dc74126304 --- /dev/null +++ b/files/fr/web/api/notification/permission/index.html @@ -0,0 +1,95 @@ +--- +title: Notification.permission +slug: Web/API/notification/permission +tags: + - API + - API Notifications + - Notification + - Notifications + - Propriété + - Reference +translation_of: Web/API/Notification/permission +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><span class="seoSummary">La propriété en lecture seule <strong><code>permission</code></strong> de l'interface {{domxref ("Notification")}} indique l'autorisation actuelle accordée par l'utilisateur à l'origine actuelle pour afficher des notifications.</span></p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox notranslate">Notification.permission</pre> + +<h3 id="Return_Value" name="Return_Value">Valeur</h3> + +<p>Une {{domxref("DOMString")}} représentant l'autorisation actuelle. La valeur peut être:</p> + +<ul> + <li><code>granted</code>: L'utilisateur a explicitement accordé l'autorisation à l'origine actuelle d'afficher les notifications système.</li> + <li><code>denied</code>: L'utilisateur a explicitement refusé l'autorisation pour l'origine actuelle d'afficher les notifications système.</li> + <li><code>default</code>: La décision de l'utilisateur est inconnue; dans ce cas, l'application agira comme si l'autorisation était <code>denied</code>.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<p>L'extrait suivant peut être utilisé si vous souhaitez d'abord vérifier si les notifications sont prises en charge, puis vérifier si l'autorisation a été accordée pour l'origine actuelle pour envoyer des notifications, puis demander l'autorisation si nécessaire, avant d'envoyer une notification.</p> + +<pre class="brush: js notranslate">function notifyMe() { + // Let's check if the browser supports notifications + if (!('Notification' in window)) { + console.log('This browser does not support desktop notification') + } + + // Let's check whether notification permissions have alredy been granted + else if (Notification.permission === 'granted') { + // If it's okay let's create a notification + const notification = new Notification('Hi there!') + } + + // Otherwise, we need to ask the user for permission + else if ( + Notification.permission !== 'denied' || + Notification.permission === 'default' + ) { + Notification.requestPermission((permission) => { + // If the user accepts, let's create a notification + if (permission === 'granted') { + const notification = new Notification('Hi there!') + } + }) + } + + // At last, if the user has denied notifications, and you + // want to be respectful there is no need to bother them any more. +} +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName("Web Notifications","#dom-notification-permission","permission")}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div> + +<p>{{Compat("api.Notification.permission")}}</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li><a href="/docs/Web/API/Notifications_API">API de notifications</a></li> + <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/en-US/docs/Web/API/Permissions_API">Permissions d'API</a></li> + <li><a href="/en-US/docs/Web/API/Permissions_API/Using_the_Permissions_API">Utilisation des permissions d'API</a></li> +</ul> diff --git a/files/fr/web/api/notification/renotify/index.html b/files/fr/web/api/notification/renotify/index.html new file mode 100644 index 0000000000..f8fb3b91e3 --- /dev/null +++ b/files/fr/web/api/notification/renotify/index.html @@ -0,0 +1,58 @@ +--- +title: Notification.renotify +slug: Web/API/notification/renotify +tags: + - API + - API Notifications + - Experimental + - Notification + - Notifications + - Propriété + - Reference + - renotifier + - renotify +translation_of: Web/API/Notification/renotify +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><span class="seoSummary">La propriété en lecture seule <strong><code>renotify</code></strong> de l'interface {{domxref ("Notification")}} spécifie si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne, comme spécifié comme définis à l'aide de l'option <code>renotify</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification"," Notification()")}}.</span></p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox notranslate"><var>Notification</var>.renotify +</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>Un {{domxref("Boolean")}}. <code>false</code> est la valeur par défaut; <code>true</code> oblige la notification à renotifier l'utilisateur.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-renotify','renotify')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div> + +<p>{{Compat("api.Notification.renotify")}}</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> +</ul> diff --git a/files/fr/web/api/notification/requestpermission/index.html b/files/fr/web/api/notification/requestpermission/index.html new file mode 100644 index 0000000000..75ccee7809 --- /dev/null +++ b/files/fr/web/api/notification/requestpermission/index.html @@ -0,0 +1,121 @@ +--- +title: Notification.requestPermission() +slug: Web/API/notification/requestPermission +tags: + - API + - API Notifications + - Méthode + - Notification + - Notifications + - Reference +translation_of: Web/API/Notification/requestPermission +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<div class="note"> +<p><strong>Note:</strong> Cette fonctionnalité n'est pas disponible dans {{domxref("SharedWorker")}}</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: Safari utilise toujours la syntaxe de function de rappel (callback ) pour obtenir l'autorisation. Lisez <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a> pour un bon exemple de la fonctionnalité de détection et d'exécution du code le cas échéant.</p> +</div> + +<p><span class="seoSummary">La méthode <strong><code>requestPermission()</code></strong> de l'interface {{domxref ("Notification")}} demande l'autorisation à l'utilisateur pour l'origine actuelle d'afficher des notifications.</span></p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>La dernière spécification a mis à jour cette méthode avec une syntaxe basée sur une promesse qui fonctionne comme ceci:</p> + +<pre class="notranslate">Notification.requestPermission() + .then((permission) => { ... })</pre> + +<p>Auparavant, la syntaxe était basée sur un simple rappel; cette version est désormais obsolète:</p> + +<pre class="notranslate">Notification.requestPermission(<var>callback</var>);</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code><var>callback</var></code> {{optional_inline}} {{deprecated_inline("gecko46")}}</dt> + <dd>Une fonction de rappel facultative qui est appelée avec la valeur d'autorisation. Déconseillé en faveur de la valeur de retour de la promesse.</dd> +</dl> + +<h3 id="Retour">Retour</h3> + +<p>Une {{jsxref ("Promise", "Promesse")}} qui se résout en une {{domxref ("DOMString")}} avec la permission choisie par l'utilisateur. Les valeurs possibles pour cette chaîne sont:</p> + +<ul> + <li><code>granted</code></li> + <li><code>denied</code></li> + <li><code>default</code></li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<p>Supposons ce HTML de base:</p> + +<pre class="brush: html notranslate"><button onclick="notifyMe()">Notifie moi !</button></pre> + +<p>Il est possible d'envoyer une notification comme suit - nous présentons ici un ensemble de code assez détaillé et complet que vous pourriez utiliser si vous vouliez d'abord vérifier si les notifications sont prises en charge, puis vérifiez si l'autorisation a été accordée pour l'origine actuelle d'envoyer des notifications, puis demander l'autorisation si nécessaire, avant d'envoyer une notification.</p> + +<pre class="brush: js notranslate">function notifyMe() { + // Vérifions si le navigateur prend en charge les notifications + if (!('Notification' in window)) { + alert('Ce navigateur ne prend pas en charge la notification de bureau') + } + + // Vérifions si les autorisations de notification ont déjà été accordées + else if (Notification.permission === 'granted') { + // Si tout va bien, créons une notification + const notification = new Notification('Salut toi!') + } + + // Sinon, nous devons demander la permission à l'utilisateur + else if (Notification.permission !== 'denied') { + Notification.requestPermission().then((permission) => { + // Si l'utilisateur accepte, créons une notification + if (permission === 'granted') { + const notification = new Notification('Salut toi!') + } + }) + } + + // Enfin, si l'utilisateur a refusé les notifications, et que vous + // voulez être respectueux, il n'est plus nécessaire de les déranger. +} +</pre> + +<p>Nous ne montrons plus d'exemple en direct sur cette page, car Chrome et Firefox n'autorisent plus les demandes de notification des {{htmlelement ("iframe")}}s d'origine croisée, avec d'autres navigateurs à suivre. Pour voir un exemple en action, consultez notre <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">exemple de liste de tâches</a> (voir également l'<a href="https://mdn.github.io/to-do-notifications/">application en cours d'exécution</a>.)</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: dans l'exemple ci-dessus, nous générons des notifications en réponse à un geste de l'utilisateur (en cliquant sur un bouton). Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.</p> +</div> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div> + +<p>{{Compat("api.Notification.requestPermission")}}</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> +</ul> diff --git a/files/fr/web/api/notification/requireinteraction/index.html b/files/fr/web/api/notification/requireinteraction/index.html new file mode 100644 index 0000000000..7ee5e2b6f0 --- /dev/null +++ b/files/fr/web/api/notification/requireinteraction/index.html @@ -0,0 +1,54 @@ +--- +title: Notification.requireInteraction +slug: Web/API/notification/requireInteraction +tags: + - API + - API Notifications + - Notification + - Notifications + - Propriété + - Reference + - Web + - requireInteraction +translation_of: Web/API/Notification/requireInteraction +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p>La propriété en lecture seule <strong><code>requireInteraction</code></strong> de l'interface {{domxref ("Notification")}} renvoie un {{jsxref ("Boolean")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. Ceci peut être défini à l'aide de l'option <code>requireInteraction</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification()")}}.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="brush: js notranslate">Notification.requireInteraction</pre> + +<h3 id="Return_Value" name="Return_Value">Valeur</h3> + +<p>Un {{jsxref("Boolean")}}.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-requireinteraction','requireInteraction')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div> + +<p>{{Compat("api.Notification.requireInteraction")}}</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> +</ul> diff --git a/files/fr/web/api/notification/silent/index.html b/files/fr/web/api/notification/silent/index.html new file mode 100644 index 0000000000..bfbf316658 --- /dev/null +++ b/files/fr/web/api/notification/silent/index.html @@ -0,0 +1,56 @@ +--- +title: Notification.silent +slug: Web/API/notification/silent +tags: + - API + - API Notifications + - Notifications + - Propriété + - Reference + - Vibration + - Vibreur + - silencieuse + - silent +translation_of: Web/API/Notification/silent +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><span class="seoSummary">La propriété en lecture seule <strong><code>silent</code></strong> de l'interface {{domxref ("Notification")}} spécifie si la notification doit être silencieuse, c'est-à-dire qu'aucun son ou vibration ne doit être émis, quels que soient les paramètres de l'appareil. Ceci est comme définis à l'aide de l'option <code>silent</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()")}}.</span></p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox notranslate"><var>Notification</var>.silent +</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>Un {{domxref("Boolean")}}. <code>false</code> est la valeur par défaut; <code>true</code> rend la notification silencieuse.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-silent','silent')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div> + +<p>{{Compat("api.Notification.silent")}}</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> +</ul> diff --git a/files/fr/web/api/notification/tag/index.html b/files/fr/web/api/notification/tag/index.html new file mode 100644 index 0000000000..853bde6928 --- /dev/null +++ b/files/fr/web/api/notification/tag/index.html @@ -0,0 +1,57 @@ +--- +title: Notification.tag +slug: Web/API/notification/tag +tags: + - API + - API Notifications + - Balise + - Notification + - Notifications + - Propriété + - Reference + - tag +translation_of: Web/API/Notification/tag +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p>La propriété en lecture seule <code><strong>tag</strong></code> de l'interface {{domxref ("Notification")}} correspond à une balise d'identification pour la notification, comme définis à l'aide de l'option <code>tag</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.</p> + +<p>L'idée des balises de notification est que plusieurs notifications peuvent partager la même balise, les reliant entre elles. Une notification peut ensuite être programmatiquement remplacée par une autre pour éviter que l'écran des utilisateurs ne soit rempli d'un grand nombre de notifications similaires.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox notranslate"><var>Notification</var>.tag +</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>Une {{domxref("DOMString")}}.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-tag','tag')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div> + +<p>{{Compat("api.Notification.tag")}}</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> +</ul> diff --git a/files/fr/web/api/notification/timestamp/index.html b/files/fr/web/api/notification/timestamp/index.html new file mode 100644 index 0000000000..7dc7b3ccc2 --- /dev/null +++ b/files/fr/web/api/notification/timestamp/index.html @@ -0,0 +1,56 @@ +--- +title: Notification.timestamp +slug: Web/API/notification/timestamp +tags: + - API + - API Notifications + - Notification + - Notifications + - Propriété + - Reference + - horodatage + - timeStamp +translation_of: Web/API/Notification/timestamp +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><span class="seoSummary">La propriété en lecture seule <strong><code>timestamp</code></strong> de l'interface {{domxref ("Notification")}} renvoie un {{domxref ("DOMTimeStamp")}}, comme définis à l'aide de l'option <code>timestamp</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()")}}.</span></p> + +<p>L'horodatage de la notification peut représenter le moment, en millisecondes depuis 00:00:00 UTC le 1er janvier 1970, de l'événement pour lequel la notification a été créée, ou il peut s'agir d'un horodatage arbitraire que vous souhaitez associer à la notification. Par exemple, un horodatage pour une réunion à venir pourrait être défini dans le futur, tandis qu'un horodatage pour un message manqué pourrait être défini dans le passé.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox notranslate"><var>Notification</var>.timestamp</pre> + +<h3 id="Return_Value" name="Return_Value">Valeur</h3> + +<p>Un {{domxref("DOMTimeStamp")}}.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-timestamp','timestamp')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div> + +<p>{{Compat("api.Notification.timestamp")}}</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> +</ul> diff --git a/files/fr/web/api/notification/title/index.html b/files/fr/web/api/notification/title/index.html new file mode 100644 index 0000000000..8f98272a23 --- /dev/null +++ b/files/fr/web/api/notification/title/index.html @@ -0,0 +1,54 @@ +--- +title: Notification.title +slug: Web/API/notification/title +tags: + - API + - API Notifications + - Notification + - Notifications + - Propriété + - Reference + - Title + - Titre +translation_of: Web/API/Notification/title +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><span class="seoSummary">La propriété en lecture seule <strong><code>title</code></strong> de l'interface {{domxref ("Notification")}} indique le titre de la notification, comme définis à l'aide de l'option <code>silent</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()") }} constructeur.</span></p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox notranslate"><var>Notification</var>.title</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>Une {{domxref("DOMString")}}.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-title','title')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div> + +<p>{{Compat("api.Notification.title")}}</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> +</ul> diff --git a/files/fr/web/api/notification/using_web_notifications/index.html b/files/fr/web/api/notification/using_web_notifications/index.html new file mode 100644 index 0000000000..796e7d152a --- /dev/null +++ b/files/fr/web/api/notification/using_web_notifications/index.html @@ -0,0 +1,275 @@ +--- +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"><button>Notifiez moi!</button></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 && 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 && 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 && 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"><button>Notifie moi!</button></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 && 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 && Notification.permission === "granted") { + for (var i = 0; i < 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 && 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 < 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> diff --git a/files/fr/web/api/notification/vibrate/index.html b/files/fr/web/api/notification/vibrate/index.html new file mode 100644 index 0000000000..e4bc2a99d6 --- /dev/null +++ b/files/fr/web/api/notification/vibrate/index.html @@ -0,0 +1,56 @@ +--- +title: Notification.vibrate +slug: Web/API/notification/vibrate +tags: + - API + - API Notifications + - Notification + - Notifications + - Propriété + - Reference + - Vibration + - Vibreur + - vibrate +translation_of: Web/API/Notification/vibrate +--- +<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> + +<p><span class="seoSummary">La propriété en lecture seule <strong><code>vibrate</code></strong> de l'interface {{domxref ("Notification")}} spécifie un modèle de vibration que le matériel de vibration de l'appareil doit émettre lorsque la notification se déclenche. Ceci est comme définis à l'aide de l'option <code>vibrate</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification ()")}}.</span></p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox notranslate"><var>Notification</var>.vibrate +</pre> + +<h3 id="Return_Value" name="Return_Value">Valeur</h3> + +<p>Un <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/API/Vibration#Vibration_patterns">modèle de vibration</a>, tel que spécifié dans la spécification de l'{{domxref ("Vibration_API", "Api de Vibration")}}.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-vibrate','vibrate')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div> + +<p>{{Compat("api.Notification.vibrate")}}</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> +</ul> |