🔧 Correções PWA - Tools Artes do Sul

✅ Arquivos Criados/Atualizados

1. manifest-tools.json ✅

  • Manifest específico para o site principal (index.html)
  • Configurado com start_url: "/"
  • Ícones apontando para /icons/
  • Theme color: #0d6efd (azul Bootstrap)

2. sw-tools.js ✅

  • Service Worker específico para o site principal
  • Cache de recursos estáticos
  • Estratégia Network First com fallback

3. index.html ✅

  • Adicionado <link rel="manifest" href="/manifest-tools.json">
  • Adicionado meta tags PWA (theme-color, description)
  • Adicionado ícones (apple-touch-icon, favicon)
  • Adicionado código de registro do Service Worker
  • Adicionado handler para beforeinstallprompt

🚨 Problemas Identificados e Soluções

Problema 1: Manifest não encontrado

Sintoma: PWA não ativa, erro 404 no manifest

Solução:

  1. Verificar se manifest-tools.json está na raiz do servidor
  2. Verificar se o arquivo está acessível: https://tools.artesdosul.com/manifest-tools.json
  3. Verificar Content-Type: deve ser application/manifest+json

Alternativa: Se preferir usar manifest.json:

# Renomear o arquivo
mv manifest-tools.json manifest.json

# Atualizar no index.html
# De: <link rel="manifest" href="/manifest-tools.json">
# Para: <link rel="manifest" href="/manifest.json">

Problema 2: Service Worker não registra

Sintoma: Service Worker não aparece no DevTools

Solução:

  1. Verificar se sw-tools.js está na raiz do servidor
  2. Verificar se está acessível: https://tools.artesdosul.com/sw-tools.js
  3. Verificar console do navegador para erros
  4. Verificar se está usando HTTPS (obrigatório em produção)

Problema 3: Ícones não encontrados

Sintoma: Ícones aparecem quebrados ou não aparecem

Solução:

  1. Verificar se a pasta icons/ existe na raiz
  2. Verificar se todos os arquivos PNG existem
  3. Verificar permissões de arquivo no servidor
  4. Testar acesso direto: https://tools.artesdosul.com/icons/icon-192x192.png

Problema 4: PWA não instala

Sintoma: Botão de instalação não aparece

Possíveis causas:

  1. Manifest inválido (verificar JSON)
  2. Falta ícone 192x192 ou 512x512
  3. Não está em HTTPS
  4. Service Worker não está registrado
  5. Já está instalado

📋 Checklist de Deploy

Antes de Publicar:

  • manifest-tools.json está na raiz do servidor
  • sw-tools.js está na raiz do servidor
  • Pasta icons/ existe e contém todos os ícones
  • Todos os caminhos no manifest estão corretos
  • Site está servindo via HTTPS

Após Publicar:

  • Acessar https://tools.artesdosul.com/manifest-tools.json (deve retornar JSON)
  • Acessar https://tools.artesdosul.com/sw-tools.js (deve retornar JavaScript)
  • Acessar https://tools.artesdosul.com/icons/icon-192x192.png (deve retornar imagem)
  • Abrir DevTools > Application > Manifest (deve mostrar o manifest)
  • Abrir DevTools > Application > Service Workers (deve mostrar SW registrado)
  • Verificar console para erros

🔍 Ferramenta de Diagnóstico

Use o arquivo diagnostico-pwa.html para verificar:

  1. Se HTTPS está ativo
  2. Se Service Worker API está disponível
  3. Se manifest está carregando
  4. Se Service Worker está registrado
  5. Se ícones estão acessíveis
  6. Se PWA está pronta para instalar

Como usar:

  1. Fazer upload de diagnostico-pwa.html para o servidor
  2. Acessar https://tools.artesdosul.com/diagnostico-pwa.html
  3. Verificar os resultados

🛠️ Comandos Úteis

Verificar se arquivos estão acessíveis:

# Manifest
curl -I https://tools.artesdosul.com/manifest-tools.json

# Service Worker
curl -I https://tools.artesdosul.com/sw-tools.js

# Ícones
curl -I https://tools.artesdosul.com/icons/icon-192x192.png
curl -I https://tools.artesdosul.com/icons/icon-512x512.png

Verificar Content-Type:

curl -I https://tools.artesdosul.com/manifest-tools.json | grep -i content-type
# Deve retornar: Content-Type: application/manifest+json

📝 Notas Importantes

  1. HTTPS é obrigatório para PWA em produção
  2. Service Worker só funciona via HTTP/HTTPS (não funciona com file://)
  3. Ícones obrigatórios: 192x192 e 512x512 são mínimos recomendados
  4. Manifest deve ser JSON válido (sem erros de sintaxe)
  5. Scope deve incluir todas as páginas que você quer que funcionem offline

🎯 Próximos Passos

  1. Fazer upload dos arquivos para o servidor
  2. Verificar acessibilidade usando diagnostico-pwa.html
  3. Testar no Chrome DevTools
  4. Executar Lighthouse PWA Audit
  5. Testar instalação em diferentes dispositivos