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.
118 lines
3.6 KiB
Markdown
118 lines
3.6 KiB
Markdown
# 🔔 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:
|
|
```bash
|
|
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
|
|
1. Acesse https://dashboard.convex.dev
|
|
2. Selecione seu projeto
|
|
3. Vá em **Settings** > **Environment Variables**
|
|
4. 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
|
|
```bash
|
|
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:
|
|
|
|
```env
|
|
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:
|
|
1. O usuário faz login
|
|
2. Acessa o chat pela primeira vez
|
|
3. O Service Worker é instalado
|
|
|
|
### 3.2 Verificar se está funcionando
|
|
|
|
1. Abra o DevTools do navegador (F12)
|
|
2. Vá na aba **Application** > **Service Workers**
|
|
3. Verifique se o Service Worker está registrado
|
|
4. Vá em **Application** > **Notifications**
|
|
5. Verifique se a permissão está concedida
|
|
|
|
### 3.3 Testar envio de push
|
|
|
|
1. Abra o chat em duas abas/janelas diferentes
|
|
2. Faça login com usuários diferentes
|
|
3. Envie uma mensagem de um usuário para o outro
|
|
4. A mensagem deve aparecer como notificação push na outra aba
|
|
|
|
## Troubleshooting
|
|
|
|
### Push notifications não funcionam
|
|
|
|
1. **Verificar VAPID keys**: Certifique-se de que as keys estão configuradas corretamente
|
|
2. **Verificar Service Worker**: O arquivo `sw.js` deve estar em `/static/sw.js`
|
|
3. **Verificar permissões**: O navegador deve ter permissão para notificações
|
|
4. **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.js` existe em `apps/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)
|
|
|