API de notificações e gerenciamento de permissões

Notification.permission é uma cadeia de caracteres estática que representa o estado atual da permissão. Ela pode ser "granted" (o usuário permitiu), "denied" (o usuário bloqueou) ou "default" (nunca foi solicitada). Verifique essa propriedade antes de tentar mostrar notificações para evitar erros desnecessários.

Notification.requestPermission() retorna uma promessa que é resolvida com a nova cadeia de caracteres de permissão. Chame-a somente em resposta a uma ação clara do usuário, não ao carregar a página. Os navegadores ignoram ou suprimem solicitações de permissão disparadas imediatamente ao carregar a página, e os usuários as consideram incômodas quando aparecem sem contexto.

O padrão mais eficaz é mostrar um aviso dentro do aplicativo explicando o benefício e permitir que o usuário clique em "Ativar notificações" antes de chamar requestPermission(). Isso fornece contexto, aumenta as taxas de aceitação e evita que o navegador marque seu site como indesejado. Nunca solicite permissão ao carregar a página.

new Notification(title, options) cria e exibe uma notificação do sistema. O primeiro argumento é a cadeia de caracteres do título. O objeto options é o segundo argumento e aceita propriedades como body (texto do subtítulo), icon (endereço da imagem) e tag para evitar duplicações. Isso só funciona se a permissão for "granted".

As principais opções de notificação incluem: body para o texto descritivo abaixo do título, icon para uma imagem pequena, badge para o pequeno ícone monocromático exibido na área de notificações do OS, image para uma imagem grande incorporada, tag para substituir uma notificação anterior com a mesma tag e requireInteraction: true para manter a notificação até que o usuário interaja com ela.

A instância de Notification dispara vários eventos: onclick é disparado quando o usuário clica na notificação (use-o para colocar a janela em foco e navegar), onclose é disparado quando ela é dispensada e onerror é disparado se houver um problema ao criá-la. Anexe manipuladores à instância retornada depois de chamar new Notification().

Armazene a instância de Notification retornada em uma variável e chame notification.close() para dispensá-la programaticamente. Isso é útil para notificações que perdem a relevância depois de algum tempo. Combine com setTimeout para fechá-la automaticamente após alguns segundos.

A API de notificações exige um contexto seguro. Em páginas HTTP, typeof Notification === 'undefined' ou a API é completamente desativada, dependendo do navegador. Essa é uma medida de segurança para impedir que sites mal-intencionados inundem os usuários com mensagens falsas do sistema. Sempre verifique a disponibilidade antes de usá-la.

Um gancho useNotifications pode expor dois métodos: requestPermission() e showNotification(title, options). Internamente, ele acompanha o estado atual da permissão e o atualiza depois da solicitação. Os componentes chamam showNotification sem se preocupar com as verificações de permissão, pois o gancho cuida disso internamente.

A API de visibilidade da página expõe document.hidden e o evento de mudança de visibilidade. As notificações fazem mais sentido quando o usuário não está visualizando a aba. Verifique document.hidden === true antes de mostrar uma notificação para evitar alertas redundantes quando a página já estiver em primeiro plano.

A API de notificações apresentada aqui serve para notificações acionadas localmente pela própria página. Para notificações que chegam mesmo quando a página está fechada, você precisa da API de notificações enviadas combinada com um agente de serviço. O agente de serviço recebe o evento de envio e chama self.registration.showNotification() em segundo plano.

Qual das opções a seguir NÃO é um valor válido para Notification.permission?

Notification.permission pode ser granted, denied ou default. Sempre solicite permissão após uma ação do usuário, não ao carregar a página. Use new Notification(title, options) para criar notificações e trate onclick para colocar a janela em foco. Combine com a API de visibilidade para mostrar notificações somente quando a aba estiver oculta.