📚 Guia Completo de Implantação Manual
Use este guia para configurar seu PWA manualmente com os arquivos baixados.
1. 📌 O que colocar no index.html:
<!-- Manifest e tema -->
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#4338ca">
<!-- Ícone para iOS -->
<link rel="apple-touch-icon" href="/icons/icon-192x192.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
2. 🔄 O que colocar no final do window.onload):
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/ws.js')
.then(reg => console.log('[SW] Registrado com sucesso:', reg.scope))
.catch(err => console.error('[SW] Falha no registro:', err));
});
}
</script>
3. ✅ Checklist Final para tornar qualquer site um PWA instalável:
Verifique se seu site tem:
- ✅ HTTPS ativo (obrigatório)
- ✅ Service Worker registrado e ativo (ws.js)
- ✅ Página offline funcional (offline.html)
- ✅ manifest.json configurado com ícones
- ✅ Ícones 192x192 e 512x512 na pasta
/icons/
- ✅ Tags no
4. 📁 Estrutura de arquivos recomendada:
seu-site/
├── index.html
├── ws.js
├── offline.html
├── manifest.json
└── icons/
├── icon-192x192.png
└── icon-512x512.png
5. ♻️ Como reutilizar em qualquer projeto:
- Copie os arquivos
ws.js e offline.html da pasta files/.
- Ajuste
CACHE_VERSION no ws.js sempre que mudar assets.
- Atualize
STATIC_ASSETS no ws.js com os caminhos dos seus novos arquivos (CSS, JS, páginas, etc).
- Crie o
manifest.json personalizado com nome, cores e ícones do novo projeto.
- Gere os ícones e coloque na pasta
/icons/.
- Adicione as tags no
- Registre o SW conforme instrução acima.
⚠️ Importante: Você ainda precisa de um manifest.json válido. Use o gerador acima ou crie manualmente. Os arquivos ws.js e offline.html já estão prontos para uso.