PushAlert: notificações push no seu site com service worker

18/02/2026 CanalQb Tecnologia

Inscreva-se no Canal

Resumo rápido

• Service worker do PushAlert para notificações push no seu site, com foco em baixo consumo de hardware.
• Corrigimos falhas da versão original e removemos um handler de fetch vazio que gastava CPU à toa.
• Projeto completo, validado e documentado em português, com tutorial passo a passo.

Aviso financeiro: este artigo tem caráter apenas educativo e técnico. Não é recomendação de investimento, anúncio ou garantia de rendimento. Nenhum conteúdo do CanalQb deve ser interpretado como aconselhamento financeiro. Faça sua própria pesquisa e, quando necessário, consulte um profissional qualificado.

Aviso técnico: os arquivos do projeto podem ser atualizados. Confira sempre o repositório oficial para a versão mais recente. Teste em ambiente controlado antes de aplicar em produção.

Seu site pode notificar visitantes mesmo com a aba fechada.

É isso que as notificações push fazem, e o PushAlert é uma das formas mais simples de implementar. Neste artigo eu mostro como fizemos, corrigimos e otimizamos um service worker de notificações, reduzi o consumo de recursos no navegador do visitante e deixei tudo documentado em português no GitHub.

O que é um service worker e por que ele é importante para notificações?

Um service worker é um script JavaScript que roda em segundo plano no navegador, separado da página. Ele é o coração do web push: sem ele, não existe como entregar uma notificação quando o usuário não está no seu site.

Quando você visita um site com push habilitado, o navegador registra o service worker. Esse worker fica "de guarda": o servidor de push envia a mensagem para ele, e ele exibe a notificação no sistema operacional. Por isso, mesmo com o site fechado, a notificação aparece. A arquitetura envolve o protocolo Web Push (RFC 8030) e a criptografia de mensagens (RFC 8291), com chaves VAPID para autenticar o servidor que envia.

No nosso projeto, o sw.js é o ponto de entrada. Ele carrega o script gerado pelo PushAlert (sw-77509.js), que contém as configurações do cliente: o identificador do projeto, o subdomínio de entrega e a chave pública VAPID. É um mecanismo enxuto, mas cada detalhe conta para o desempenho.

Que falhas encontramos no script original?

O repositório original tinha apenas dois arquivos e um problema claro: um handler de fetch vazio que interceptava todas as requisições do site sem fazer nada.

Parece inofensivo, mas não é. Todo handler de fetch registrado no service worker é chamado em cada requisição que o navegador faz. Mesmo um handler que retorna imediatamente sem ação tem custo: o navegador precisa pausar a requisição, consultar o worker, receber a resposta "não vou interceptar" e seguir. Em um site movimentado, isso se multiplica por dezenas de requisições por página, consumindo CPU e bateria — especialmente em celulares.

Além disso, o código não chamava self.skipWaiting() nem self.clients.claim(). Isso significa que, após uma atualização do service worker, os visitantes podiam ficar presos na versão antiga até fecharem todas as abas. Notificações continuavam sendo enviadas pela versão velha, com configurações desatualizadas, sem que o site percebesse.

// v1 - handler vazio removido na v2.0.0 self.addEventListener('fetch', (event) => { // Lógica de interceptação de requisições });

A solução foi reescrever o sw.js com o mínimo necessário: install que carrega o script do PushAlert com cache-busting e chama skipWaiting(), activate que chama clients.claim() e a remoção total do handler de fetch desnecessário. Resultado: menos trabalho por requisição, atualizações mais rápidas e menor consumo de recursos.

Como garantimos segurança e menos consumo de hardware?

Orientamos todo o projeto por dois princípios: segurança e eficiência.

