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

Provavelmente já usou uma progressive web app sem perceber. Quando uma loja online oferece « Adicionar à ecrã de início », o ícone aparece no telemóvel ao lado dos outras aplicações e, ao abrir, não há mais barra de endereços nem separadores: isso é uma PWA. Tecnicamente continua num site. Na prática, está a usar uma aplicação.

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 uma aplicação mobile: instalação no ecrã de início, abertura em ecrã inteiro, carregamento rápido, funcionamento parcial offline e notificações push.

O termo foi introduzido pela 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. Num navegador antigo o utilizador vê um site comum. Num recente, ele ganha uma aplicação 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 do ecrã, 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 ecrã inteiro, mantém dados em cache e pode notificar.
• App nativa: baixa de uma loja, acessa todo o hardware do dispositivo, 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 é possível converter um site existente sem reconstruí-lo.

1. O manifest (web app manifest)

É um pequeno ficheiro JSON que descreve a sua aplicação 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 a aplicação e a rede. Ele intercepta requisições e decide se entrega uma versão em cache ou pesquisa dados atualizados. É isso que garante carregamento quase instantâneo na segunda abertura, um ecrã útil quando a rede cai e notificações push com a aplicação fechada.

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 a sério

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á registado e cobre ao menos um cenário offline.
• A interface é utilizável no telemóvel sem zoom nem scroll horizontal.
• O desempenho mobile está sob controlo (Core Web Vitals: LCP, INP, CLS).
• Cada ecrã importante mantém uma URL limpa e indexável pela 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 utilizador chega por um link e já usa a aplicação. Sem desvio pela loja, sem download de dezenas de megabytes.
• Atualizações imediatas. Publica e todos recebem a nova versão no carregamento seguinte. Sem revisão para esperar, sem base de utilizadores presa numa versão antiga.
• SEO preservado. Diferente de uma app nativa, invisível para a Google, uma progressive web app continua a ser um site indexável capaz de captar tráfego de pesquisa.
• Sem comissão de loja. Os pagamentos passam pela sua própria solução web, sem retenção sobre compras dentro da app.

Os limites que precisa conhecer antes de escolher

Uma progressive web app não é uma app nativa disfarçada. 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á: uma app considerada sem funcionalidade própria além do site é recusado. No Android, por outro lado, é possível 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 utilizador realmente adicionou a aplicação à ecrã 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âmara, 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 nativa 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 pesquisa 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 o seu principal canal de aquisição.

Como criar uma progressive web app?

O caminho se resume a cinco etapas, nesta ordem. Para uma orientação técnica mais profunda, a documentação de PWA do web.dev continua a ser a referência canônica.

• 1. Construir uma base web sólida. Interface mobile-first, navegação clara e desempenho cuidado: uma PWA lenta continua a ser uma app lenta.
• 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 o ecrã offline.
• 4. Servir tudo em HTTPS. Com domínio próprio, essencial para a confiança e para o SEO.
• 5. Testar em dispositivos reais. Consultar 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: a sua aplicação continua a ser 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á uma app nativa não traz nenhuma visibilidade nos resultados de pesquisa.

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 aplicação.

Onde a Cadrant entra?

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

E se o projeto acabar exigindo presença na App Store, não fica preso: a Cadrant também gera aplicações móveis com publicação automatizada (certificado, perfil de subscrição, build de produção e envio ao App Store Connect). É possível 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 uma aplicação. 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 a começar, é o formato mais racional: coloca o produto nas mãos de utilizadores reais sem imobilizar meses de orçamento e mantém aberta a opção nativa para o dia em que ela realmente se justificar.