Como enviar notificações push com JavaScript

As notificações JavaScript são uma forma de enviar mensagens para seus usuários em tempo real. Você pode usá-los para notificar sobre as atualizações do seu site, novas mensagens de bate-papo, e-mails ou qualquer atividade de mídia social. Você também pode usar notificações para lembretes de calendário (como uma reunião próxima no Google Meet ou Zoom).

Aprenda a criar notificações de eventos em JavaScript e enviá-las para seu telefone ou navegador da web. Você conseguirá isso usando JavaScript integrado do lado do cliente — nenhuma biblioteca externa é necessária!

Solicitando permissão para enviar notificações

Para criar uma notificação, você precisa chamar o Notificação classe para criar um objeto. Ele fornece acesso a várias propriedades e métodos que você pode usar para configurar sua notificação. Mas antes de criar uma notificação, você precisará primeiro solicitar permissão do usuário.

O JavaScript a seguir solicitará permissão para enviar notificações ao usuário. O requestPermission call retornará uma mensagem indicando se o navegador permite notificações ou não:

const botão = documento.querySelector('botão')
 botão.addEventListener("clique", ()=> {
 Notification.requestPermission().then(permissão => {
 alerta (permissão)
 })
})

Ao clicar no botão, você pode receber um alerta que diz negado. Isso significa que o navegador negou que o JavaScript envie notificações de eventos. O status da permissão é negado para casos em que o usuário impediu explicitamente que os sites enviassem notificações (através das configurações do navegador) ou o usuário está navegando no modo anônimo.

Nesses casos, é melhor respeitar a decisão do usuário por notificações negadas e você deve evitar incomodá-lo ainda mais.

Enviando Notificações Básicas

Você cria uma notificação por push criando um Notificação objeto com a nova palavra-chave. Para um mergulho profundo na programação orientada a objetos, você pode consultar nosso guia sobre como criar classes em JavaScript.

Como você enviaria notificações somente se a permissão fosse concedida, você precisaria envolvê-la dentro de um se verificar.

const botão = documento.querySelector('botão')
botão.addEventListener("clique", ()=> {
 Notification.requestPermission().then(permanente => {
se(permanente 'garantido') {
novo Notificação("Exemplo de notificação")
 }
 })
})

Clique no botão e você receberá uma notificação por push no canto inferior direito do navegador da Web com o texto especificado.

Essa é a maneira mais básica de criar notificações e funciona tanto no telefone quanto no computador. Vejamos algumas propriedades avançadas de notificação.

Propriedades de notificações avançadas

Além do título da notificação, você também pode passar um argumento de opções para o construtor ao criar o objeto de notificação. Este argumento de opções deve ser um objeto. Aqui, você pode adicionar várias opções para personalizar sua notificação.

A propriedade do corpo

A primeira propriedade que você deve saber é corpo propriedade. Você usaria isso para adicionar um corpo à sua notificação, geralmente para transmitir mais informações na forma de texto. Aqui está um exemplo simples:

const botão = documento.querySelector('botão')
botão.addEventListener("clique", ()=> {
 Notification.requestPermission().then(permanente => {
se(permanente 'garantido') {
novo Notificação("Exemplo de notificação", {
 corpo: "Isto é mais texto",
 })
 }
 })
})

Se você executar este código, o texto do corpo será exibido na notificação por push, sob o Exemplo de notificação cabeçalho.

O atributo de dados

Muitas vezes, você pode querer adicionar dados personalizados às notificações. Talvez você queira exibir uma mensagem de erro específica se a permissão for negada ou armazenar dados recebidos de uma API. Para todos esses casos, você pode usar o dados para adicionar dados personalizados à sua notificação.

botão.addEventListener("clique", ()=> {
 Notification.requestPermission().then(permanente => {
se(permanente 'garantido') {
const notificação = novo Notificação("Exemplo de notificação", {
 corpo: "Isto é mais texto",
 dados: {olá: "mundo"}
 })

 alerta (notification.data.hello)
 }
 })
})

Você pode acessar os dados do dados propriedade de forma semelhante à mostrada no bloco de código acima (dentro do alerta()).

