diff options
Diffstat (limited to 'files/pt-br/web/api/notification/index.html')
| -rw-r--r-- | files/pt-br/web/api/notification/index.html | 217 |
1 files changed, 217 insertions, 0 deletions
diff --git a/files/pt-br/web/api/notification/index.html b/files/pt-br/web/api/notification/index.html new file mode 100644 index 0000000000..9103aac190 --- /dev/null +++ b/files/pt-br/web/api/notification/index.html @@ -0,0 +1,217 @@ +--- +title: Notificações +slug: Web/API/notificacoes +tags: + - API + - Interface + - Notificações +translation_of: Web/API/Notification +--- +<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="Compatibilidade_dos_Navegadores">Compatibilidade dos 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> |