Fluxo: PWA (Progressive Web App)
O Portal Meu Núcleo - MBL funciona como PWA, permitindo instalacao na tela inicial do celular e funcionamento offline basico.
manifest.json
Arquivo de manifesto localizado em apps/web/public/manifest.json com as configuracoes do app:
| Campo | Valor | Descricao |
|---|---|---|
name | Portal Meu Núcleo - MBL | Nome completo do app |
short_name | Meu Núcleo MBL | Nome curto para a tela inicial |
display | standalone | App roda sem barra de endereco do browser |
theme_color | #5CBCAE | Cor da barra de status (verde MBL) |
background_color | #000000 | Cor de fundo na splash screen |
icons | array | Icones em multiplos tamanhos (192x192, 512x512) |
start_url | /dashboard | URL inicial ao abrir o app instalado |
Service Worker (sw.js)
Arquivo em apps/web/public/sw.js. Gerencia cache, offline fallback e push notifications.
Eventos tratados
| Evento | Descricao |
|---|---|
install | Pre-cacheia recursos essenciais (offline page, icones) |
activate | Limpa caches antigos de versoes anteriores |
fetch | Intercepta requisicoes — serve do cache quando offline, fallback para pagina offline |
push | Recebe push notification e exibe via showNotification() |
notificationclick | Ao clicar na notificacao, abre/foca a janela do app na URL do payload |
Registro do Service Worker
O service worker e registrado no apps/web/src/app/layout.tsx no carregamento inicial da pagina:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js');
}Banner de Instalacao PWA
Componente React que incentiva o usuario a instalar o app na tela inicial.
Comportamento
- Aparece automaticamente 3 segundos apos o carregamento, apenas em browsers mobile
- Oculto quando o app ja esta rodando em modo
standalone(ja instalado) - O usuario pode dispensar o banner — a dismissao e salva em
sessionStorage(reaparece na proxima sessao)
Android (beforeinstallprompt)
- O browser dispara o evento
beforeinstallpromptquando os criterios PWA sao atendidos - O componente captura o evento e armazena a referencia
- Ao clicar no botao "Instalar", chama
prompt()no evento capturado - O browser exibe o dialogo nativo de instalacao do Android
iOS
- iOS/Safari nao suporta
beforeinstallprompt - Ao clicar no botao, exibe um
alert()com instrucoes manuais: - "Toque no botao Compartilhar e selecione Adicionar a Tela de Inicio"
Deteccao de Modo Standalone
O componente verifica se o app ja esta instalado usando:
window.matchMedia('(display-mode: standalone)').matches
|| window.navigator.standalone === trueSe estiver em modo standalone, o banner de instalacao nunca e exibido.
Fluxo Completo
- Usuario acessa o portal pelo browser mobile
- Service worker e registrado automaticamente
- Apos 3 segundos, banner de instalacao aparece (se nao dispensado nesta sessao)
- Usuario clica "Instalar"
- Android: prompt nativo exibido / iOS: alert com instrucoes
- App instalado aparece na tela inicial com icone e splash screen
- Ao abrir, roda em modo standalone (sem barra de URL)
- Push notifications continuam funcionando em background