Notificações push na web: como configurar sem incomodar

O que é web push e como funciona

Notificações web push são mensagens curtas de um site que alcançam o navegador mesmo quando a aba está fechada. O usuário concede permissão uma vez, o navegador retorna uma assinatura com um endpoint e chaves, e seu servidor envia mensagens através de um serviço de push usando um protocolo assinado por VAPID. A regra de ouro é pedir permissão no momento certo e nunca inundar as pessoas.

UX de opt-in: como perguntar bem

Acionar o prompt nativo do navegador no primeiro segundo quase sempre resulta em um “Bloquear.” Um padrão de dois passos funciona: primeiro seu próprio prompt suave explicando o benefício, e só após a concordância o pedido do sistema.

• Não instantaneamente. Mostre o prompt após uma primeira ação útil, não na chegada.
• Explique o porquê. “Notificá-lo quando o preço cair?” é melhor do que um prompt silencioso.
• Respeite um não. Se eles recusarem, não pergunte novamente por semanas.
• Contexto. Pergunte em uma página de produto, não na página inicial.

Chaves VAPID

VAPID (Identificação de Servidor de Aplicação Voluntária) identifica seu servidor para o serviço de push. Você precisa de um par de chaves: a chave pública vai para o navegador na assinatura, a chave privada fica no servidor e assina os pedidos.

# Gere um par de chaves VAPID
npx web-push generate-vapid-keys

Chave Pública:  BQ8...prqZk
Chave Privada: 3Kf...9dQ
Assunto:     mailto:push@yourtrend.online

A chave pública é passada ao se inscrever no navegador:

registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: 'BQ8...prqZk'
});

Frequência: como não incomodar

Push incomoda mais rápido do que e-mail porque aparece sobre tudo. Orientação de frequência:

Sempre ofereça horas silenciosas e fácil cancelamento. Um push noturno é um caminho direto para ser desligado.

Segmentação de web push

Assim como com e-mail, não envie para todos. Segmente por categorias visualizadas, cidade, idioma e comportamento. Carrinho abandonado, queda de preço em um favorito, de volta ao estoque — cenários direcionados são clicados muito mais do que disparos em massa. No YourTrend, o web push vive ao lado de e-mail, SMS, segmentos e automações, então o canal é escolhido para se adequar ao público — visão geral na página de recursos.

Casos de uso úteis

1. Carrinho abandonado após 1–2 horas.
2. Queda de preço em um item favorito.
3. De volta ao estoque para aqueles que esperaram.
4. Status do pedido: enviado, entregue.
5. Conteúdo: um novo artigo sobre um tópico que eles seguem.

Como é o envio e recebimento

O servidor envia uma mensagem criptografada para o endpoint de assinatura, e o service worker no navegador captura o evento de push e mostra uma notificação mesmo com a aba fechada. O payload é um JSON curto:

{
  "title": "Preço caiu 20%",
  "body": "Os tênis nos seus favoritos estão mais baratos agora",
  "icon": "/icons/push-192.png",
  "url": "/catalog/sneakers/42"
}

// service-worker.js
self.addEventListener('push', function(event) {
  const d = event.data.json();
  event.waitUntil(
    self.registration.showNotification(d.title, {
      body: d.body, icon: d.icon, data: { url: d.url }
    })
  );
});

Ao clicar, envie o usuário para o produto específico do campo url, não para a página inicial — isso aumenta visivelmente a conversão.

Suporte ao navegador e iOS

O web push funciona no Chrome, Firefox, Edge e Opera no desktop e Android. A principal ressalva é o Safari: no iPhone e iPad, o push chega apenas se o usuário adicionar o site à tela inicial como um PWA (disponível desde o iOS 16.4+). Portanto, o web push complementa o e-mail, mas não o substitui: parte do seu público tecnicamente não terá isso. Combine canais — e-mail, SMS e push — por segmento.

Erros comuns

• Prompt de permissão no primeiro segundo sem contexto.
• Apenas promoções, zero notificações úteis.
• Sem segmentação — o mesmo push para todos.
• Sem horas silenciosas ou opção clara de cancelamento.
• O link vai para a página inicial, não para o produto específico.

Resumo

O web push é um canal rápido e envolvente, mas exige tato: pergunte no momento certo, explique o benefício, segmente e mantenha uma frequência saudável. Então, as notificações ajudam em vez de incomodar. Escolha um plano com os canais que você precisa na página de preços.