Progressive Web App (PWA): definição, funcionamento e casos de uso

Você provavelmente já usou uma progressive web app sem perceber. Quando uma loja online oferece « Adicionar à tela de início », o ícone aparece no celular ao lado dos outros aplicativos e, ao abrir, não há mais barra de endereços nem abas: isso é uma PWA. Tecnicamente você continua em um site. Na prática, está usando um aplicativo.

Este guia traz a definição exata de progressive web app, explica o que a diferencia de um site responsivo comum, detalha o que ela faz e o que não faz — principalmente no iPhone — e ajuda a decidir se é o formato certo para o seu projeto.

Definição: o que é uma progressive web app?

Uma progressive web app (PWA) é uma aplicação web, construída com as tecnologias padrão da web (HTML, CSS, JavaScript), que usa recursos modernos do navegador para entregar uma experiência equivalente à de um aplicativo mobile: instalação na tela de início, abertura em tela cheia, carregamento rápido, funcionamento parcial offline e notificações push.

O termo foi introduzido pelo Google em 2015. O adjetivo « progressive » vem do aprimoramento progressivo: a mesma URL funciona em todo lugar e cada navegador aproveita o máximo do que sabe fazer. Em um navegador antigo o usuário vê um site comum. Em um recente, ele ganha um aplicativo instalável. Nunca existe uma segunda versão para manter.

O que separa uma PWA de um site mobile comum

Um site responsivo se adapta ao tamanho da tela, e só. Uma progressive web app acrescenta três coisas que um site comum não tem: é instalável (tem ícone e abertura próprios), é confiável (mostra algo útil mesmo com conexão instável ou ausente) e consegue trabalhar em segundo plano (notificações, sincronização).

• Site responsivo: abre no navegador, depende da rede, sem ícone e sem notificações.
• Progressive web app: instala, abre em tela cheia, mantém dados em cache e pode notificar.
• App nativo: baixa de uma loja, acessa todo o hardware do aparelho, desenvolvido especificamente para iOS e Android.

Como funciona uma progressive web app

Três peças transformam um site em progressive web app. Elas independem do seu framework, então dá para converter um site existente sem reconstruí-lo.

1. O manifest (web app manifest)

É um pequeno arquivo JSON que descreve seu aplicativo para o sistema operacional: nome, nome curto exibido sob o ícone, ícones em vários tamanhos, cor do tema, página inicial e modo de exibição. É ele que permite ao navegador oferecer a instalação e que faz a barra de endereços sumir na abertura.

2. O service worker

É o coração técnico de uma PWA: um script que roda em segundo plano, separado da página, atuando como intermediário entre o aplicativo e a rede. Ele intercepta requisições e decide se entrega uma versão em cache ou busca dados atualizados. É isso que garante carregamento quase instantâneo na segunda abertura, uma tela útil quando a rede cai e notificações push com o aplicativo fechado.

3. O HTTPS

Um service worker só funciona em conexão segura. O HTTPS, portanto, não é opcional numa progressive web app: é pré-requisito, assim como para o SEO.

Checklist: os critérios de uma PWA de verdade

Muitos sites se apresentam como progressive web apps sem cumprir as condições. Verifique estes pontos antes de usar o termo.

• O site é servido integralmente em HTTPS.
• Existe um manifest válido, com pelo menos nome, ícone 512×512 e página inicial.
• Um service worker está registrado e cobre ao menos um cenário offline.
• A interface é utilizável no celular sem zoom nem rolagem horizontal.
• O desempenho mobile está sob controle (Core Web Vitals: LCP, INP, CLS).
• Cada tela importante mantém uma URL limpa e indexável pelo Google.

As vantagens concretas de uma progressive web app

• Uma única base de código. O mesmo produto serve como site, app Android e app iPhone, em vez de três projetos para financiar e manter.
• Sem atrito de instalação. O usuário chega por um link e já usa o aplicativo. Sem desvio pela loja, sem download de dezenas de megabytes.
• Atualizações imediatas. Você publica e todos recebem a nova versão no carregamento seguinte. Sem revisão para esperar, sem base de usuários presa numa versão antiga.
• SEO preservado. Diferente de um app nativo, invisível para o Google, uma progressive web app continua sendo um site indexável capaz de captar tráfego de busca.
• Sem comissão de loja. Os pagamentos passam pela sua própria solução web, sem retenção sobre compras dentro do app.

