Construir um aplicativo instalável e resiliente

Três peças, na ordem certa, transformam um site em aplicativo instalável, sem loja nem segundo projeto: conexão segura, processo de fundo e ficha de instalação. Sem as três juntas, o navegador não oferece a instalação, e o atalho instalado não abre sem rede.

Quem opera terminal e agente (o assistente de código que executa o pedido) decide como o site chega ao celular do cliente. A ordem das peças, a estratégia de cache por arquivo, os ajustes contra o botão cortado e o banco local para quem edita sem rede seguem dessa escolha.

PWA (aplicativo web progressivo, o site que se instala como app) nasce dessa ordem de dependência. A conexão segura, HTTPS, vem primeiro: sem ela, a peça seguinte nem é registrada.

O service worker (o processo de segundo plano, entre a tela e a rede) decide a cada pedido: servir o guardado ou buscar de novo. A ficha de instalação, o manifesto com nome, ícones e cores, fecha a ordem e faz o navegador oferecer a instalação. Fora dela, a ficha sozinha instala um atalho que não abre sem rede.

Ir para a loja só compensa com dois gatilhos: recurso pesado do aparelho, como câmera, sensores ou biometria, ou posicionamento comercial que depende da loja. Fora deles, instalar pela web mantém um código só para web, Android e iPhone. Antecipar a loja sem gatilho troca publicação em segundos por aprovação de terceiro e dois pacotes a manter.

A instalação, porém, não é igual nos dois lados. No Chrome para Android o navegador oferece a instalação pela própria interface, e o evento beforeinstallprompt permite montar o convite dentro do site.

No iPhone e no iPad não existe convite automático. Desde 2018 a instalação sai do menu de compartilhamento, na opção Adicionar à Tela de Início, e o site precisa dizer isso em texto.

O aviso de notificação depende da mesma escolha. No iPhone e no iPad, o envio de mensagem pelo navegador só funciona no aplicativo já adicionado à Tela de Início. A capacidade veio com o sistema 16.4, de março de 2023.

O Workbox (o conjunto de bibliotecas do Chrome que monta o service worker pronto) está em 54% dos sites mobile e traz as três estratégias de cache. Cache First serve fonte, ícone e arquivo com nome versionado: a tela vem na hora, e o risco é mostrar versão antiga.

Network First serve a API (a porta por onde o site pede dados ao servidor), o login e o pagamento. O dado chega fresco, e a tela paga o tempo da ida. Stale-While-Revalidate serve o que tolera estar uma visita atrás, como foto de perfil: entrega o guardado e busca a versão nova por trás.

Uma estratégia única para o site inteiro é o erro mais comum do service worker gerado por agente; o segundo é guardar por endereço fixo. Você publica a correção, o endereço continua igual, e o cliente vê a tela de ontem.

Identificar o arquivo pelo conteúdo é a resposta do Workbox: mudou o conteúdo, mudou o identificador, e o antigo é descartado. Sem ele, o plano B é a versão no nome do arquivo e a limpeza do cache antigo ao ativar.

Instalado, o site abre dentro da moldura do celular, e três ajustes de CSS separam aplicativo de site encolhido. A altura em vh ignora a barra de endereço, e o bloco de abertura estoura na rolagem; a unidade dvh acompanha a barra em tempo real.

O recorte da câmera e a barra de gestos pedem dois passos. Escreva viewport-fit=cover na meta de viewport; depois some o recuo do sistema a um mínimo seu no espaçamento do botão fixo. Sem o primeiro passo, o segundo devolve zero.

Resta o gesto de rolagem. touch-action: pan-y libera o arraste lateral do carrossel sem brigar com a rolagem vertical; overscroll-behavior: contain impede a lista de vazar para a página atrás da janela. O recorte varia por aparelho, e o botão cortado aparece no celular de quem usa, nunca no seu. Teste num aparelho de verdade, não só no simulador.

Quem precisa editar sem rede entra no local-first (o dado mora no aparelho e sincroniza quando a rede volta, como um caderno que se copia sozinho). O motor é um CRDT (a estrutura que funde as edições de duas pessoas sem conflito).

O Yjs tem o maior ecossistema, cerca de 920 mil downloads semanais, e move Notion, TipTap e BlockNote: é a escolha para edição em tempo real. O Automerge guarda o histórico estilo Git. Vale quando a auditoria de quem mudou o quê importa mais que o tempo real.

Para banco de aplicação com sincronização, ElectricSQL, Zero e TinyBase usam SQLite (o banco de arquivo único) no aparelho. O Zero resolve conflito por regra de negócio com mutators em TypeScript no servidor; o TinyBase é o pacote único MIT. O TanStack DB 0.6 segue em beta e fica no protótipo.

O relatório offline seguro do manual é um HTML único com o banco dentro do navegador e os dados locais. O SQLite Wasm 3.53, com cerca de 400 KB gzip, é o padrão. Suba para o PGlite 0.5.8 e os seus 3,3 MB só quando extensões e tipos do Postgres justificam.

O critério separa os dois: cache resolve ver, local-first resolve gravar. Numa distribuidora de bebidas, o vendedor em bairro sem sinal vê o catálogo de ontem com cache e só grava o pedido com local-first. A última caixa vendida duas vezes se resolve por regra de negócio no servidor.

Antes de pedir o service worker ao agente, escreva a estratégia de cada arquivo. Cache First para fonte e ícone versionado, Network First para dados e pagamento, Stale-While-Revalidate para o resto. Publique uma correção e recarregue no celular: se o texto antigo persistir, o guardado está por endereço fixo, e não por conteúdo.