1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
|
---
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>
<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>
|