Os limites que você precisa conhecer antes de escolher

Uma progressive web app não é um app nativo disfarçado. Três limites orientam a decisão.

• A App Store segue fechada para PWAs. A Apple não aceita uma progressive web app enviada como está: um app considerado sem funcionalidade própria além do site é recusado. No Android, por outro lado, dá para publicar uma PWA na Play Store por meio de uma Trusted Web Activity. Se a sua aquisição depende de visibilidade na App Store, a PWA sozinha não basta.
• O iOS fica atrás. As notificações push web existem no iPhone desde o iOS 16.4, mas somente se o usuário realmente adicionou o aplicativo à tela de início — um passo extra que o Safari destaca bem menos que o Chrome no Android. Várias APIs avançadas também seguem indisponíveis.
• O acesso ao hardware é parcial. Câmera, microfone e geolocalização funcionam bem. Bluetooth, NFC, biometria avançada, processamento pesado de vídeo ou integração profunda com o sistema ainda são terreno do nativo.

PWA, app nativo ou WebView: o comparativo

Quando a progressive web app é a escolha certa

A PWA raramente é um compromisso resignado: para toda uma categoria de produtos, é objetivamente o melhor formato.

• Um MVP ou produto que precisa ser validado rápido, em que o desenvolvimento nativo duplo não se justifica.
• Uma ferramenta interna, portal do cliente ou back-office, que ninguém vai procurar numa loja.
• Um e-commerce ou serviço de reservas, em que cada passo extra antes da compra derruba a conversão.
• Um veículo de mídia ou serviço de conteúdo cuja aquisição depende da busca orgânica.

Na direção oposta, vá de nativo se o produto depender de uso avançado do hardware, de uma experiência muito animada, ou se a presença na App Store for seu principal canal de aquisição.

Como criar uma progressive web app

O caminho se resume a cinco etapas, nesta ordem.

• 1. Construir uma base web sólida. Interface mobile-first, navegação clara e desempenho cuidado: uma PWA lenta continua sendo um app lento.
• 2. Adicionar o manifest. Nome, ícones, cores, modo de exibição e página inicial.
• 3. Implementar o service worker. Definir o que vai para o cache e o que precisa vir da rede, e desenhar a tela offline.
• 4. Servir tudo em HTTPS. Com domínio próprio, essencial para a confiança e para o SEO.
• 5. Testar em aparelhos reais. Conferir a instalação no Android e no iPhone, o comportamento offline e os Core Web Vitals.

Progressive web app e SEO

Esta é a principal vantagem estratégica do formato: seu aplicativo continua sendo um site. Cada página mantém URL indexável, title e meta description próprios, e pode receber dados estruturados. A velocidade trazida pelo cache impacta diretamente os Core Web Vitals, que fazem parte dos sinais de experiência na página. Já um app nativo não traz nenhuma visibilidade nos resultados de busca.

Um ponto de atenção: se o conteúdo for renderizado inteiramente no cliente, garanta que os rastreadores ainda consigam acessá-lo. Renderização no servidor ou geração estática evita sacrificar o SEO em nome da experiência de aplicativo.

Onde a Cadrant entra

Com a Cadrant você descreve seu aplicativo em linguagem natural e obtém uma base web real e mobile-first, com o código pertencendo a você. Itera prompt após prompt, publica no seu próprio domínio em HTTPS e mantém um produto indexável pelo Google.

E se o projeto acabar exigindo presença na App Store, você não fica preso: a Cadrant também gera aplicativos mobile com publicação automatizada (certificado, perfil de assinatura, build de produção e envio ao App Store Connect). Dá para começar com uma progressive web app para validar o mercado e acrescentar o canal das lojas quando ele se pagar.

Conclusão

Guarde a definição simples: uma progressive web app é um site que se instala e se comporta como um aplicativo. Ela entrega uma base de código única, SEO preservado, atualizações imediatas e um custo de entrada bem menor que o nativo — em troca de acesso parcial ao hardware e da ausência na App Store.

Para a maioria dos projetos que estão começando, é o formato mais racional: coloca o produto nas mãos de usuários reais sem imobilizar meses de orçamento e mantém aberta a opção nativa para o dia em que ela realmente se justificar.