Apesar de um título interessante não é algo tão novo. Já temos a possibilidade de publicar PWAs na Google Play desde a versão 72 do chrome para android. Este recurso é conhecido como Trusted Web Activity(TWA) que nada mais é que uma maneira de abrir o Chrome no modo autônomo (sem barra de ferramentas ou Chrome UI) no escopo do nosso próprio APK.
Você pode ter mais detalhes sobre o TWA na playlist que criei no youtube:
Para criar o PWA base você pode consultar o segundo vídeo da playlist acima, ou o meu artigo Criando um PWA com Vue.js e Quasar onde demonstro passo a passo.
Construindo nosso TWA
Com seu PWA já desenvolvido e online, no nosso caso podemos utilizar como exemplo o Quasar Notes que está acessível através do link: https://quasar-notes.netlify.app/
O Quasar Notes foi desenvolvido utilizando o Quasar Framework e IndexDB.
Nosso próximo passo é verificar se nosso PWA está pronto para ir para loja através do PWABuilder. Neste site é possível verificar várias informações sobre o PWA e empacota-lo para a publicação na loja.
Basta inserir a url onde nosso PWA está publicado e a análise será feita exibindo uma nota para as configurações:
Além disso, você pode analisar os detalhes para melhorar ainda mais a nota do seu PWA e deixa-lo com nota máxima no score. No caso do Quasar Notes ele está por exemplo sem a lista de screenshots da aplicação e o maskable PNG icon.
Então podemos realizar as melhorias e testar novamente o nosso PWA no PWABuilder para vermos a mudança no score:
Após a implementação o PWA foi de 150 para 170 no score! 🎉
Gerando o pacote
Agora vamos até o final da página do PWABuilder e clicamos em next para empacotar a nossa aplicação PWA para publicar nas lojas. Iremos escolher a opção Android para poder publicar na Google Play Store:
É exibido um modal para você modificar algumas das configurações como: nome do pacote, nome do app, nome de inicialização, versão do app, c’dogo da versão, url inicial, cores, etc.
Irei gerar com as configurações padrões, mas caso necessário você pode editar conforme suas necessidades.
Após clicar em gerar é realizado o download de uma pasta compactada com seus arquivos APK, aab, keystore, etc.
Um ponto importante é que para o PWA não exiba a URL dentro do APK publicado na google play é necessário configurar na raiz do seu PWA uma pasta chamada .well-known e dentro dela colocar o arquivo assetlinks.json que contém o sha256_cert_fingerprints para identificar seu app como um app válido.
Porém, ao publicar o nosso app na Google Play Store iremos utilizar a chave que ele gerencia. Para encontrar essa chave basta você acessar o menu integridade do app e copiar a última chave disponível e colocar no arquivo assetlinks no parametro sha256_cert_fingerprints:
Depois da aprovação do aplicativo na google play, será possível baixa-lo através do link: https://play.google.com/store/apps/details?id=app.netlify.quasar_notes_app.twa
E após instalado ficará identico a um aplicativo nativo:
Finalizando
Como vimos no artigo e vídeos acima o processo de publicação é bastante tranquilo e simples! Há poucas configurações necessárias para realizar a publicação na Play Store.
Espero que este artigo ajude você em projetos futuros e que possa reutilizar suas aplicações web para publica-las também como um app =)
Referências
- A Google Play Store agora está aberta para PWA`s
- https://developer.chrome.com/docs/android/trusted-web-activity/overview/
- https://developer.chrome.com/docs/android/trusted-web-activity/quick-start/
