teste
/
testes
Template
2
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects 1 Releases Wiki Activity
testes/Modulos Angular/projects/idt_app/docs/pwa/PWA_QUICK_START.md

4.7 KiB
Raw Blame History

PWA Quick Start Guide - Angular IDT App

🚀 Comandos Essenciais

Desenvolvimento PWA Local

# 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

# 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

# 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:

// 🔧 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

// 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

# 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

// 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

// 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

# 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

📋 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

// 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