ComunicaçãoAo vivo

Web Push Notifications

Fluxo completo de Web Push do jeito que funciona em produção: o navegador gera uma subscription assinada com a chave pública VAPID, o backend assina cada envio com a chave privada via web-push, e a entrega acontece pelo evento push do Service Worker — por isso a notificação chega mesmo com a aba ou o navegador fechados. A demo guia as três etapas reais do fluxo (permissão → registro do dispositivo → envio de teste) e, por ser uma demonstração, mantém as subscriptions em memória no servidor em vez de um banco de dados.

Push API Notifications API Service Worker VAPID Web Push Protocol

Tecnologias

  • Push API
  • Notifications API
  • Service Worker
  • web-push (VAPID)
  • Next.js API Routes

Arquitetura

  • Push API + Notifications API sobre Service Worker
  • com assinatura VAPID (chave pública no client
  • par completo no servidor via web-push) e entrega assíncrona pelo evento push do Service Worker

Conceitos

  • Push subscription
  • entrega em background via Service Worker
  • ciclo de vida de permissão do navegador
  • assinatura VAPID
  • Web Push Protocol

Área de demonstração

A demonstração é 100% funcional — teste agora.