Como Publicar Seu PWA na Play Store

A utilização de Progressive Web App já está aí há alguns anos, com destaque para sites de e-commerce. No entanto, por mais que o PWA ofereça a opção de “instalar” (adicionar à tela inicial) sua aplicação no seu Android, a realidade é que muitas pessoas ainda buscam por aplicativos direto na Play Store, então publicar o PWA na loja é mais uma questão de disponibilidade, e de ampliar canais de distribuição do seu aplicativo, do que qualquer outra coisa. Outro ponto, é que para algumas pessoas um aplicativo na Play Store passa mais credibilidade do que uma página web. Independente das justificativas do porque publicar um PWA na loja de aplicativos, vamos ver como fazer isso usando Trusted Web App.

Antes de mais nada, vamos falar um pouco sobre PWA, se você trabalha com desenvolvimento web já deve ter ouvido o termo. A ideia de Progressive Web Apps é combinar o melhor de dois mundos, fornecer uma experiência nativa (ou quase) em um aplicativo web e por exemplo, funcionar mesmo que o usuário esteja offline, além de push notifications, cache, conexão segura via HTTPS, etc. Tudo isso acompanhado do fato de sua portabilidade, que devido a ser tratar de um aplicativo web pode ser distribuído para vários dispositivos, não exigindo do usuário o aborrecimento de ter que instalar um app para utilizá-lo. Em contraponto, venho relatar que algumas features podem ter problemas de compatibilidade em alguns navegadores, como a geolocalização, por exemplo.

Em síntese, um TWA é um aplicativo Android conectado a um PWA, que abre o Chrome no modo autônomo, rodando fullscreen, sem a barra de ferramentas do navegador. Esse recurso está disponível desde a versão 72 do Chrome. Como o Trusted Web App faz isso? A tecnologia do TWA é baseada no protocolo Custom Tabs, o mesmo que anexa conteúdos web em aplicações nativas como você já deve ter visto acessando um link no Twitter, sem sair do aplicativo. O termo Trusted (confiável) advém do fato de que o site e o app pertencem a mesma desenvolvedora, nesse sentido o TWA traz um mecanismo embutido para essa verificação, usando o protocolo Digital Asset Links.

Mais sobre — Trusted Web Activity | Web On Android

Há anos é possível encapsular uma página web como um aplicativo usando webview. Qual a diferença para um framework híbrido? Bem, no Cordova, por exemplo, você precisa dos recursos da sua página web (HTML, JS, CSS etc.) no pacote APK. Com TWA isso não é necessário, todos os recursos são baixados e atualizados de acordo com o Service Worker do PWA. Desse modo o APK só precisa ser atualizado em caso de alterações de metadados, ícones do aplicativo ou em views nativas, caso você opte por uma abordagem mesclada de PWA e features nativas. Outro benefício é o compartilhamento de armazenamento, cache e sessões, assim se o usuário já tiver usado o PWA no Chrome as informações serão mantidas no aplicativo.

Criando nosso Trusted Web App

Alguns pré-requisitos, o TWA é uma aplicação nativa, então vamos precisar do Android Studio, mas não se preocupe, não é necessário escrever código em Java, vamos apenas fazer algumas configurações. No mais, é preciso que sua página tenha os aspectos de PWA verificados, sendo relevante ter uma pontuação de 80+ na categoria de performance no Google Lighthouse.

A aplicação web deve estar de acordo com os guidelines de um PWA;

• Ter um manifest.json;
• Ter um Service Worker funcionando;
• Manter todo o tráfego da aplicação em HTTPS;
• Funcionar offline, seja com uma página funcionando como placeholder ou com cache.

Passo 1: Configurar a aplicação nativa

É preciso fazer algumas configurações para que um aplicativo Android tenha suporte ao TWA, como pode ser visto em sua documentação. Entretanto, podemos apenas clonar um boilerplate que já possui essas configurações e tudo o que temos que fazer é mudar algumas strings. Podemos obter o TWA Starter Android App, clonando o repositório svgomg-twa.

git clone https://github.com/GoogleChromeLabs/svgomg-twa.git

Em seguida abrimos o projeto com o Android Studio. Em /app/build.gradle modifique a variável twaManifest de acordo com as configurações do PWA.

Nota: O applicationIddeve seguir o formato <com>.<your-brand>.<your-app>

Nota: Você pode alterar os ícones da tela inicial e da splash screen alterando as imagens das pastas em app/src/main/res, você pode utilizar para isso as ferramentas Android Asset Studio e NativeScript Image Builder para gerar as pastas e substituí-las no projeto, ou fazer esse processo utilizando as ferramentas do próprio Android Studio.

Passo 2: Criar keystore e gerar APK assinado

Na primeira vez que for gerar o APK será necessário criar uma keystore. Ela será necessária para que possamos criar nosso app assinado e associá-la na configuração do Digital Link.

Com o projeto aberto no Android Studio, acesse Build → Generate Signed Bundle/APK, em ‘Key store path’ clique em “Create new…” e preencha os campos.

Passo 3: Configurar o Digital Asset Link

Ainda no Android Studio, no menu superior selecione Tools → App Links Assistant.

Na aba de Associate Website você deve preencher os campos necessários, como o Site Domain, Application ID e linkar sua chave assinada (keystore). Feito isso, basta clicar em “Generate Digital Asset Links file”. Isso vai gerar um arquivo de configuração chamado assetlinks.json, esse é o arquivo que você deve subir dentro do seu site, para que esse certificado entre seu aplicativo e seu website sejam válidos.

Para isto, em seu projeto PWA, crie uma pasta chamada .well-known, e salve o arquivo assetlinks.json. O local correto onde essa página deve ser salva depende do processo de build da sua aplicação web, o que importante é que esteja disponível após o deploy, geralmente na pasta public ou dist.

Nota: Após fazer deploy da sua aplicação web, já com seu arquivo assetlinks.json no PWA, seguindo o mesmo fluxo de gerar o Digital Asset Link, na parte inferior, tem um botão Link and Verify. Após clicar, será feita uma verificação do handshake entre seu site e seu app, e se tudo estiver certo seu APK está pronto para ser gerado e publicado na Play Store.

Passo 4: Gerar APK assinado

No Android Studio, novamente acesse Build → Generate Signed Bundle/APK e use a keystore criada anteriormente. Selecione a opção de release e se assegure de que as duas checkbox de assinatura estejam selecionadas. Para acessar o APK gerado vá até a pasta app/release.

Se o Digital Link estiver verificado seu app estará conectado ao APK e pronto para ser publicado na Play Store, e para fazer isso basta você seguir o fluxo padrão de publicação de qualquer APK na loja.

Considerações Finais

Espero que com esse passo à passo você esteja apto a transformar seu PWA em um TWA para ser publicado na Play Store. Desse modo você pode até pensar em construir um PWA e transformá-lo em TWA, como alternativa a construir um aplicativo híbrido (Cordova). O TWA devido a ser baseado em um aplicação web tem um desenvolvimento mais rápido do que aplicações nativas, e também um tamanho de APK reduzido em relação aos demais aplicativos.

Existem opções para fazer esse processo automaticamente como o PWA2APK ou o PWABuilder. Esse último apresentou problemas para gerar um app que tinha um nome com caracteres especiais, já o primeiro funcionou normalmente e ainda disponibiliza o código fonte do APK, no qual deu para perceber que usa um applicationId não semântico. De toda forma é bom está ciente do processo de configuração para ter mais controle sobre customizações e metadados do aplicativo.