Experiencia Mobile/PWA - ROADMAP mobile

gistfile1.txt

 Experiencia Mobile/PWA - ROADMAP mobile

Item exclusivo para consolidar os recursos ja implementados ate o momento no ROADMAP mobile, incluindo entregas feitas antes do inicio formal deste roadmap.

### Base PWA e instalacao

- Manifesto PWA configurado com nome, nome curto, descricao, idioma `pt-BR`, modo `standalone`, orientacao `portrait-primary`, cores de tema/fundo e categorias.
- Metadados mobile/iOS/Android configurados no HTML, incluindo `viewport-fit=cover`, `apple-mobile-web-app-capable`, status bar e icones.
- Icones PWA disponiveis para favicon, 192x192, 512x512, maskable icon e splash/iconografia de instalacao.
- Service worker registrado no frontend.
- Cache de shell estatico e assets principais, incluindo CSS, JavaScript, fontes e imagens.
- Fallback offline para navegacao quando a aplicacao esta sem conexao.
- Cache parcial de requisicoes `GET` para manter dados recentes acessiveis em cenarios offline.
- Banner/feedback de modo offline e reconexao.
- Prompt de instalacao PWA com captura de `beforeinstallprompt`.
- Prompt de atualizacao quando ha nova versao do service worker disponivel.
- Deteccao de execucao em modo instalado/standalone.

### Layout responsivo mobile-first

- Layout mobile-first aplicado aos paineis autenticados.
- Grids responsivos para celular, tablet e desktop.
- Sidebar adaptada para drawer mobile.
- Header mobile com acoes compactas.
- Cards, dashboards, listas, formularios e paineis ajustados para largura pequena.
- Tabelas administrativas convertidas para leitura mobile em formato de cards/linhas com rotulos automaticos por coluna.
- Ajustes para evitar scroll horizontal indevido em telas pequenas.
- Areas seguras de iPhone/Android respeitadas com `safe-area-inset` e padding inferior apropriado.
- Ajustes de largura, margens, espacamentos e altura minima para melhorar leitura em portrait.

### Navegacao e gestos

- Navegacao inferior mobile com ate 5 itens principais por perfil.
- Estado ativo da navegacao inferior.
- Alvos de toque ampliados para uso confortavel em celular.
- Botao mobile para abrir/fechar menu lateral.
- Gesto de swipe da borda esquerda para abrir o menu.
- Gesto de swipe para fechar o menu.
- Pull-to-refresh visual com limiar de acionamento e indicador de arrasto.
- Ajustes de `touch-action` e remocao de highlight de toque quando adequado.

### Componentes e formularios mobile

- Carteirinha digital otimizada para tela cheia no celular.
- QR Code da carteirinha ampliado e mais legivel em portrait.
- Formularios com campos maiores, melhor espacamento, labels legiveis e area de toque adequada.
- `inputmode` configurado para e-mail, telefone, numeros e valores decimais quando aplicavel.
- Autocomplete/autofill habilitado em campos apropriados.
- Mascaras automaticas para CPF, CNPJ, telefone e CEP.
- Campos mascarados mantem valor visual formatado e valor normalizado para envio.
- Acoes fixas/sticky em modais mobile para melhorar confirmacao de formularios longos.
- Skeleton loading para listas e areas de carregamento.
- Busca rapida e filtros responsivos em telas administrativas.
- Dashboards com cards empilhados no mobile.
- Graficos responsivos com `ResponsiveContainer`.
- Indicadores resumidos ajustados para leitura em telas estreitas.

### Performance e experiencia de uso

- Lazy loading, skeletons e carregamento progressivo em areas de lista/dados.
- Code splitting/tree shaking preservados pelo build Vite.
- Cache HTTP/Nginx para assets estaticos e essenciais do PWA.
- Compressao gzip configurada no Nginx.
- Tema claro/escuro automatico conforme preferencia do sistema.
- Compartilhamento nativo via Web Share API quando disponivel.
- Fallback de compartilhamento por WhatsApp quando Web Share nao esta disponivel.

### Seguranca e privacidade no mobile

- Timeout de inatividade com logout apos periodo configurado.
- Ocultacao/mascara de dados sensiveis em interfaces selecionadas.
- Privacy Shield ao alternar app/aba ou ocultar a pagina, reduzindo exposicao de dados no seletor de apps.
- Headers de seguranca configurados para producao, incluindo HSTS, CSP, Permissions-Policy e protecoes de iframe.
- Fluxos mobile preservam RBAC e isolamento por perfil/tenant ja existentes.

### Testes relacionados

- Testes frontend cobrindo navegacao inferior mobile.
- Testes do manifesto PWA.
- Testes de banner offline e cache offline.
- Testes de prompt de instalacao e atualizacao PWA.
- Testes de Privacy Shield.
- Testes de rotulos automaticos em tabelas mobile.
- Testes de reconexao e modo standalone.
- Testes de tema automatico e compartilhamento.
- Testes de drawer por swipe e pull-to-refresh.
- Testes de mascaras CPF, CNPJ, telefone e CEP.