Eu queria enviar notificações push para vários sites e separar os inscritos por idioma, sem pagar uma mensalidade alta por um painel que não atendia ao meu fluxo. Neste vídeo, mostro o sistema que montei com ajuda de IA, a integração com a Cloudflare e os testes que fiz no Brave e no Safari.
Um painel próprio pode centralizar sites, idiomas, inscrições e envios de web push. A página do site carrega um script, e uma rota da Cloudflare Workers atende arquivos do serviço. O navegador ainda exige permissão explícita; no iPhone e iPad, o web push depende de um app adicionado à tela inicial.
Eu queria controlar vários sites no mesmo painel
Notificação push ajuda um leitor a voltar ao site, mas serviços prontos podem ficar caros quando você administra vários projetos. Eu queria reunir meus sites em um painel, separar as inscrições por idioma e criar uma forma de enviar notificações sem abrir uma ferramenta diferente para cada domínio.
Comecei procurando uma implementação open source de web push para usar como base. Depois descrevi o que precisava: um script simples no site, cadastro de domínio e idioma, uma área administrativa protegida e opções para enviar notificações. A IA ajudou a montar o projeto. A construção não levou literalmente dez minutos: o desenvolvimento rodou por cerca de 19 minutos, além do tempo que passei testando e ajustando.
O painel organiza sites e idiomas
No painel, cadastrei o site principal, os domínios e os idiomas disponíveis. Também escolhi a posição e a cor do convite. Assim, o mesmo serviço pode apresentar a interface no idioma da página e registrar de qual versão veio cada inscrição.
A área administrativa ficou protegida pelo Cloudflare Access. Isso é importante porque o painel mostra inscritos e permite enviar mensagens. A instalação do sistema no site é outra parte: o código que roda na página não deve dar acesso às funções administrativas nem expor credenciais.
Uma rota entrega o arquivo sem copiá-lo para cada projeto
Eu queria evitar colocar arquivos adicionais em cada site. O serviço ficou em um Worker e adicionei uma rota no domínio para disponibilizar o arquivo JavaScript. Na primeira tentativa, recebi um 404 porque a rota não correspondia ao endereço esperado. Ajustei o padrão e confirmei que o navegador carregava o arquivo.
Uma rota do Workers associa um padrão de URL a um Worker. Antes de usá-la, o domínio precisa estar ativo na zona e ter um registro DNS em proxy. Confira o padrão com cuidado: uma rota mais ampla pode capturar caminhos que deveriam continuar no servidor original. A Cloudflare explica o comportamento na documentação de Workers Routes.
O navegador precisa de permissão para enviar push
Depois de instalar o script, testei a inscrição no Brave. O painel registrou o assinante e recebeu uma notificação de teste. Também conferi o cancelamento: ao desativar as notificações, a contagem de inscritos ativos caiu. Em outra versão do site, a inscrição apareceu associada ao idioma inglês.
Notificações web dependem da permissão do usuário e de um service worker que recebe mensagens em segundo plano. Um botão do site pode iniciar a inscrição, mas não deve ativar avisos sem consentimento. A documentação da Push API descreve esse fluxo.
No Safari do computador, a inscrição também funcionou nos testes que mostrei. Para iPhone e iPad, o web push da Apple exige um app web adicionado à tela inicial e um pedido de permissão iniciado por ação do usuário. Eu ainda não tinha concluído o teste em celular na gravação, então não trato esse resultado como confirmado para meu sistema.
O que falta antes de usar em escala
Consegui enviar um teste e ver inscrições em dois idiomas. Isso confirma o fluxo básico que mostrei, mas não prova entrega confiável em todo navegador, aparelho ou rede. Também quero testar melhor a experiência no celular e desenvolver os envios programados que mencionei no vídeo.
Antes de instalar num site de produção, verifique a permissão, a inscrição, o cancelamento, o idioma e o destino do clique. Proteja o painel e as chaves do serviço. Depois acompanhe falhas e remova inscrições expiradas. O sistema que mostrei ainda era um projeto em desenvolvimento; eu não o apresentei como produto pronto para qualquer pessoa instalar.
O que conferir
- Proteja a área de administração e mantenha segredos no servidor.
- Mostre o convite após uma ação clara do visitante.
- Teste inscrição, cancelamento, idioma e clique da notificação.
O que pode dar errado
Afirmar compatibilidade móvel sem testar os dispositivos e requisitos de instalação.
Usar uma rota ampla que interfira com outras páginas do domínio.
Confundir o envio de uma notificação de teste com uma operação pronta para escala.
Perguntas frequentes
É possível enviar notificações push sem um serviço externo pago?
É possível hospedar sua própria implementação web push, mas você ainda precisa manter o painel, o servidor, as inscrições, as chaves e a entrega. Os custos dependem da infraestrutura e do volume.
O visitante precisa autorizar as notificações?
Sim. O navegador pede permissão e o usuário decide se quer receber notificações. O site deve explicar o convite antes de pedir essa permissão.
Web push funciona no iPhone?
O suporte da Apple exige iOS ou iPadOS 16.4 ou posterior e que o site esteja adicionado à tela inicial como app web. A permissão deve ser solicitada depois de uma ação do usuário.
