Notificações Push em Progressive Web Apps (PWAs): Como implementar e engajar

Os Progressive Web Apps (PWAs) fecharam a lacuna entre a web e o mobile nativo. Entre todos os recursos disponíveis, as Notificações Push são, sem dúvida, a ferramenta mais poderosa para retenção de usuários. Elas permitem que você alcance seu público mesmo quando o navegador está fechado, trazendo-o de volta para sua aplicação.

Este artigo aborda desde a arquitetura técnica até as melhores práticas de UX para garantir que suas notificações sejam úteis e não intrusivas.

1. O Conceito: Como Funciona “Debaixo do Capô”

Para implementar notificações push, é preciso entender que existem três atores principais trabalhando em conjunto:

1. Service Workers: O coração da PWA. É um script que roda em segundo plano, separado da página web principal. Ele “acorda” para receber a notificação, mesmo que a aba esteja fechada.
2. Push API: Permite que um serviço de push (do navegador) envie uma mensagem para o Service Worker.
3. Notification API: É a interface que exibe a notificação visualmente para o usuário no sistema operacional.

Nota Importante: Para usar Service Workers e Push API, sua aplicação deve ser servida via HTTPS (com exceção do localhost para testes).

2. Implementação Passo a Passo

Vamos dividir a implementação em três fases: Registro, Permissão/Assinatura e Recebimento.

Passo 1: Registrar o Service Worker

Primeiro, precisamos garantir que o navegador suporta Service Workers e registrá-lo no arquivo JavaScript principal da sua aplicação (ex: app.js).

if ('serviceWorker' in navigator && 'PushManager' in window) {
  navigator.serviceWorker.register('/sw.js')
  .then(function(swReg) {
    console.log('Service Worker registrado', swReg);
    // Inicializar UI de notificação aqui
  })
  .catch(function(error) {
    console.error('Erro no Service Worker', error);
  });
}

Passo 2: Gerar Chaves VAPID

Para segurança, o padrão Web Push utiliza o protocolo VAPID (Voluntary Application Server Identification). Você precisa de um par de chaves (Pública e Privada).

• A Chave Pública vai no front-end.
• A Chave Privada fica segura no seu back-end.

Você pode gerar essas chaves usando bibliotecas como web-push no Node.js.

Passo 3: Solicitar Permissão e Assinar o Usuário

Nunca peça permissão assim que a página carrega. Isso gera altas taxas de rejeição. Crie um botão de “Ativar Notificações” e chame a função abaixo no clique:

async function subscribeUser(swReg) {
  try {
    // A chave pública VAPID deve ser convertida para Uint8Array
    const applicationServerKey = urlB64ToUint8Array('SUA_CHAVE_PUBLICA_VAPID');
    
    const subscription = await swReg.pushManager.subscribe({
      userVisibleOnly: true, // Garante que a notificação será visível
      applicationServerKey: applicationServerKey
    });

    console.log('Usuário inscrito:', JSON.stringify(subscription));
    
    // ENVIE "subscription" PARA SEU BACK-END AQUI PARA SALVAR NO BANCO DE DADOS
    
  } catch (err) {
    console.log('Falha ao inscrever o usuário: ', err);
  }
}

Passo 4: O Arquivo do Service Worker (sw.js)

É aqui que a mágica acontece. O Service Worker escuta o evento push vindo do servidor e exibe a notificação.

// sw.js

self.addEventListener('push', function(event) {
  let data = { title: 'Nova mensagem', content: 'Você tem uma nova notificação!' };
  
  if (event.data) {
    data = JSON.parse(event.data.text());
  }

  const options = {
    body: data.content,
    icon: '/images/icon-192x192.png',
    badge: '/images/badge-72x72.png', // Pequeno ícone monocromático para barra de status (Android)
    vibrate: [100, 50, 100],
    data: {
      url: data.url // URL para abrir ao clicar
    },
    actions: [
      {action: 'explore', title: 'Ver Agora'},
      {action: 'close', title: 'Fechar'}
    ]
  };

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

// Evento de clique na notificação
self.addEventListener('notificationclick', function(event) {
  event.notification.close();
  
  event.waitUntil(
    clients.openWindow(event.notification.data.url || '/')
  );
});

3. Compatibilidade: O Caso iOS

Durante muito tempo, o iOS (Apple) foi a grande barreira para PWAs. No entanto, a partir do iOS 16.4 (2023), o Safari passou a suportar Web Push Notifications.

Requisitos para funcionar no iOS:

1. O dispositivo deve estar atualizado (iOS 16.4+).
2. O usuário deve adicionar a PWA à tela de início (“Add to Home Screen”). Notificações não funcionam apenas no navegador Safari aberto; o app precisa ser “instalado”.

4. Estratégias de Engajamento e UX

Implementar o código é a parte fácil. O difícil é não ser bloqueado pelo usuário. Aqui estão as melhores práticas:

A Regra de Ouro: Contexto

Não use o prompt nativo do navegador imediatamente. Use uma “Soft Ask” (Solicitação Suave).

1. UI da Aplicação: Mostre um banner ou modal desenhado por você: “Gostaria de receber avisos sobre o status do seu pedido?”
2. Ação do Usuário: Se ele clicar em “Sim”, então você dispara o Notification.requestPermission().

Tipos de Notificações Eficazes

• Transacionais: “Seu pedido saiu para entrega” (Altíssimo valor).
• Urgência: “Check-in para seu voo está aberto”.
• Reengajamento Pessoal: “Alguém respondeu seu comentário”.

Evite a Fadiga

• Frequência: Limite o número de envios.
• Agrupamento: No Android, use a tag tag nas opções da notificação para substituir uma notificação antiga por uma nova, em vez de empilhar 10 notificações “Você tem uma nova mensagem”.

5. Resumo Técnico

O Futuro das PWAs

Com o suporte do iOS e a evolução constante do Android e Windows, as notificações push em PWAs tornaram-se uma alternativa viável e econômica ao desenvolvimento de aplicativos nativos pesados, permitindo engajamento direto e instantâneo.