Como Adicionar Notificações ao Seu App: In-App, E-mail e Push

Para adicionar notificações a um app web, comece com notificações dentro do app: uma tabela de notificações no seu banco de dados e um ícone de sino que mostra as não lidas. Adicione e-mail para avisos que as pessoas precisam saber quando estão fora, usando um provedor de e-mail, e adicione push web apenas quando alertas em tempo real importarem, já que ele exige um service worker, permissão do usuário e, no iPhone, o app salvo na Tela de Início. Seja qual for o canal, crie cada notificação em um só lugar, no servidor, e deixe os usuários escolherem o que querem receber.

Este guia compara os canais, mostra uma arquitetura simples e traz prompts que você pode usar com um construtor de apps com IA.

Os principais canais comparados

A maioria dos apps precisa de notificações dentro do app mais e-mail. Push e SMS valem a pena quando o momento importa de verdade, como um lembrete de reserva ou um pedido que ficou pronto.

Como um sistema de notificações se encaixa

Mantenha simples e centralizado:

1. Algo acontece. Um comentário é publicado, um pagamento falha, uma reserva é amanhã.
2. Seu servidor chama uma função, como notify(user, type, data).
3. Essa função confere as preferências do usuário e grava uma linha na tabela notifications (para o sino).
4. Depois, envia para os outros canais que o usuário ativou para aquele tipo: e-mail pelo seu provedor, push pela Push API.
5. O frontend mostra as notificações não lidas e as marca como lidas ao abri-las.

Um único ponto de entrada permite adicionar um canal, mudar um texto ou respeitar preferências sem procurar pelo código inteiro.

O que guardar

Uma tabela de notificações normalmente precisa de: ID do usuário, tipo (por exemplo comment_reply), um título e um corpo curtos, um link para a página relevante, data de criação e data de leitura. Uma tabela separada de preferências guarda quais canais cada usuário quer para cada tipo.

Mostrando as notificações novas

• Carregar ao abrir a página e consultar a cada 30–60 segundos. Simples e confiável.
• Atualização em tempo real com WebSockets ou server-sent events parece instantânea, mas adiciona peças em movimento. Comece com consulta periódica, a menos que atualizações instantâneas sejam essenciais.

Notificações por e-mail

O e-mail precisa de um provedor de envio e de um domínio verificado; os detalhes estão em como enviar e-mails do seu app. Para notificações especificamente:

• Envie a partir do servidor, nunca com a chave do provedor no navegador.
• Agrupe eventos frequentes. "3 novos comentários" em um único e-mail é melhor que três e-mails.
• Ofereça um resumo diário ou semanal para atividades de baixa prioridade.
• Inclua um link de descadastro ou de preferências em e-mails não essenciais. As regras para e-mails de marketing variam de país; verifique o que se aplica a você.

Notificações push web

O push web permite que seu site envie alertas que aparecem como notificações de app. Segundo a documentação da Push API no MDN, funciona assim:

1. Seu site registra um service worker, um script que o navegador pode executar em segundo plano.
2. Depois que o usuário concorda, o service worker assina por meio de PushManager.subscribe(). O navegador devolve uma assinatura com um endpoint e chaves de criptografia.
3. Seu servidor guarda essa assinatura e, quando algo acontece, envia uma mensagem para o endpoint, normalmente assinada com chaves VAPID (um par de chaves que identifica seu servidor).
4. O navegador inicia seu service worker, que exibe a notificação, mesmo que sua página não esteja aberta.

O MDN também observa que o endpoint deve ser mantido em sigilo, pois conhecê-lo basta para enviar mensagens para aquele usuário.

iPhone e iPad

A WebKit adicionou Web Push para apps web no iOS e iPadOS 16.4, com duas condições do anúncio: o site precisa ser adicionado à Tela de Início, e a permissão precisa ser solicitada em resposta a uma ação do usuário, como tocar em um botão de Assinar. Assim, no iPhone, o push só chega a quem instalou seu app web. Veja apps nativos vs. progressive web apps para entender o que significa instalar um app web.

Pedindo permissão do jeito certo

Não peça na primeira visita. Explique primeiro o benefício ("Receba um lembrete uma hora antes da sua aula") e mostre o pedido do navegador quando o usuário tocar em um botão. Se alguém recusar, o navegador pode não deixar você perguntar de novo, então um pedido prematuro pode perder a pessoa para sempre.

Notificações agendadas precisam de um gatilho

"Lembrete 24 horas antes" ou "resumo semanal toda segunda" precisam de algo que rode em um horário definido. Isso é um problema de tarefas em segundo plano, coberto em como executar tarefas em segundo plano. Um padrão comum: um agendador externo chama um endpoint protegido a cada poucos minutos, e esse endpoint envia o que estiver pendente.

Prompts para dar ao seu construtor de IA

Comece pelas notificações dentro do app:

Adicione notificações dentro do app. Crie uma tabela de notificações (usuário, tipo, título, corpo, link, created_at, read_at). Adicione uma função no servidor notify(userId, type, data) que todos os recursos chamam. Mostre um ícone de sino no cabeçalho com a contagem de não lidas, um menu suspenso com as 20 mais recentes e um botão "marcar todas como lidas". Consulte novas notificações a cada 60 segundos.

Depois, preferências e e-mail:

Adicione configurações de notificação: para cada tipo (respostas a comentários, menções, cobrança), deixe o usuário escolher entre app, e-mail, ambos ou nenhum. O notify() deve respeitar essas configurações. Envie e-mails pelo [PROVEDOR] usando o segredo [ENV_NAME], somente no servidor. Agrupe os e-mails de comentários para que um usuário receba no máximo um e-mail a cada 15 minutos.

Depois, push, se precisar:

Adicione push web opcional. Registre um service worker, gere chaves VAPID e guarde a chave privada como segredo. Adicione um botão "Ativar notificações" nas configurações que peça permissão somente quando for clicado. Guarde cada assinatura por usuário e dispositivo, envie pushes a partir do notify() quando o usuário tiver optado, e apague as assinaturas que o serviço de push informar como expiradas.

Erros comuns

• Notificações espalhadas pelo código. Cada recurso envia seu próprio e-mail de um jeito diferente, e as preferências são ignoradas. Use uma única função notify().
• Pedir permissão de push ao carregar a página. A maioria recusa, e você pode não ter outra chance.
• Não ter preferências. Quem não consegue desligar alertas barulhentos desliga todos, ou vai embora.
• Enviar a partir do navegador. Chaves de e-mail e push pertencem ao servidor.
• Não limpar assinaturas push mortas. Assinaturas expiradas se acumulam e desperdiçam envios.
• Detalhes sensíveis no texto da notificação. A tela de bloqueio mostra o texto. "Você tem uma nova mensagem" é mais seguro do que a própria mensagem.
• Nenhum registro do que foi enviado. Quando um usuário diz "nunca recebi o e-mail", logs com os IDs de mensagem do provedor ajudam a descobrir o motivo.

Checklist

• Uma função notify() no servidor, usada em todos os lugares
• Tabela de notificações com estado de leitura, e um sino com contagem de não lidas
• Preferências de canal por tipo, respeitadas pelo notify()
• E-mail enviado pelo servidor com domínio verificado; resumo ou agrupamento para eventos frequentes
• Permissão de push pedida somente após uma ação do usuário, com explicação
• Push testado no desktop e em um iPhone com o app adicionado à Tela de Início
• Assinaturas push expiradas removidas
• Nenhum conteúdo sensível na prévia de push ou de e-mail
• Lembretes agendados com um gatilho confiável

Notificações no Mythex

O Mythex não inclui um serviço de e-mail ou push integrado para os apps que você cria, então você traz o seu provedor de e-mail e gera as próprias chaves de push, guardadas como segredos do projeto. A parte dentro do app só precisa do banco de dados do projeto, que o Mythex adiciona quando você pede. Construa com prompts como os acima, teste o sino e os e-mails no Preview e teste o push na sua URL publicada, já que service workers e push exigem um endereço HTTPS real. A receita da documentação Enviar e-mail do seu app tem um prompt inicial. O Mythex não documenta tarefas agendadas, então planeje lembretes com horário usando um gatilho externo, como descrito em como executar tarefas em segundo plano.

Perguntas