TWA

O que é

Criado pelos desenvolvedores do Google Chrome, o TWA tem como objetivo principal a reutilização do PWA para criação de uma aplicação que pode ser publicada na Play Store, sem escrever uma única linha de código nativo.

Como funciona

A TWA cria uma Custom Tabs no qual o PWA é hospedado, dessa forma o conteúdo é renderizado pelo browser do usuário ao invés da webview. Por conta disso, todo o estado do TWA (cookies, storage) é compartilhado com o navegador. O termo trusted em TWA, indica o relacionamento confiável entre o TWA e o website que esta "entregando" código fonte.

Requisitos

Para conseguirmos produzir um TWA é necessário, primeiro é preciso fazer o upload do Digital Asset Links (um arquivo chamado assetlinks.json) para a pasta .well-known da aplicação que desejamos colocar na Play Store(ex.: https://example.com/.well-known/assetlinks.json). Vale ressaltar que esta pasta (.well-known) terá que ficar na pasta pública do projeto (normalmente chamada de public).

Após realizar o upload assetlinks precisamos garantir que a aplicação passe no teste de PWA, teste esse que é executado pelo lighthouse. Outro teste que é realizado é o de performance, sendo fortemente recomendado mante-lá acima de 80.

Bubblewrap

Para facilitar a configuração e geração do TWA utilizamos um pacote chamado Bubblewrap.

Para isso é necessário instalar sua cli globalmente na máquina.

npm i -g @bubblewrap/cli

Com isso feito, agora podemos inicializar uma nova aplicação utilizando o caminho para o manifest.json da aplicação que queremos criar o APK.

bubblewrap init --manifest=https://example.com/manifest.json

Obs: é recomendado rodar este comando dentro de uma nova pasta dentro do projeto.

Com esse comando executado, irão aparecer diversar perguntas relacionadas a configuração de splash screen, ícones e etc. As próprias perguntas apresentam uma breve explicação do que são e para que servem.

O próximo passo é realizar o build da aplicação, rodando:

bubblewrap build

Nesse momento que será executado o teste do lighthouse que verificará a performance e se o PWA está configurado corretamente, e caso passe no teste o build irá ter como saída o arquivo assetlinks.json, que como dito, terá que ser colocado na pasta .well-known na pasta pública do projeto.

Com esses passos, já é possível instalar o aplicativo em um celular que estiver conectado ao computador pelo USB (e com modo USB debug ativado). Para isso, basta executar o seguinte comando:

bubblewrap install

e permitir, se necessário, a instalação do mesmo no celular.

Outra opção é utilizar o arquico .aab ou .apk também gerado no build para hospedar a aplicação na Play store.