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:
- 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.
- Push API: Permite que um serviço de push (do navegador) envie uma mensagem para o Service Worker.
- 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
localhostpara 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:
- O dispositivo deve estar atualizado (iOS 16.4+).
- 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).
- UI da Aplicação: Mostre um banner ou modal desenhado por você: “Gostaria de receber avisos sobre o status do seu pedido?”
- 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
tagnas 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
| Recurso | Função | Observação |
| HTTPS | Segurança obrigatória | O Service Worker não roda sem ele. |
| VAPID Keys | Identidade do servidor | Impede que terceiros enviem push em seu nome. |
| Manifest.json | Instalação | Essencial para experiência nativa e suporte iOS. |
| Service Worker | Background | Processa o evento push e notificationclick. |
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.
Guia do Host 