Notificações Push em PWA

Tempo de leitura: 4 minutos

As Notificações Push são o recurso final que permite que um Progressive Web App (PWA) transcenda a experiência de navegação e se integre ao sistema operacional. Elas possibilitam que seu PWA receba mensagens em tempo real e alerta o usuário sobre novos conteúdos ou eventos, mesmo quando o aplicativo está fechado ou o navegador não está ativo.

Esta funcionalidade é totalmente habilitada pelo Service Worker (SW).

1. ⚙️ Arquitetura das Notificações Push

O sistema de Notificações Push envolve quatro componentes principais que trabalham em conjunto:

A PWA (Cliente): O código JavaScript que solicita permissão e gera a chave de assinatura.
Service Worker (SW): O ouvinte em segundo plano que intercepta a mensagem push e a exibe como uma notificação.
Serviço Push: O servidor de mensagens do navegador (ex: FCM do Google, APNs da Apple), que recebe a mensagem do seu servidor e a entrega ao dispositivo.
Servidor da Aplicação: O seu backend (API) que armazena a chave de assinatura do usuário e envia a mensagem de notificação para o Serviço Push.

2. 🔑 Habilitando Notificações: Inscrição e Permissão

O processo de envio de uma notificação começa com a inscrição do usuário e a solicitação de permissão.

A. Solicitando Permissão

O acesso à API de Notificações Push requer a permissão explícita do usuário. Esta solicitação deve ser feita de forma contextualizada (após o usuário demonstrar interesse).

JavaScript

// Frontend JavaScript (no lado da aplicação)
function subscribeUser() {
  if ('Notification' in window) {
    Notification.requestPermission().then(permission => {
      if (permission === 'granted') {
        // Prossegue para a inscrição
        subscribeToPushService(); 
      } else {
        console.log('Permissão de notificação negada.');
      }
    });
  }
}

B. Inscrição e Chave VAPID

Após a permissão ser concedida, o PWA usa o Service Worker para se inscrever no Serviço Push do navegador, gerando um objeto PushSubscription.

Este objeto contém o endpoint (o endereço único do Serviço Push) e a chave pública de criptografia, essenciais para enviar a mensagem.

JavaScript

// O Service Worker é a base para a inscrição
function subscribeToPushService() {
  navigator.serviceWorker.ready.then(registration => {
    // Chave VAPID pública (necessária para autenticação)
    const applicationServerKey = urlBase64ToUint8Array('SUA_CHAVE_VAPID_PUBLICA'); 

    registration.pushManager.subscribe({
      userVisibleOnly: true, // Requisito: a notificação deve ser visível
      applicationServerKey: applicationServerKey
    })
    .then(subscription => {
      // 1. Envie este objeto 'subscription' (endpoint e keys) para o seu servidor
      sendSubscriptionToServer(subscription); 
      console.log('Usuário inscrito com sucesso:', subscription);
    });
  });
}

3. 🛡️ Interceptando e Exibindo a Notificação

O Service Worker é o único componente que pode interceptar o evento push do servidor, mesmo quando o PWA está fechado.

A. O Evento `push` (No Service Worker)

O SW ouve o evento push. Quando a mensagem do servidor chega:

JavaScript

// service-worker.js
self.addEventListener('push', (event) => {
  // O payload da mensagem push (dados do seu servidor)
  const data = event.data.json(); 
  
  const title = data.title || 'Nova Mensagem';
  const options = {
    body: data.body || 'Você tem uma atualização.',
    icon: '/icons/icon-192x192.png', // Ícone exibido na notificação
    badge: '/icons/badge.png', // Ícone exibido na barra de status (Android)
    data: { url: data.url } // Dados adicionais para usar no clique
  };

  // Exibe a notificação na tela do usuário
  event.waitUntil(self.registration.showNotification(title, options));
});

B. O Evento `notificationclick` (No Service Worker)

Quando o usuário clica na notificação, o SW intercepta o evento e pode executar ações, como abrir o PWA em uma URL específica.

JavaScript

// service-worker.js
self.addEventListener('notificationclick', (event) => {
  event.notification.close(); // Fecha a notificação

  // Recupera a URL de destino
  const targetUrl = event.notification.data.url || '/'; 

  event.waitUntil(
    // Abre ou foca a janela do PWA na URL de destino
    clients.openWindow(targetUrl) 
  );
});

4. 🚀 Enviando a Mensagem (Lado do Servidor)

O servidor da sua aplicação é responsável por:

Armazenar as chaves de inscrição (PushSubscription) de todos os usuários.
Usar uma biblioteca (como web-push em Node.js) para enviar a mensagem (o payload) para o Serviço Push (usando o endpoint e as chaves de criptografia).
A mensagem deve ser enviada com autenticação VAPID (Voluntary Application Server Identification), garantindo que apenas seu servidor possa enviar mensagens ao seu PWA.

5. 🍏 Considerações Específicas do iOS/Safari

Historicamente, o suporte para Notificações Push em PWAs instaladas no iOS era limitado.

iOS 16.4 e superior: A Apple introduziu suporte para Notificações Push em PWAs instaladas no iOS e iPadOS. Isso funciona de forma semelhante ao Android, exigindo o uso da mesma arquitetura Push API e Service Worker.
Requisito iOS: O PWA deve ser instalado na tela inicial para receber Notificações Push.

✅ Conclusão Notificações Push

Notificações Push: As Notificações Push são a funcionalidade final para elevar um PWA ao nível de um aplicativo nativo em termos de engajamento. O processo requer a cooperação de quatro partes – o PWA solicita permissão, o Service Worker se inscreve e ouve, o Serviço Push entrega a mensagem, e seu Servidor envia o payload criptografado. Ao implementar corretamente os eventos push e notificationclick no seu Service Worker, você garante que seu PWA pode alertar e reengajar os usuários de forma eficaz, mesmo quando o aplicativo não está em uso.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo: