Introdução a aplicações web progressivas

Aplicações web progressivas, ou PWAs, usam recursos da plataforma web para entregar uma experiência mais integrada ao dispositivo. Elas continuam acessíveis por URL, mas também podem ser instaladas, funcionar melhor em redes instáveis e usar recursos do sistema quando existe suporte.

Uma PWA não é um framework e também não transforma automaticamente um site em aplicativo nativo. Na prática, o termo descreve uma estratégia de progressive enhancement. Você começa com uma aplicação web funcional e adiciona capacidades conforme o navegador e o dispositivo permitem.

O que são aplicações web progressivas

Uma Progressive Web App combina o alcance da web com algumas experiências associadas aos aplicativos de plataforma. O usuário pode encontrar o conteúdo por um link e, em navegadores compatíveis, instalar a aplicação no sistema.

Três princípios ajudam a avaliar a experiência:

Confiável: o conteúdo principal continua útil em redes lentas ou durante falhas previstas.
Capaz: a aplicação usa recursos do dispositivo quando eles agregam valor e têm suporte.
Instalável: o navegador pode apresentar a aplicação de forma integrada ao sistema.

Esses pontos não substituem os fundamentos. Uma PWA também precisa ser responsiva, acessível, segura e rápida. Além disso, cada funcionalidade deve ter um fallback.

Componentes principais de uma PWA

Não existe uma única lista de APIs obrigatórias para todas as experiências. Entretanto, dois componentes aparecem com frequência: o web app manifest e o service worker.

Web app manifest

O web app manifest é um arquivo JSON que descreve como a aplicação deve aparecer e iniciar. Ele pode informar nome, ícones, URL inicial, cores e modo de exibição.

Um exemplo básico fica assim:

{
  "name": "Minha aplicação web progressiva",
  "short_name": "Minha PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1d2327",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}Code language: JSON / JSON with Comments (json)

Depois, conecte o arquivo ao documento:

<link rel="manifest" href="/manifest.webmanifest">Code language: HTML, XML (xml)

Os critérios de promoção da instalação variam entre navegadores. Em navegadores baseados em Chromium, campos como name ou short_name, start_url, display e ícones adequados fazem parte dos requisitos usuais. Por isso, valide o manifest nas ferramentas do navegador e consulte o guia atual de instalação de PWAs no MDN.

Service worker e experiência offline

Um service worker roda separado da página e pode interceptar requisições, gerenciar cache e receber eventos em segundo plano. Ele permite criar experiências offline e estratégias para redes instáveis.

Entretanto, um service worker não deixa a aplicação offline sozinho. Você precisa decidir quais recursos entram no cache, quando atualizá-los e o que mostrar durante uma falha de rede.

O registro começa na página:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const registration = await navigator.serviceWorker.register('/sw.js');
      console.log('Service worker registrado:', registration.scope);
    } catch (error) {
      console.error('Falha ao registrar o service worker:', error);
    }
  });
}Code language: JavaScript (javascript)

Em produção, planeje também expiração, atualização e limite de armazenamento. Uma resposta antiga no cache pode ser tão problemática quanto uma aplicação indisponível. Veja a introdução a service worker e as estratégias de cache para PWAs para avançar nesse tema.

Atualmente, um service worker não é requisito universal para instalar uma PWA. Ainda assim, ele continua importante quando a proposta inclui funcionamento offline ou maior resiliência de rede.

HTTPS é obrigatório

Service workers e várias APIs usadas por PWAs exigem um contexto seguro. Portanto, publique a aplicação com HTTPS. Ambientes locais como localhost recebem uma exceção para facilitar o desenvolvimento.

HTTPS protege o tráfego, mas não resolve toda a segurança da aplicação. Continue validando dados, atualizando dependências, aplicando Content Security Policy quando fizer sentido e protegendo autenticação e sessões.

Recursos que podem melhorar uma PWA

O post “PWAs em 2020” acompanhava versões do Chrome e uma lista de APIs previstas. Essa fotografia histórica envelheceu, mas a ideia central continua válida: as capacidades da web evoluem de forma contínua.

Hoje, uma PWA pode usar diferentes APIs, conforme o suporte:

Push API e Notifications API: entregam notificações após uma permissão explícita.
Web Share API: abre o menu nativo para compartilhar links, textos e arquivos.
Web Share Target API: permite que uma PWA instalada receba compartilhamentos.
App shortcuts: adicionam atalhos para ações específicas no ícone instalado.
File handling: associa tipos de arquivo à aplicação em plataformas compatíveis.
Badging API: exibe um indicador no ícone da aplicação.

Esses recursos não definem sozinhos uma PWA. Além disso, o suporte muda entre navegadores, sistemas e formatos de instalação. Faça detecção de recursos e mantenha uma experiência básica funcional.

O Project Fugu reúne parte do trabalho para ampliar as capacidades da web. Porém, uma API disponível no Chromium não deve ser tratada como universal. Consulte a documentação, dados de compatibilidade e testes em dispositivos reais antes de adotá-la.

Como tornar uma PWA instalável

O processo exato depende do navegador e do sistema operacional. Em geral, siga estas etapas:

Publique a aplicação por HTTPS.
Adicione um web app manifest válido em todas as páginas relevantes.
Forneça nome, ícones, start_url e modo de exibição adequados.
Garanta que a aplicação continue útil após a instalação.
Teste o fluxo nos navegadores e sistemas do seu público.

Alguns navegadores mostram um ícone de instalação na barra. Outros apresentam a opção no menu de compartilhamento ou no menu principal. Há também navegadores que permitem instalar qualquer site como aplicativo, mesmo sem atender a todos os critérios tradicionais de PWA.

Por isso, não dependa de um único botão ou evento de instalação. Explique o processo apenas quando a plataforma oferecer essa opção. No iOS, confira também as orientações sobre ícones para PWAs.

PWA precisa funcionar offline?

Uma experiência offline é comum e valiosa, mas não precisa reproduzir toda a aplicação sem rede. Em muitos produtos, faz mais sentido oferecer uma página de contingência, conteúdo lido recentemente ou uma fila para ações pendentes.

Defina o comportamento com base na tarefa do usuário. Um editor pode salvar um rascunho local. Uma loja pode exibir itens visitados e explicar que o pagamento exige conexão. Assim, o modo offline oferece uma saída útil em vez de esconder a falha.

PWA substitui um aplicativo nativo?

Depende do produto. Uma PWA reduz a barreira de acesso porque usa uma URL e uma base de código web. Em contrapartida, APIs específicas, distribuição em lojas, execução em segundo plano e integração profunda com o sistema variam por plataforma.

Antes de escolher, liste as capacidades essenciais e valide o suporte nos dispositivos do público. Em muitos casos, a PWA atende todo o produto. Em outros, ela complementa aplicativos nativos.

Checklist para sua primeira PWA

Use esta lista como ponto de partida:

A aplicação funciona sem depender da instalação.
O layout responde bem a diferentes tamanhos e formas de entrada.
Todas as páginas usam HTTPS.
O manifest contém informações e ícones válidos.
A estratégia de cache possui atualização e fallback.
Permissões são solicitadas depois de explicar o benefício.
Recursos opcionais usam detecção de suporte.
Navegação, formulários e mensagens são acessíveis.
Instalação e funcionamento offline foram testados em dispositivos reais.

Se o projeto usa WordPress, mantenha o guia específico sobre PWA para WordPress como conteúdo separado. A intenção é diferente: este artigo explica os fundamentos, enquanto o outro trata da implementação na plataforma.

Conclusão

Aplicações web progressivas não dependem de uma versão específica do Chrome nem de uma lista fixa de APIs. Elas combinam os fundamentos da web com melhorias progressivas para instalação, resiliência e integração ao dispositivo.

Comece pelo problema do usuário. Depois, adicione manifest, service worker e APIs do sistema apenas quando eles melhorarem uma tarefa real. Dessa forma, a aplicação continua útil em diferentes navegadores e pode evoluir sem abandonar o alcance da web.