- Service Worker v1.39.0 com estratégias offline-first - Cache-First: imagens, fontes (resposta imediata) - Network-First: chamadas API (dados frescos) - Stale-While-Revalidate: HTML/CSS/JS - Verificação de atualizações a cada 1 hora - Prompt de atualização quando nova versão disponível - manifest.json otimizado: scope, categories, prefer_related_applications - Meta tags iOS: apple-mobile-web-app-capable, black-translucent - Registro automático do Service Worker em main.jsx - Documentação completa: docs/INSTALACAO_iOS.md - Compatível com upgrade futuro para Capacitor (30 min, zero mudanças) Deploy: frontend/dist deployed to 213.165.93.60
4.5 KiB
4.5 KiB
📱 Como Instalar WebMoney no iPhone/iPad
✅ Requisitos
- iOS 11.3 ou superior
- Safari (navegador nativo do iOS)
📲 Passo a Passo da Instalação
1. Abrir no Safari
Abra o Safari e acesse: https://webmoney.cnxifly.com
⚠️ IMPORTANTE: Deve ser o Safari! Chrome e Firefox no iOS não suportam PWA.
2. Fazer Login
Entre com suas credenciais:
- Email:
marco@cnxifly.com - Senha:
M@ster9354
3. Adicionar à Tela Inicial
- Toque no ícone de Compartilhar (quadrado com seta para cima)
- Role para baixo e toque em "Adicionar à Tela de Início"
- Confirme o nome "WebMoney" (ou personalize)
- Toque em "Adicionar"
4. Usar como App
- Um ícone do WebMoney aparecerá na sua tela inicial
- Toque no ícone para abrir como aplicativo
- O app abrirá em tela cheia (sem barras do Safari)
- Status bar translúcido integrado ao design
🎨 Recursos PWA
✅ O que Funciona
- Instalação na tela inicial - Ícone próprio como app nativo
- Modo standalone - Sem barras do navegador
- Cache offline - Assets ficam em cache para carregamento rápido
- Service Worker - Atualizações automáticas
- Ícone Apple Touch - 180x180px otimizado para iOS
- Status bar integrado - Estilo black-translucent
🚫 Limitações do PWA no iOS
- Sem notificações push (Safari não suporta)
- Sem sincronização em background (requer app nativo)
- Cache limitado - iOS pode limpar cache se memória baixa
- Sem acesso a APIs nativas (câmera, localização, etc.)
🔄 Atualizações
O app verifica atualizações automaticamente:
- A cada 1 hora enquanto app estiver aberto
- Ao recarregar a página
- Quando houver atualização, aparece um prompt perguntando se deseja atualizar
🆙 Upgrade Futuro: App Store
Se no futuro desejarmos publicar na App Store (US$ 99/ano):
Opção 1: Capacitor (Recomendado)
- Tempo: 30 minutos
- Código: Zero mudanças necessárias
- Recursos: Notificações push, background sync, APIs nativas
- Build: Ionic Capacitor (
npx cap add ios)
Opção 2: React Native
- Tempo: 2-3 dias
- Código: Reescrever em React Native
- Recursos: Acesso total a APIs nativas
- Custo: Alto esforço de migração
📊 Comparação: PWA vs App Nativo
| Recurso | PWA (Atual) | Capacitor | App Nativo |
|---|---|---|---|
| Custo | Gratuito | $99/ano | $99/ano |
| Instalação | Via Safari | Via App Store | Via App Store |
| Tempo desenvolvimento | Pronto | 30 min | 2-3 dias |
| Notificações | ❌ | ✅ | ✅ |
| Offline | ✅ Parcial | ✅ Total | ✅ Total |
| APIs Nativas | ❌ | ✅ | ✅ |
| Atualizações | Automático | Automático | App Store Review |
| Compatibilidade código | - | 100% | 0% (reescrever) |
🐛 Troubleshooting
App não aparece na tela inicial
- Certifique-se de usar Safari (não Chrome/Firefox)
- Verifique se está em https://webmoney.cnxifly.com (não IP)
- Tente recarregar a página (⌘+R no Safari)
App não funciona offline
- Service Worker leva alguns segundos para cachear
- Navegue pelo app após instalação para cachear rotas
- Cache só funciona após primeira visita
Ícone não aparece correto
- Force reload do Safari: ⌘+Shift+R
- Remova o app e reinstale
- Limpe cache do Safari (Ajustes > Safari > Limpar Histórico)
📝 Notas Técnicas
Service Worker
- Versão: 1.39.0
- Estratégias:
- Cache-First: Imagens, fontes (resposta imediata)
- Network-First: Chamadas API (dados frescos)
- Stale-While-Revalidate: HTML/CSS/JS (balance)
Manifest
- scope:
/(todo o site) - display:
standalone(tela cheia) - orientation:
portrait-primary(retrato) - categories: finance, productivity, business
Meta Tags iOS
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="WebMoney">
<meta name="format-detection" content="telephone=no">
🎯 Conclusão
O PWA do WebMoney oferece:
- ✅ Experiência de app nativo sem custo da App Store
- ✅ Instalação simples via Safari
- ✅ Performance otimizada com cache offline
- ✅ Atualizações automáticas sem revisão da Apple
- ✅ Caminho de upgrade para Capacitor quando necessário
Para mais informações, consulte CHANGELOG.md versão 1.39.0.