Você também pode vincular ouvintes de eventos às suas notificações. Por exemplo, o ouvinte de evento a seguir é executado sempre que você fecha a notificação por push. A função de retorno de chamada simplesmente registra a mensagem personalizada.

const notificação = novo Notificação("Exemplo de notificação", { 
 corpo: "Isto é mais texto",
 dados: {olá: "mundo"} 
})
notificação. addEventListener("fechar", e => {
console.log (e.target.data.hello)
})

Esta é uma excelente maneira de passar dados se você precisar fazer algo quando alguém fecha uma notificação ou clica nela. Apesar de fechar evento (que é executado quando você fecha a notificação), você deve mantê-los ouvintes de evento na sua mente:

• mostrar: Executa quando a notificação é exibida.
• clique: Executa quando o usuário clica em qualquer lugar na notificação.
• erro: é executado quando você nega a permissão do JavaScript para enviar notificações.

A propriedade do ícone

O ícone A propriedade é para adicionar um ícone à notificação por push. Supondo que você tenha um logotipo de ícone chamado logo.png no diretório atual, você pode usá-lo em suas notificações da seguinte forma:

const notificação = novo Notificação("Exemplo de notificação", { 
 ícone: "logo.png"
})

Se você está lutando para vincular seus arquivos, você precisa entender o funcionamento de URLs relativos e URLs absolutos.

Ao salvar o arquivo, atualizar o navegador e clicar no botão, a notificação terá a imagem exibida no lado esquerdo do cabeçalho e do corpo.

O atributo da marca

Quando você definir o marcação atributo em sua notificação, você basicamente está dando à notificação um ID exclusivo. Duas notificações não podem existir juntas se tiverem a mesma tag. Em vez disso, a notificação mais recente substituirá a notificação mais antiga.

Considere nosso exemplo de botão anterior (sem uma tag). Se você clicar no botão três vezes em rápida sucessão, as três notificações aparecerão e elas serão empilhadas umas sobre as outras. Agora, digamos que você adicionou a seguinte tag à notificação:

const notificação = novo Notificação("Exemplo de notificação", { 
 corpo: "Isto é mais texto",
 marcação: "Minha nova etiqueta"
})

Se você clicar no botão novamente, apenas uma caixa de notificação aparecerá. Cada clique subsequente substituirá a notificação anterior, portanto, apenas uma notificação será exibida, independentemente de quantas vezes você clicar no botão. Isso é útil se você quiser adicionar dados dinâmicos (como Math.random()) para o corpo:

const notificação = novo Notificação("Exemplo de notificação", { 
 corpo: Matemática.aleatório()
 ícone: "logo.png",
 marcação: "Minha etiqueta corporal"
})

Cada vez que você clicar no botão, um novo número aparecerá. Use a propriedade tag se quiser sobrescrever uma notificação atual com novas informações dentro dela. Em um aplicativo de mensagens, por exemplo, você pode usar o atributo tag para substituir a notificação por novas mensagens.

Um exemplo de notificação push usando JavaScript

O exemplo a seguir detecta sempre que você perde o foco em sua página (ou seja, quando você fecha a página ou abre uma nova guia). Nesse caso, o código envia uma notificação solicitando que você retorne:

deixar notificação
documento.addEventListener("visibilidade-mudança", ()=> {
se(documento.visibilityState "escondido") {
 notificação = novo Notificação("Volte por favor", {
 corpo: "Não saia ainda :("
 marcação: "Voltar"
 })
 } outro {
 notificação.close()
 }
})

Sempre que você perder o foco nessa página, receberá uma notificação solicitando que você volte para a página. Mas assim que você retornar à página, o outro bloco é executado, o que fecha a notificação por push. Essa técnica é excelente em situações em que você deseja fornecer algum tipo de informação ao usuário após sair de sua página.

Saiba mais sobre JavaScript

A notificação de eventos é apenas um dos inúmeros recursos que você pode encontrar no JavaScript. Para ser realmente bom com notificações, você deve primeiro compreender os recursos fundamentais da linguagem e a sintaxe do JavaScript. Construir jogos simples é uma das formas de aprimorar suas habilidades e se familiarizar com os conceitos básicos da linguagem.