• Chave privada VAPID nunca no repositório. Apenas a chave pública (feita para ser pública) fica no cliente. A privada permanece no painel do PushAlert.
• Todas as conexões via HTTPS. O service worker e a Push API só funcionam em contextos seguros — sem exceção.
• Menos handlers, menos CPU. Removemos o fetch handler vazio, a maior fonte de overhead da versão original.
• Código mínimo. Menos JavaScript para o navegador analisar e executar em cada visita.
• Validação automática. Um script confere a chave VAPID (formato P-256, 65 bytes, RFC 8291), as URLs https, os identificadores e o timestamp antes do deploy.
• Sem segredos versionados. O .gitignore bloqueia tokens, chaves e arquivos sensíveis.

# validação local — checa VAPID, URLs e IDs antes do deploy npm run validate

Esse validador retorna código de saída 0 quando está tudo certo e 1 quando há falha, o que o torna perfeito para rodar em pipelines de CI como o GitHub Actions.

Como instalar as notificações push no meu site?

O processo completo está documentado, mas o essencial cabe em quatro passos:

1. Suba os dois arquivos (sw.js e sw-77509.js) para a raiz do seu domínio com HTTPS.
2. Confirme o acesso: https://seudominio.com/sw.js deve responder 200.
3. Ative o push no painel do PushAlert para o domínio verificado.
4. Adicione o botão de inscrição gerado pela plataforma na sua página e teste o envio.

O sw-77509.js é gerado pelo PushAlert e não deve ser editado à mão — qualquer mudança nas configurações deve ser feita pelo painel, que gera o arquivo atualizado.

Quais recursos novos o projeto ganhou?

Além das correções, o repositório agora é um projeto completo e pronto para manutenção:

Arquivo	O que faz
sw.js	Service worker otimizado (v2.0.0), sem fetch handler vazio
sw-77509.js	Payload gerado pelo PushAlert (mantido intacto)
validate_sw.js	Validação automática de VAPID, URLs, IDs e timestamps
package.json	Metadados, versão e script de validação
REQUIREMENTS.md	Requisitos de versões e compliance de segurança
README.md + TUTORIAL.md	Documentação e tutorial em português

Também adicionamos skipWaiting() e clients.claim() para ativar novas versões imediatamente, cache-busting no carregamento do script e tratamento de erro no import, para o service worker nunca quebrar por causa de uma falha temporária de rede do CDN.

Onde encontro o projeto e como contribuo?

O código está aberto no GitHub do CanalQb. Você pode clonar, usar no seu site, reportar problemas e sugerir melhorias.

Ver repositório no GitHub

Depois de clonar, rode npm run validate para conferir se o ambiente está saudável e siga o tutorial para colocar no ar. Qualquer correção é bem-vinda via pull request.

Perguntas frequentes (FAQ)

O PushAlert é uma plataforma de notificações web push que permite enviar mensagens para os visitantes do seu site, mesmo quando eles não estão navegando nele. O serviço cuida da infraestrutura de entrega, da assinatura das mensagens com chaves VAPID e da geração dos arquivos que o seu site precisa hospedar. No nosso caso, a plataforma gera o arquivo sw-77509.js com as configurações do cliente, como o identificador do projeto (client_id), o subdomínio de entrega e a chave pública. A plataforma também oferece o painel de gerenciamento de assinantes, o editor de notificações e estatísticas de abertura e clique. O papel do nosso repositório é hospedar e manter esse service worker de forma organizada, segura e com o menor custo de desempenho possível.

Não. O service worker é um arquivo estático, servido como qualquer outro JavaScript do seu site. Basta que o domínio tenha HTTPS válido, porque navegadores modernos só permitem service workers em contextos seguros. Hospedagens comuns — como GitHub Pages, Netlify, Vercel, Cloudflare Pages ou qualquer servidor com SSL — funcionam sem problema. O único requisito importante é que os arquivos fiquem na raiz do domínio: o PushAlert espera os caminhos /sw.js e /sw-77509.js. Se você colocá-los em subpastas, o registro falha. Para testar em desenvolvimento, http://localhost é considerado seguro, então dá para validar tudo localmente antes de publicar, inclusive rodando python -m http.server para servir a pasta.

