Como usar um PWA no seu app Android

Iniciar um PWA em um app Android

Os Progressive Web Apps (PWA) são aplicativos da Web que usam recursos parecidos com os de 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 poderosas para os usuários descobrirem novas experiências. Mas os usuários também estão acostumados a pesquisar aplicativos no armazenamento do sistema operacional. Em muitos casos, esses usuários já estão familiarizados com a marca ou o serviço que procuram e têm um alto nível de intenção que resulta em métricas de engajamento acima da média.

A Play Store é uma loja de apps Android, e os desenvolvedores geralmente querem abrir Progressive Web Apps nos apps Android.

A Atividade na Web confiável é 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 dentro de 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 serve como substituto de navegador. O Android WebView é uma ferramenta para desenvolvedores que usa a interface da Web em um app Android e não oferece acesso completo a 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 limitações do WebView, mas as APIs são limitadas ao ambiente do Cordova. Isso significa que você precisa manter uma base de código extra para usar as APIs do Cordova no seu app Android, separada do PWA na Web aberta.

Além disso, a 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 controle 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

Os desenvolvedores agora podem usar uma Atividade confiável na Web como um contêiner para incluir um PWA como uma atividade de inicialização de um app Android. A tecnologia aproveita 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 as APIs da plataforma da Web que o navegador. Há também 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 armazenamento com o navegador. Os estados de login e as preferências dos usuários são compartilhados com facilidade 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 noturna.

Critérios de qualidade

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

O conteúdo da Web em uma Atividade confiável na Web precisa atender aos critérios de instalação do PWA.

Além disso, para acompanhar o comportamento que os usuários esperam dos aplicativos Android, o Chrome 86 introduziu uma mudança em que não processar os cenários a seguir é considerado uma falha:

  • Falha ao verificar o Digital Asset Links na inicialização do aplicativo.
  • Falha ao retornar HTTP 200 para uma solicitação de recurso de rede off-line.
  • Uma solicitação de navegação retornando um erro HTTP 404 ou 5xx".

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

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

Uma captura de tela mostrando a pontuação do AirHorn no Lighthouse, com o selo PWA e uma pontuação de desempenho de 100.
O selo de PWA no Lighthouse mostra se ele foi aprovado nos critérios de instalação.

Ferramentas

Os desenvolvedores da Web que querem aproveitar a Atividade na Web confiável não precisam aprender novas tecnologias ou APIs para transformar o PWA em um aplicativo Android. Juntos, o Bubblewrap e o PWABuilder oferecem ferramentas para desenvolvedores na forma de uma biblioteca, uma interface de linha de comando (CLI) e uma 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, na sigla em inglês).

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. A execução do comando abaixo gera 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 ficará disponível no diretório raiz do projeto. Esse é o arquivo que será enviado por upload para a Play Store.

PWABuilder

O PWABuilder ajuda os desenvolvedores a transformar sites já existentes em Progressive Web Apps. Ele também se integra ao Bubblewrap para fornecer uma interface GUI para unir esses PWAs em um app Android. A equipe do PWABuilder elaborou uma ótima postagem do blog (link em inglês) sobre como gerar um app Android usando a ferramenta.

Como verificar a propriedade do PWA no app Android

Um desenvolvedor que cria um ótimo Progressive Web App não quer que outro desenvolvedor crie um app Android com ele sem a permissão dele. Para garantir que isso não aconteça, o app 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 app Android, mas a última etapa permanece, 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 por download pelos usuários.

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

Para evitar a exibição de 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 link de recursos do Pedro 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 de alta qualidade na Web. A Atividade confiável na Web é uma nova maneira de oferecer essas experiências de alta qualidade em um app Android quando elas atendem aos critérios mínimos de qualidade.

Se você estiver 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 em um canal de teste fechado na Play Store e faça o pareamento com o PWA usando a Ferramenta de link de recursos do Pedro.

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