Menu
Article

Introdução à Web Push API: Enviando notificações em tempo real no navegador

Renan Ribeiro Lage

• 2 min read

As notificações push tornaram-se uma ferramenta poderosa para manter a proximidade com o usuário, enviando alertas e atualizações mesmo quando ele não está ativamente no seu site ou aplicação. A Web Push API possibilita exatamente isso: enviar notificações diretamente para o navegador, oferecendo uma experiência semelhante a aplicativos mobile, mas sem a necessidade de instalação de nenhum app específico.

Neste artigo, vamos explorar os conceitos básicos da Web Push API, como ela funciona por baixo dos panos e o que é necessário para começar a implementar notificações push em suas aplicações web.

O que é a Web Push API?

A Web Push API é uma especificação que permite que navegadores (como Chrome, Firefox e outros) registrem um Service Worker e fiquem aptos a receber notificações de um servidor, mesmo que a aba do seu site não esteja aberta. Essa funcionalidade é especialmente interessante para:

  • Atualizações em tempo real: Informar sobre novidades, notícias de última hora ou conteúdos atualizados.
  • Alertas de eventos: Notificar sobre eventos importantes ou lembretes de tarefas.
  • Engajamento com o usuário: Manter o usuário conectado à sua marca, mesmo quando ele não está navegando pelo site.

Como funciona o fluxo de notificação?

  1. Solicitação de permissão
    O navegador solicita permissão ao usuário para receber notificações. Se o usuário concordar, o site obtém um endpoint único (geralmente uma URL) onde as mensagens podem ser enviadas.
  2. Registro do Service Worker
    O Service Worker é um script que roda em segundo plano no navegador. Ele é responsável por receber as notificações mesmo com o site fechado e, então, exibir o alerta na tela.
  3. Envio de mensagens
    Do lado do servidor, é necessário enviar a mensagem (payload) para o endpoint gerado na etapa de registro. Ferramentas como o web-push (biblioteca para Node.js) ou serviços de terceiros ajudam nessa comunicação.
  4. Recebimento e exibição
    Quando o navegador recebe a mensagem via Service Worker, ele exibe uma notificação usando a própria API de notificações. Você pode personalizar o título, corpo, ícone e até ações dentro da notificação.

Principais componentes técnicos

Service Worker

O Service Worker é fundamental. Ele funciona como um proxy entre a aplicação web e a rede, gerenciando recursos offline e capturando eventos de push para exibir notificações. O script de Service Worker normalmente fica em um arquivo dedicado, por exemplo: service-worker.js.

Push Subscription

Após o usuário conceder permissão, é criado um Push Subscription, que contém informações únicas para identificar o navegador/usuário. Essa subscription fornece a URL para onde as mensagens devem ser enviadas e as chaves necessárias para criptografia.

Servidor de Push

Você precisa de um servidor para enviar requisições de push (ou usar um serviço terceirizado). Este servidor dispara as notificações para o endpoint registrado. Em Node.js, por exemplo, é possível utilizar bibliotecas como web-push para facilitar o envio.

Exemplo de implementação básica

Service Worker (service-worker.js)

self.addEventListener('push', function(event) {
  const data = event.data.json();
  
  const options = {
    body: data.body,
    icon: '/images/icon.png',
  };

  event.waitUntil(
    self.registration.showNotification(data.title, options)
  );
});

Registro do Service Worker (app.js)

if ('serviceWorker' in navigator && 'PushManager' in window) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => console.log('Service Worker registrado:', registration))
    .catch(error => console.error('Erro ao registrar:', error));
}

Envio de Notificação via Node.js

const webPush = require('web-push');

const vapidKeys = {
  publicKey: 'SUA_CHAVE_PUBLICA_VAPID',
  privateKey: 'SUA_CHAVE_PRIVADA_VAPID'
};

webPush.setVapidDetails(
  'mailto:seu-email@dominio.com',
  vapidKeys.publicKey,
  vapidKeys.privateKey
);

const pushSubscription = {
  endpoint: '<ENDPOINT_DO_NAVIGATOR>',
  keys: {
    p256dh: '<CHAVE_P256DH>',
    auth: '<CHAVE_AUTH>'
  }
};

const payload = JSON.stringify({
  title: 'Notificação de Teste',
  body: 'Funciona mesmo, uau!'
});

webPush.sendNotification(pushSubscription, payload)
  .then(() => console.log('Notificação enviada!'))
  .catch(err => console.error('Erro:', err));

Conclusão

A Web Push API é uma excelente forma de manter o engajamento do usuário, enviando atualizações em tempo real sem que ele precise estar com o site aberto. Esperamos que este artigo tenha dado um bom ponto de partida para você começar a explorar o uso de notificações push na web.

Se você quiser aprender mais sobre boas práticas e segmentação de push, fique ligado nos próximos posts!

Boa programação e até breve! 🚀

Share