Como usar um PWA no seu app Android

Iniciar um PWA em um app Android

Apps Web Progressivos (PWA, na sigla em inglês) são aplicativos da Web que usam recursos semelhantes a apps para criar experiências de alta qualidade que são rápidas, confiáveis e envolventes.

A Web tem um alcance incrível e oferece maneiras eficientes de os usuários descobrirem novas experiências. No entanto, os usuários também estão acostumados a pesquisar aplicativos na loja do sistema operacional. Em muitos casos, esses usuários já conhecem a marca ou o serviço que estão procurando e têm um alto nível de intencionalidade, o que resulta em métricas de engajamento acima da média.

A Play Store é uma loja para apps Android, e os desenvolvedores geralmente querem abrir os apps da Web progressiva nos apps Android.

A atividade confiável na Web é um padrão aberto que permite que os navegadores forneçam um contêiner totalmente compatível com a plataforma da Web que renderiza PWAs em um app Android. O recurso está disponível no Chrome e em desenvolvimento no Firefox Nightly.

As soluções atuais eram limitadas

Sempre foi possível incluir experiências da Web em um app Android usando tecnologias como o Android WebView ou frameworks como o Cordova.

A limitação do Android WebView é que ele não é destinado a substituir o navegador. O Android WebView é uma ferramenta para desenvolvedores usar a interface da Web em um app Android e não oferece acesso completo aos recursos modernos da plataforma da Web, como o seletor de contatos ou o sistema de arquivos, entre outros.

O Cordova foi projetado para aumentar as deficiências da WebView, mas as APIs são limitadas ao ambiente do Cordova. Isso significa que você precisa manter uma base de código adicional para usar as APIs do Cordova no seu app Android, separada da PWA na Web aberta.

Além disso, a capacidade de descoberta de recursos nem sempre funciona como esperado, e problemas de compatibilidade entre versões do Android e OEMs também podem ser um problema. Ao usar uma dessas soluções, os desenvolvedores precisam de outros processos de garantia de qualidade e incorrem em um custo extra de desenvolvimento para detectar e criar soluções alternativas.

A Atividade Confiável na Web é um novo contêiner para apps da Web no Android

Agora, os desenvolvedores podem usar uma Atividade Confiável na Web como um contêiner para incluir um PWA como uma atividade de inicialização para um app Android. A tecnologia usa o navegador para renderizar o PWA em tela cheia, garantindo que a Atividade Confiável na Web tenha a mesma compatibilidade com os recursos e APIs da plataforma da Web que o navegador tem. Também há utilitários de código aberto para facilitar ainda mais a implementação de um app Android usando uma Atividade confiável na Web.

Outra vantagem que não está disponível em outras soluções é que o contêiner compartilha o armazenamento com o navegador. Os estados de login e as preferências dos usuários são compartilhados perfeitamente entre as experiências.

Compatibilidade de navegadores

O recurso está disponível no Chrome desde a versão 75, e o Firefox o implementou na versão nightly.

Critérios de qualidade

Os desenvolvedores da Web precisam usar uma Atividade Confiável na Web quando querem incluir conteúdo da Web em um app Android.

O conteúdo da Web em uma Atividade confiável da Web precisa atender aos critérios de instalabilidade de PWA.

Além disso, para corresponder ao comportamento esperado pelos usuários dos aplicativos Android, o Chrome 86 introduziu uma mudança em que a falha em processar os seguintes cenários é considerada uma falha.

  • Falha na verificação de links de recursos digitais no lançamento do aplicativo.
  • Falha ao retornar HTTP 200 para uma solicitação de recurso de rede off-line.
  • Uma solicitação de navegação que retorna um erro HTTP 404 ou 5xx.

Quando um desses cenários acontece na Atividade da Web confiável, ele causa uma falha visível no aplicativo Android. Confira as orientações sobre como lidar com esses cenários no service worker.

O aplicativo também precisa atender a outros critérios específicos do Android, como conformidade com a política.

Uma captura de tela mostrando a pontuação do Lighthouse para o AirHorn, com o selo de PWA e uma pontuação de desempenho de 100.
O selo do PWA no Lighthouse mostra se o PWA atende aos critérios de instalabilidade.

Ferramentas

Os desenvolvedores da Web que querem aproveitar a Atividade Confiável na Web não precisam aprender novas tecnologias ou APIs para transformar o PWA em um app Android. Juntos, o Bubblewrap e o PWABuilder fornecem ferramentas para desenvolvedores na forma de uma biblioteca, interface de linha de comando (CLI) e interface gráfica do usuário (GUI).

Plástico-bolha

O projeto Bubblewrap gera apps Android na forma de uma biblioteca NodeJS e uma interface de linha de comando (CLI).

Para inicializar um novo projeto, execute a ferramenta e transmita o URL do manifesto da Web:

npx @bubblewrap/cli init --manifest=https://pwa-directory.appspot.com/manifest.json

A ferramenta também pode criar o projeto, e a execução do comando abaixo vai gerar um aplicativo Android pronto para ser enviado à Play Store:

npx @bubblewrap/cli build

Depois de executar esse comando, um arquivo chamado app-release-signed.apk vai estar disponível no diretório raiz do projeto. Esse é o arquivo que será enviado para a Play Store.

PWABuilder

O PWABuilder ajuda os desenvolvedores a transformar sites em Progressive Web Apps. Ele também se integra ao Bubblewrap para fornecer uma interface gráfica que agrupa esses PWAs em um app Android. A equipe do PWABuilder criou uma ótima postagem no blog sobre como gerar um aplicativo Android usando a ferramenta.

Como verificar a propriedade da PWA no app Android

Um desenvolvedor que cria um Progressive Web App não quer que outro desenvolvedor crie um app Android com ele sem permissão. Para evitar isso, o aplicativo Android precisa ser pareado com o Progressive Web App usando uma ferramenta chamada Digital Asset Links.

O Bubblewrap e o PWABuilder cuidam da configuração necessária no aplicativo Android, mas ainda há uma última etapa, que é adicionar o arquivo assetlinks.json ao PWA.

Para gerar esse arquivo, os desenvolvedores precisam da assinatura SHA-256 da chave usada para assinar o APK que está sendo transferido para os usuários.

A chave pode ser gerada de várias maneiras, e a maneira mais fácil de encontrar a chave que assinou o APK que está sendo enviado aos usuários finais é fazer o download dela na Play Store.

Para evitar mostrar um aplicativo corrompido aos usuários, implante o aplicativo em um canal de teste fechado, instale-o em um dispositivo de teste e use a ferramenta de vinculação de recursos de Peter para gerar o arquivo assetlinks.json correto para o app. Disponibilize o arquivo assetlinks.json gerado em /.well-known/assetlinks.json, no domínio que está sendo validado.

A seguir

Um Progressive Web App é uma experiência da Web de alta qualidade. A atividade confiável da Web é uma nova maneira de abrir essas experiências de alta qualidade em um app Android quando elas atendem aos critérios mínimos de qualidade.

Se você está começando a usar os Progressive Web Apps, leia nossas orientações sobre como criar um ótimo PWA. Para desenvolvedores que já têm um PWA, use o Lighthouse para verificar se ele atende aos critérios de qualidade.

Em seguida, use o Bubblewrap ou o PWABuilder para gerar o aplicativo Android, faça upload do aplicativo para um canal de teste fechado na Play Store e emparelhe-o com o PWA usando a ferramenta de vinculação de recursos de Peter.

Por fim, mova o aplicativo do canal de teste fechado para a produção.