VAPID (Voluntary Application Server Identification) é o mecanismo de autenticação do protocolo Web Push definido na RFC 8292. Ele usa um par de chaves criptográficas: uma pública e uma privada. A chave pública fica no service worker, no cliente, e identifica o seu servidor para os navegadores. A chave privada fica somente no seu servidor (no nosso caso, no painel do PushAlert) e é usada para assinar as mensagens antes do envio. Sem VAPID, o navegador rejeita as notificações. No projeto, o validador confere se a chave pública tem o formato correto: uma chave P-256 com 65 bytes e primeiro byte 0x04, conforme o padrão. Isso garante que o arquivo hospedado não está corrompido e que a chave não é uma string qualquer. A chave privada nunca deve aparecer em repositórios públicos.

O problema principal era um handler de fetch vazio registrado no service worker. Quando um service worker tem um listener de fetch, o navegador precisa consultá-lo em toda requisição de rede da página: ele entrega o evento, espera a resposta e só então prossegue. Mesmo um handler que não faz nada adiciona latência e consumo de CPU — e isso acontece para cada imagem, script, estilo e requisição do site. Em um site com muitas requisições, o custo se acumula, principalmente em dispositivos móveis com bateria limitada. Removemos esse handler completamente na v2.0.0, reduzimos o código ao mínimo necessário e adicionamos cache-busting para evitar downloads desnecessários. O resultado é um service worker que faz exatamente o que precisa, sem trabalho extra por requisição. Menos processamento significa também páginas que carregam de forma mais responsiva.

Não recomendamos. O sw-77509.js é gerado automaticamente pelo PushAlert e contém as configurações do seu projeto: o identificador do cliente, o domínio padrão, o subdomínio de entrega e a chave pública VAPID. A plataforma mantém esse arquivo sincronizado com o que está no painel. Se você editar manualmente, corre o risco de quebrar o protocolo de entrega ou de que uma atualização da plataforma sobrescreva suas mudanças sem aviso. A forma correta de alterar qualquer configuração — como o domínio padrão ou as permissões — é pelo painel do PushAlert, que gera um novo arquivo atualizado para você baixar. O arquivo que devemos editar e manter é o sw.js, que é o nosso ponto de entrada e onde aplicamos as otimizações de desempenho e ciclo de vida do service worker.

Não em todos, mas na grande maioria dos navegadores modernos. O suporte a Web Push e service workers está presente no Chrome desde a versão 50, no Edge desde a 79, no Firefox desde a 44, no Opera desde a 38 e no Safari desde a 16.4. Navegadores antigos, como o Internet Explorer, não suportam o recurso — mas isso não quebra o seu site: os visitantes simplesmente não recebem notificações e o restante do site continua funcionando normalmente. É importante também lembrar que o usuário sempre precisa conceder permissão para receber notificações, e pode revogá-la a qualquer momento pelas configurações do navegador. Em alguns casos, especialmente no Android, o navegador pode suspender notificações de sites pouco usados para economizar bateria. O ideal é tratar as notificações como um recurso progressivo: um extra para quem quiser, nunca um requisito.

O fluxo tem quatro etapas. Primeiro, a página registra o service worker com navigator.serviceWorker.register('/sw.js'). Segundo, durante a instalação, o service worker carrega o payload do PushAlert, que contém as configurações e a chave pública. Terceiro, quando o visitante clica no botão de inscrição e aceita, o navegador gera um endpoint único para aquele dispositivo e uma assinatura criptográfica, registrando o dispositivo no serviço de push. Quarto, quando o PushAlert envia uma campanha, o servidor assina a mensagem com a chave privada VAPID e a entrega ao navegador via Web Push. O navegador acorda o service worker, que recebe o evento push e exibe a notificação no sistema operacional. Todo esse processo funciona mesmo com o site fechado, porque o navegador mantém uma conexão com o serviço de push em segundo plano.

Gostou? Compartilhe e deixe seu comentário.

Código aberto, documentação em português e otimizado para baixo consumo de hardware.

github.com/canalqb/pushalert-service-worker

© 2026 CanalQb · canalqb.blogspot.com