Instruções PWA - Free-for-Dev

Este projeto foi convertido em uma Progressive Web App (PWA), permitindo que seja instalado como um aplicativo nativo em dispositivos móveis e desktop.

📋 Arquivos Criados

  • manifest.json: Configuração da PWA (nome, ícones, cores, etc.)
  • sw.js: Service Worker para funcionalidade offline
  • generate_pwa_icons.py: Script para gerar ícones PWA
  • icons/: Diretório com todos os ícones gerados

🚀 Como Usar

1. Gerar Ícones

Se você ainda não gerou os ícones, execute:

python generate_pwa_icons.py [caminho_para_imagem]

Exemplos:

# Usar uma imagem existente
python generate_pwa_icons.py icon-192.png

# Usar qualquer imagem (recomendado: 512x512px ou maior)
python generate_pwa_icons.py logo.png

# O script tentará encontrar automaticamente uma imagem padrão
python generate_pwa_icons.py

O script irá:

  • Gerar todos os tamanhos necessários (16x16 até 512x512)
  • Criar versões maskable para melhor compatibilidade
  • Gerar favicon.ico
  • Salvar tudo no diretório icons/

2. Testar a PWA

  1. Servir via HTTP/HTTPS: PWAs não funcionam com file://
    • Use um servidor local (ex: python -m http.server 8000)
    • Ou hospede em um servidor web

  2. Abrir no navegador: Acesse http://localhost:8000/free-for-dev.html

  3. Verificar no DevTools:
    • Abra DevTools (F12)
    • Vá em “Application” > “Manifest” para verificar o manifest
    • Vá em “Application” > “Service Workers” para verificar o SW
  4. Instalar a PWA:
    • Chrome/Edge: Clique no ícone de instalação na barra de endereços
    • Firefox: Menu > “Instalar Site como Aplicativo”
    • Mobile: Menu do navegador > “Adicionar à Tela Inicial”

🔧 Configurações

Personalizar Cores

Edite manifest.json:

{
  "theme_color": "#ff5722",      // Cor da barra de status
  "background_color": "#f9f9f9"  // Cor de fundo ao carregar
}

Personalizar Nome

Edite manifest.json:

{
  "name": "Seu Nome Aqui",
  "short_name": "Nome Curto"
}

Atualizar Service Worker

Se você modificar o sw.js, os usuários precisarão atualizar:

  • O navegador detectará automaticamente
  • Ou force atualização: DevTools > Application > Service Workers > “Update”

📱 Funcionalidades PWA

✅ Implementado

  • ✅ Instalação como app
  • ✅ Funcionalidade offline básica
  • ✅ Cache de recursos estáticos
  • ✅ Ícones em todos os tamanhos
  • ✅ Manifest completo
  • ✅ Service Worker funcional
  • ✅ Atualização automática

🔄 Estratégia de Cache

  • Recursos estáticos: Cache First (HTML, CSS, manifest)
  • APIs externas: Network First (dados do GitHub)
  • Offline: Exibe página cached se disponível

🐛 Troubleshooting

Service Worker não registra

  • Verifique se está servindo via HTTP/HTTPS (não file://)
  • Verifique o console do navegador para erros
  • Limpe o cache: DevTools > Application > Clear Storage

Ícones não aparecem

  • Verifique se o diretório icons/ existe e contém os arquivos
  • Verifique os caminhos no manifest.json
  • Verifique o console para erros 404

PWA não instala

  • Verifique se o manifest.json é válido (sem erros de JSON)
  • Verifique se há pelo menos um ícone 192x192 e 512x512
  • Verifique se está usando HTTPS (ou localhost para desenvolvimento)

📚 Recursos

📝 Notas

  • O Service Worker cacheia recursos estáticos por 30 minutos
  • Dados do GitHub são sempre buscados online (não cacheados)
  • A PWA funciona melhor com conexão, mas pode exibir dados cached offline
  • Ícones maskable garantem melhor aparência em diferentes dispositivos