PWA e Modo Offline

[FernandoAlmeidaPinto]

Categoria: Plataforma / Acessibilidade
Prioridade sugerida: Baixa
Público-alvo: Estudantes que acessam pelo celular ou com conexão instável

---

Contexto

O público do Você na Facul estuda em condições diversas. Muitos alunos acessam a plataforma pelo celular, no transporte público, com dados móveis limitados e conexão instável. Quando a internet cai no meio de um simulado, a experiência é frustrante e pode fazer o aluno perder todo o progresso.

Além disso, instalar um app é uma barreira que muitos usuários não transpõem — especialmente em dispositivos com pouco espaço de armazenamento. Uma Progressive Web App (PWA) oferece uma experiência próxima a de um app nativo, mas diretamente pelo navegador, sem passar pela loja de aplicativos.

---

A Ideia

Transformar o site do Você na Facul em uma PWA completa: instalável na tela inicial do celular, com partes do conteúdo disponíveis offline, e com sincronização automática quando a conexão voltar.

---

Como poderia funcionar na prática

Instalação (Add to Home Screen):

• O navegador exibe um banner discreto sugerindo instalar a plataforma
• Após instalar, aparece como ícone na tela inicial — igual a um app nativo
• Tela de splash com a identidade visual do Você na Facul ao abrir
• Funciona em Android e iOS (com algumas limitações no Safari/iOS)

O que funciona offline:

• Simulados que o aluno já iniciou ficam em cache — ele pode continuar respondendo sem internet
• As questões são sincronizadas localmente ao carregar o simulado
• Histórico de simulados já realizados fica acessível para consulta
• Conteúdo teórico (se implementado) pode ser baixado antecipadamente
• Rascunhos de redação salvos localmente enquanto a conexão está fora

Sincronização:

• Quando a conexão voltar, respostas salvas offline são enviadas automaticamente
• O usuário recebe uma confirmação discreta: "Suas respostas foram sincronizadas"
• Conflitos (ex.: o simulado foi encerrado enquanto estava offline) são tratados com uma mensagem clara

Push Notifications:

• A PWA instalada pode receber push notifications mesmo com o navegador fechado
• Integração natural com a Central de Notificações (discussion feat: Adiciona templates para Discussions (bug e feature request) #10)

---

Perguntas para a comunidade

1. Escopo do offline: O que é essencial offline e o que é opcional? Simulados em andamento são claros, mas redações, flashcards, plano de estudos — quais valem o esforço de implementar offline?

2. Limites de armazenamento: O cache tem limites (especialmente em iOS). Devemos deixar o usuário escolher o que quer deixar disponível offline (ex.: "Baixar simulados desta semana") ou fazer isso automaticamente?

3. iOS vs. Android: O suporte a PWA no iOS é historicamente inferior ao Android (notificações push ainda têm limitações). Como comunicamos isso sem criar expectativas erradas em usuários iOS?

4. Atualização de conteúdo: Como garantimos que o aluno offline não está vendo questões ou simulados desatualizados? Precisamos de uma estratégia clara de invalidação de cache.

5. Métricas de uso offline: Como rastreamos o uso offline para entender o impacto real? Eventos salvos localmente e sincronizados depois?

6. Comunicação com o usuário: Quando o aluno está offline, como comunicamos isso claramente sem travar a interface? Um banner sutil é suficiente?

---

Riscos e pontos de atenção

• PWA no iOS tem suporte mais limitado — funcionalidades como push notifications e background sync ainda são restritas no Safari
• Simulados com timer: se o aluno vai offline durante um simulado com tempo, o timer continua correndo no cliente mas o servidor não sabe — precisamos de uma política clara (timer local vs. servidor)
• Conteúdo desatualizado: o usuário pode estar respondendo a um simulado cuja versão mudou — precisamos de controle de versão de conteúdo em cache
• O benefício da PWA é maior para o público que mais precisamos atender (mobile, conexão instável) — mas a implementação correta exige esforço significativo

---

Referências e inspirações

• Twitter Lite (agora X Lite) é o case clássico de PWA que melhorou dramaticamente a experiência em mercados emergentes com conexão instável
• Khan Academy tem uma estratégia de conteúdo offline bem desenvolvida para seu app — bom referencial de UX para indicar o que está disponível sem internet
• O Trivago mostrou que instalar como PWA aumenta conversão em mercados mobile-first — dado relevante para nosso contexto

---

Essa discussion é parte de uma série de propostas para o futuro do Você na Facul. Leia as demais e contribua com sua visão!