---
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">&lt;button onclick="notifyMe()"&gt;Notifique me!&lt;/button&gt;</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>