# PWA Quick Start Guide - Angular IDT App

## 🚀 Comandos Essenciais

### Desenvolvimento PWA Local
```bash
# 1. Build de produção (obrigatório para Service Worker)
npm run build:prafrota

# 2. Servir com HTTPS (obrigatório para PWA)
npx http-server dist/idt_app -p 8080 --ssl

# 3. Acessar aplicação
# Chrome: https://localhost:8080
# Firefox: https://127.0.0.1:8080
```

### Testes de Funcionalidade

#### Testar Prompt de Instalação
```bash
# 1. Abrir DevTools (F12)
# 2. Application > Manifest > verificar se está válido
# 3. Application > Service Workers > verificar se está registrado
# 4. Aguardar prompt automático ou usar debug panel
```

#### Testar Updates Automáticos
```bash
# 1. Build inicial
npm run build:prafrota

# 2. Servir aplicação
npx http-server dist/idt_app -p 8080 --ssl

# 3. Fazer alteração no código (ex: console.log no app.component.ts)

# 4. Build novamente
npm run build:prafrota

# 5. Atualizar página - notificação de update deve aparecer
```

## 🔧 Configurações Importantes

### Debug Mode
No `PWANotificationsComponent`, debug desabilitado por padrão:
```typescript
// 🔧 DEBUG PWA - Painel de desenvolvimento
// showDebugInfo = true;  // ✅ Habilitar para desenvolvimento/testes
showDebugInfo = false;    // ✅ Desabilitado para produção (padrão)
```

**Para reativar o debug:**
1. Descomentar `showDebugInfo = true`
2. Comentar `showDebugInfo = false`
3. Rebuild da aplicação

### Service Worker em Desenvolvimento
```typescript
// app.config.ts - já configurado
provideServiceWorker("ngsw-worker.js", {
  enabled: !isDevMode(), // Apenas em produção
  registrationStrategy: "registerWhenStable:30000",
})
```

## 📱 Verificações de Compatibilidade

### Chrome/Edge (Desktop e Android)
- ✅ Prompt de instalação automático
- ✅ Notificações de update
- ✅ Ícone na barra de tarefas/home screen

### Firefox
- ✅ Service Worker funciona
- ⚠️ Prompt de instalação limitado
- ✅ Updates funcionam normalmente

### Safari (iOS)
- ✅ Add to Home Screen manual
- ⚠️ Prompt automático não suportado
- ✅ Service Worker com limitações

## 🐛 Troubleshooting

### Service Worker não registra
```bash
# Verificar se build é de produção
ng build --configuration=production

# Verificar no DevTools > Application > Service Workers
# Deve aparecer "ngsw-worker.js" com status "Activated"
```

### Prompt de instalação não aparece
```typescript
// Verificar no console do browser
console.log('PWA Suportado:', pwaService.isPWASupported());
console.log('Pode Instalar:', pwaService.canInstall);

// Verificar critérios PWA no Lighthouse
// DevTools > Lighthouse > Progressive Web App audit
```

### Updates não detectados
```typescript
// Forçar verificação manual via debug panel ou console
await pwaService.checkForUpdate();

// Verificar no DevTools > Application > Service Workers
// Deve mostrar nova versão em "Waiting" ou "Installing"
```

### Cache não funciona offline
```bash
# Verificar configuração ngsw-config.json
# Testar offline: DevTools > Network > Offline checkbox
# Recursos essenciais devem carregar do cache
```

## 📊 Métricas de Sucesso

### Lighthouse PWA Score
- **Target**: 90-100/100
- **Comando**: DevTools > Lighthouse > Progressive Web App

### Critérios Essenciais
- ✅ HTTPS (produção) ou localhost
- ✅ Manifest válido com ícones
- ✅ Service Worker registrado
- ✅ Offline fallback page
- ✅ Viewport meta tag
- ✅ Theme color definido

## 🔍 URLs de Teste

### Desenvolvimento Local
- **HTTP**: `http://localhost:4200` (desenvolvimento normal)
- **HTTPS**: `https://localhost:8080` (PWA testing)

### Validação Externa
- **Manifest Validator**: https://manifest-validator.appspot.com/
- **PWA Tester**: https://www.webpagetest.org/
- **Lighthouse CI**: Integração para CI/CD

## 📋 Checklist de Deploy

### Antes do Deploy
- [ ] Build de produção executado
- [ ] Service Worker registrado localmente
- [ ] Manifest válido
- [ ] Ícones em todos os tamanhos (72px-512px)
- [ ] HTTPS configurado no servidor
- [ ] Cache headers configurados

### Após Deploy
- [ ] Lighthouse audit score > 90
- [ ] Prompt de instalação funciona
- [ ] Updates automáticos funcionam
- [ ] Funciona offline (recursos básicos)
- [ ] Ícones corretos na home screen
- [ ] Splash screen personalizada

## 🚀 Performance Tips

### Bundle Size
- **PWA Impact**: ~20kB total
- **Service Worker**: ~15kB (Angular SW)
- **PWA Service + Component**: ~5kB

### Otimizações
```typescript
// Lazy loading para PWA components
loadComponent: () => import('./pwa-notifications.component').then(m => m.PWANotificationsComponent)

// Service Worker lazy registration
registrationStrategy: "registerWhenStable:30000"
```

---

**Status**: ✅ PWA Totalmente Implementado
**Última atualização**: Janeiro 2025