Web Notifications API

Se você trabalha em um site de conteúdo ou em algum produto web, uma possibilidade interessante seria fazer com que o usuário recebesse uma notificação quando houvesse uma nova notícia ou, no caso de produtos, uma notificação do próprio serviço. Com a Notifications API agora é totalmente possível. Caso você queira dar uma olhada na

Se você trabalha em um site de conteúdo ou em algum produto web, uma possibilidade interessante seria fazer com que o usuário recebesse uma notificação quando houvesse uma nova notícia ou, no caso de produtos, uma notificação do próprio serviço. Com a Notifications API agora é totalmente possível.

Caso você queira dar uma olhada na documentação.

Outro detalhe importante: as notificações só podem ser ativadas por meio de uma interação do usuário, como clique de mouse, teclado e etc… Logo, vamos usar um botão em nosso exemplo para poder ativar as notificações.

Notifications should only be presented when the user has indicated they are desired; without this they could create a negative experience for the user.

Verificando suporte

A primeira coisa que nossa função precisa fazer é verificar se o browser suporta ou não notificações. Se ele não aceitar, ele fica em silêncio e pronto. No nosso exemplo ele vai logar uma mensagem no console, só para gente saber, ok?

Pedindo permissão

Para não virar festa, é necessário que tenhamos a permissão do usuário para enviar as notificações via browser. Isso acontece também ao utilizar outras APIs, como a de Geolocation, por exemplo. A permissão terá três possíveis valores: um valor inicial de default, que significa que o usuário ainda não negou nem permitiu receber notificações deste domínio. O denied significa que o usuário negou receber e o granted que significa que usuário aceitou receber as notificações.

Agora é só fazer uma condição verificando estes estágios:

Preparando a notificação

Se o usuário nos deu permissão para fazer a notificação, nosso domínio fica listado com permissão nas configurações do browser e aí poderemos enviar notificações até que o usuário bloqueie. Agora é hora de fazer a notificação. Para tanto, iremos executar pequena função quando a permissão for “granted”.

O código fica assim:

Criamos um novo objeto Notification, que recebe logo de cara um parâmetro que é o título da notificação. Depois há algumas opções que podemos preencher:

  • body: A mensagem da notificação.
  • tag: Identificador único da notificação. Uma string simples. Isso serve para não fazermos notificações duplicadas.
  • onshow: Evento que é disparado quando a notificação aparece.
  • onclick: Evento quando o usuário clica na notificação.
  • onclose: Quando o usuário fecha a notificação.
  • onerror: Quando há algum erro na notificação e ela não pode ser mostrada.

E voilá! Faça um teste aí. Aqui usei o Chrome e Safari. No meu Safari só funcionou depois que coloquei na minha pasta onde sirvo o localhost (httpdocs, public, www, sei lá o que você usa aí localmente).

O browser pensa assim

O Browser tem um processo definido pela especificação do W3C que é basicamente assim:

  • Se a permissão para a notificação não foi positiva, cancele qualquer pedido de notificação e retorne um evento de erro na notificação, finalizando todos os passos. É aqui que o onerror entra em ação.
  • Se existir uma notificação pendente na lista ou se na lista de notificações ativas existem tags iguais a notificação que está sendo chamada, rode os passos de substituição e finalize as ações.
  • Se um dispositivo autorizar, as notificações podem ser mostradas imediatamente sem limitações no número de notificações concorrentes, rodando os passos de amostra e finalizando as tarefas.
  • Se o dispositivo tem limitações com o número de notificações concorrentes, chame imediatamente a plataforma alternativa que suporte enfileirar as notificações ou posicione as notificações em uma lista de pendências.

É legal ler a documentação do W3C, mesmo que boa parte das informações sobre essa API seja interessante para os fabricantes de browsers.

Mais pra estudar:

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *