deyvisonwanderley
12db52a8a7
- Updated type definitions in ChatWindow and MessageList components for better type safety. - Improved MessageInput to handle message responses, including a preview feature for replying to messages. - Enhanced the chat message handling logic to support message references and improve user interaction. - Refactored notification utility functions to support push notifications and rate limiting for email sending. - Updated backend schema to accommodate new features related to message responses and notifications.
3.6 KiB
3.6 KiB
🔔 Configuração de Push Notifications
Passo 1: Configurar VAPID Keys
1.1 Gerar VAPID Keys (se ainda não tiver)
Execute no diretório do backend:
cd packages/backend
bunx web-push generate-vapid-keys
Isso gerará duas chaves:
- Public Key: Segura para expor no frontend
- Private Key: Deve ser mantida em segredo, apenas no backend
1.2 Configurar no Convex (Backend)
As variáveis de ambiente no Convex são configuradas via dashboard ou CLI:
Opção A: Via Dashboard Convex
- Acesse https://dashboard.convex.dev
- Selecione seu projeto
- Vá em Settings > Environment Variables
- Adicione as seguintes variáveis:
VAPID_PUBLIC_KEY=BDerX0lK_hBCLpC7EbuxoJb2EJ7bcCLaHWxkNumVbvrx9w0MmJduHxJOP3WBwBP-SpQGcueMOyHCv7LFK3KnQks
VAPID_PRIVATE_KEY=KWkJLMxCuCPQQiRXIJEt06G4pTdW0FaUN_vMyY02sc4
FRONTEND_URL=http://localhost:5173
Opção B: Via CLI Convex
cd packages/backend
npx convex env set VAPID_PUBLIC_KEY "BDerX0lK_hBCLpC7EbuxoJb2EJ7bcCLaHWxkNumVbvrx9w0MmJduHxJOP3WBwBP-SpQGcueMOyHCv7LFK3KnQks"
npx convex env set VAPID_PRIVATE_KEY "KWkJLMxCuCPQQiRXIJEt06G4pTdW0FaUN_vMyY02sc4"
npx convex env set FRONTEND_URL "http://localhost:5173"
1.3 Configurar no Frontend
Crie um arquivo .env no diretório apps/web/ com:
VITE_VAPID_PUBLIC_KEY=BDerX0lK_hBCLpC7EbuxoJb2EJ7bcCLaHWxkNumVbvrx9w0MmJduHxJOP3WBwBP-SpQGcueMOyHCv7LFK3KnQks
Importante: Reinicie o servidor de desenvolvimento após criar/modificar o .env.
Passo 2: Configurar FRONTEND_URL
A variável FRONTEND_URL é usada nos templates de email para gerar links de volta ao sistema.
Para Desenvolvimento:
FRONTEND_URL=http://localhost:5173
Para Produção:
FRONTEND_URL=https://seu-dominio.com
Passo 3: Testar Push Notifications
3.1 Registrar Subscription no Frontend
O sistema automaticamente solicita permissão e registra a subscription quando:
- O usuário faz login
- Acessa o chat pela primeira vez
- O Service Worker é instalado
3.2 Verificar se está funcionando
- Abra o DevTools do navegador (F12)
- Vá na aba Application > Service Workers
- Verifique se o Service Worker está registrado
- Vá em Application > Notifications
- Verifique se a permissão está concedida
3.3 Testar envio de push
- Abra o chat em duas abas/janelas diferentes
- Faça login com usuários diferentes
- Envie uma mensagem de um usuário para o outro
- A mensagem deve aparecer como notificação push na outra aba
Troubleshooting
Push notifications não funcionam
- Verificar VAPID keys: Certifique-se de que as keys estão configuradas corretamente
- Verificar Service Worker: O arquivo
sw.jsdeve estar em/static/sw.js - Verificar permissões: O navegador deve ter permissão para notificações
- Verificar console: Procure por erros no console do navegador e do Convex
Erro "VAPID keys não configuradas"
- Verifique se as variáveis de ambiente estão configuradas no Convex
- Reinicie o servidor Convex após configurar as variáveis
- Verifique se os nomes das variáveis estão corretos (case-sensitive)
Service Worker não registra
- Verifique se o arquivo
sw.jsexiste emapps/web/static/sw.js - Verifique se o servidor está servindo arquivos estáticos corretamente
- Limpe o cache do navegador e tente novamente
Segurança
⚠️ IMPORTANTE:
- A Private Key nunca deve ser exposta no frontend
- Use variáveis de ambiente diferentes para desenvolvimento e produção
- Regenere as keys se suspeitar de comprometimento
- Mantenha as keys em segredo (não commite no Git)