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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
|
---
title: Notificações
slug: Web/API/Notification
tags:
- API
- Interface
- Notificações
translation_of: Web/API/Notification
original_slug: Web/API/notificacoes
---
<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
<p>A interface da <a href="/en-US/docs/Web/API/Notifications_API">API de Notificações</a> é usada para configurar e exibir notificações na área de trabalho do usuário. A aparência e algumas funcionalidades específicas das notificações variam entre as plataformas mas geralmente eles fornecem uma forma assíncrona de prover informações para o usuário.</p>
<h2 id="Construtor">Construtor</h2>
<dl>
<dt>{{domxref("Notification.Notification", "Notification()")}}</dt>
<dd>Cria uma nova instancia do objeto {{domxref('Notification')}}.</dd>
</dl>
<h2 id="Propriedades">Propriedades</h2>
<h3 id="Propriedades_estáticas">Propriedades estáticas</h3>
<p>Estas propriedades estão disponíveis apenas no próprio objeto <code>Notification</code>.</p>
<dl>
<dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt>
<dd>
<div id="gt-src-tools">
<div id="gt-src-tools-l"></div>
</div>
<div id="gt-input-tool">
<div id="tts_button">Uma sequência de caracteres que representa a permissão atual para exibir notificações. Valor possíveis são: "denied" (o usuário se recusa a ter notificações exibidas), "granted" (o usuário aceita ter notificações exibidas) ou "default" (a escolha do usuário é desconhecido e, portanto, o navegador irá agir como se o valor foram negados).</div>
</div>
</dd>
</dl>
<h3 id="Propriedades_da_instância">Propriedades da instância</h3>
<p>Estas propriedades estão disponíveis apenas em instâncias do objeto <code>Notification</code>.</p>
<dl>
<dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt>
<dd>Retorna o título da notificação conforme foi definido no parâmetro opções do construtor.</dd>
<dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt>
<dd>A direção do texto da notificação, conforme especificado no parâmetro opções do construtor.</dd>
<dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt>
<dd>
<div id="gt-src-tools">
<div id="tts_button">O código de idioma da notificação, conforme especificado no parâmetro opções do construtor.</div>
</div>
</dd>
<dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt>
<dd>O corpo(mensagem) da notificação, conforme especificado no parâmetro opções do construtor.</dd>
<dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt>
<dd>O ID da notificação (se houver), conforme especificado no parâmetro opções do construtor.</dd>
<dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt>
<dd>A URL da imagem usada como um ícone da notificação, conforme especificado no parâmetro opções do construtor.</dd>
<dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt>
<dd>Retorna um clone estruturado de dados da notificação.</dd>
<dt>{{domxref("Notification.silent")}} {{readonlyinline}}</dt>
<dd>
<div id="gt-src-tools">
<div id="tts_button">Especifica se a notificação deve ser silenciosa, ou seja, sons ou vibrações não devem ser emitidos, independentemente das configurações do dispositivo.</div>
</div>
</dd>
</dl>
<h4 id="Propriedades_não_suportadas">Propriedades não suportadas</h4>
<p>As propriedades a seguir estão listados na especificação mais up-to-date, mas não são suportadas em quaisquer navegadores ainda. É aconselhável manter a verificação de volta regularmente para ver se o status destes actualiza, e deixe-nos saber se você encontrar qualquer informações desatualizadas.</p>
<dl>
<dt>{{domxref("Notification.noscreen")}} {{readonlyinline}}</dt>
<dd>
<div id="gt-src-tools">
<div id="tts_button">Especifica se o disparo notificação deve permitir que a tela do dispositivo ou não.</div>
</div>
</dd>
<dt>{{domxref("Notification.renotify")}} {{readonlyinline}}</dt>
<dd>
<div id="gt-src-tools">
<div id="tts_button">Especifica se o usuário deve ser notificado após uma nova notificação substitui um antigo.</div>
</div>
</dd>
<dt>{{domxref("Notification.sound")}} {{readonlyinline}}</dt>
<dd>Especifica um recurso de som para reproduzir durante o disparo da notificação, em vez do som de notificação do sistema padrão.</dd>
<dt>{{domxref("Notification.sticky")}} {{readonlyinline}}</dt>
<dd>Especifica se a notificação deve ser "fixa", ou seja, não facilmente eliminável pelo usuário.</dd>
<dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt>
<dd>Especifica um padrão de vibração para dispositivos com hardware de vibração.</dd>
</dl>
<h4 id="Manipuladores_de_Eventos">Manipuladores de Eventos</h4>
<dl>
<dt>{{domxref("Notification.onclick")}}</dt>
<dd>O manipulador para o evento {{event("click")}} é acionado cada vez que o usuário clica sobre a notificação.</dd>
<dt>{{domxref("Notification.onerror")}}</dt>
<dd>O manipulador para o evento {{event("error")}} é acionado quando a notificação encontra um erro.</dd>
</dl>
<h4 id="Manipuladores_Obsoletos">Manipuladores Obsoletos</h4>
<p>Os seguintes manipuladores de eventos ainda são suportados, conforme listado na seção {{anch("browser compatibility")}}. Estes serão listados abaixo, mas não são listados na especificação atual. Saiba que eles são obsoletos, e pode parar de funcionar em versões futuras do navegador.</p>
<dl>
<dt>{{domxref("Notification.onclose")}}</dt>
<dd>Manipulador do evento {{event("close")}} é acionado quando a notificação é fechada.</dd>
<dt>{{domxref("Notification.onshow")}}</dt>
<dd>Manipulador do evento {{event("show")}}. é acionado quando a notificação é exibida.</dd>
</dl>
<h2 id="Métodos">Métodos</h2>
<h3 id="Métodos_Estáticos">Métodos Estáticos</h3>
<p>Estes métodos estão disponíveis apenas no próprio objeto <code>Notification</code>.</p>
<dl>
<dt>{{domxref("Notification.requestPermission()")}}</dt>
<dd>
<div id="gt-src-tools">
<div id="tts_button">Solicita a permissão do usuário para exibir notificações.</div>
</div>
</dd>
</dl>
<h3 id="Métodos_de_instância">Métodos de instância</h3>
<p>Estas propriedades estão disponíveis apenas no objeto Notification ou através do seu <code><a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a></code>. O objeto de notificação também herda a interface {{domxref("EventTarget")}}.</p>
<dl>
<dt>{{domxref("Notification.close()")}}</dt>
<dd>Programaticamente fecha uma notificação.</dd>
</dl>
<h2 id="Exemplos">Exemplos</h2>
<p>Leve em conta este HTML básico:</p>
<pre class="brush: html notranslate"><button onclick="notifyMe()">Notifique me!</button></pre>
<p>É possível enviar uma notificação da seguinte forma - aqui nós apresentamos um conjunto bastante detalhado e completo de código que você pode usar se você quiser verificar primeiro se as notificações são suportados, em seguida, verifique se a permissão foi concedida para a origem atual para enviar notificações, em seguida, solicitar permissão, se necessário, antes, em seguida, enviar uma notificação.</p>
<pre class="brush: js notranslate">function notifyMe() {
// Verifica se o browser suporta notificações
if (!("Notification" in window)) {
alert("Este browser não suporta notificações de Desktop");
}
// Let's check whether notification permissions have already been granted
else if (Notification.permission === "granted") {
// If it's okay let's create a notification
var notification = new Notification("Hi there!");
}
// Otherwise, we need to ask the user for permission
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
// If the user accepts, let's create a notification
if (permission === "granted") {
var 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>
<p>{{EmbedLiveSample('Exemplo', '100%', 30)}}</p>
<p>Em muitos casos, você não precisa estar presente detalhado. Por exemplo, na nosso <a href="http://mdn.github.io/emogotchi/">Emogotchi demo</a> (<a href="https://github.com/mdn/emogotchi">veja o código fonte</a>), basta simlesmente executar {{domxref("Notification.requestPermission")}} independentemente de se certificar de que pode obter permissão para enviar notificações:</p>
<pre class="brush: js notranslate">Notification.requestPermission();</pre>
<p>Em seguida executar um simples <code>spawnNotification()</code> quando queremos disparar uma notificação — este é passado argumentos para especificar o, ícone corpo e título que queremos, então ele cria as opções necessárias objeto e dispara a notificação usando o construtor {{domxref("Notification.Notification","Notification()")}}.</p>
<pre class="brush: js notranslate">function spawnNotification(corpo,icone,titulo) {
var opcoes = {
body: corpo,
icon: icone
}
var n = new Notification(titulo,opcoes);
}</pre>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Estado</th>
<th scope="col">Comentário</th>
</tr>
<tr>
<td>{{SpecName('Web Notifications')}}</td>
<td>{{Spec2('Web Notifications')}}</td>
<td>Living standard</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<p>{{Compat("api.Notification")}}</p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Usando a API de Notificações</a></li>
</ul>
|
