Pesquisa de site

Como enviar notificações push com JavaScript


Notificações push são uma ótima maneira de enviar mensagens rápidas aos usuários. Aprenda como enviá-los usando JavaScript sem usar nenhuma biblioteca externa.

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

Aprenda como criar notificações de eventos em JavaScript e enviá-las para seu telefone ou navegador. Você conseguirá isso usando JavaScript integrado do lado do cliente – sem necessidade de biblioteca externa!

Solicitando permissão para enviar notificações

Para criar uma notificação, você precisa chamar a classe Notification para criar um objeto. Dá 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. A chamada requestPermission retornará uma mensagem indicando se o navegador permite notificações ou não:

const button = document.querySelector('button')
  button.addEventListener("click", ()=> {
  Notification.requestPermission().then(permission => {
    alert(permission)
  })
})

Ao clicar no botão, você poderá receber um alerta que diz negado. Isso significa que o navegador negou que o JavaScript enviasse notificações de eventos. O status de permissão é negado para casos em que o usuário tenha impedido explicitamente que os sites enviem notificações (através das configurações do navegador) ou o usuário esteja navegando no modo de navegação anônima.

Nesses casos, é melhor respeitar a decisão do usuário em relação às notificações negadas e evitar incomodá-lo ainda mais.

Envio de notificações básicas

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

Como você enviaria notificações apenas se a permissão fosse concedida, seria necessário envolvê-las em uma verificação if.

const button = document.querySelector('button')
button.addEventListener("click", ()=> {
  Notification.requestPermission().then(perm => {
    if(perm === 'granted') {
      new Notification("Example notification")
    }
  })
})

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

Esta é 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 avançadas de notificações

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 diversas opções para personalizar sua notificação.

A propriedade do corpo

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

const button = document.querySelector('button')
button.addEventListener("click", ()=> {
  Notification.requestPermission().then(perm => {
    if(perm === 'granted') {
      new Notification("Example notification", {
       body: "This is more text",
     })
    }
  })
})

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

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 a propriedade data para adicionar dados personalizados à sua notificação.

button.addEventListener("click", ()=> {
  Notification.requestPermission().then(perm => {
    if(perm === 'granted') {
      const notification = new Notification("Example notification", {
       body: "This is more text",
       data: {hello: "world"}
     })
    
     alert(notification.data.hello)
    }
  })
})

Você pode acessar os dados da propriedade data de forma semelhante ao mostrado no bloco de código acima (dentro de alert()).

Você também pode vincular ouvintes de eventos às suas notificações. Por exemplo, o ouvinte de eventos 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 notification = new Notification("Example notification", { 
  body: "This is more text",
  data: {hello: "world"} 
})
notification. addEventListener("close", e => {
  console.log(e.target.data.hello)
})

Esta é uma excelente maneira de transmitir dados se você precisar fazer algo quando alguém fechar uma notificação ou clicar nela. Além do evento close (que é executado quando você fecha a notificação), você deve manter estes ouvintes de eventos em mente:

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

A propriedade do ícone

A propriedade icon serve para adicionar um ícone à notificação 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 notification = new Notification("Example notification", { 
  icon: "logo.png"
})

Se você está tendo dificuldades para vincular seus arquivos, 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 tag

Ao definir o atributo tag em sua notificação, você basicamente fornece à 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 tag). Se você clicar no botão três vezes em rápida sucessão, as três notificações aparecerão e serão empilhadas umas sobre as outras. Agora digamos que você adicionou a seguinte tag à notificação:

const notification = new Notification("Example notification", { 
  body: "This is more text",
  tag: "My new tag"
})

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, não importa quantas vezes você clique no botão. Isso é útil se você deseja adicionar dados dinâmicos (como Math.random()) ao corpo:

const notification = new Notification("Example notification", { 
  body: Math.random()
  icon: "logo.png",
  tag: "My body tag"
})

Cada vez que você clicar no botão, um novo número aparecerá. Use a propriedade tag se quiser substituir uma notificação atual por 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:

let notification
document.addEventListener("visibility-change", ()=> {
  if(document.visibilityState === "hidden") {
    notification = new Notification("Come back please", {
      body: "Don't leave just yet :("
      tag: "Come Back"
    })
  } else {
    notification.close()
  }
})

Sempre que você perder o foco nessa página, receberá uma notificação solicitando que volte à página. Mas assim que você retornar à página, o bloco else será executado, fechando a notificação push. Essa técnica é excelente em situações em que você deseja passar 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 vários recursos que você pode encontrar em 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 maneiras de aprimorar suas habilidades e se familiarizar com os conceitos básicos da linguagem.

Artigos relacionados: