Como adicionar seu Progressive Web App ao Google Play

1. Olá!

Neste laboratório, você vai pegar um App Web Progressivo (PWA, na sigla em inglês) implantado e encapsulá-lo em um app para distribuição na Play Store do Google.

O que você vai aprender

• Como usar o Bubblewrap para empacotar seu Progressive Web App para a Google Play Store
• O que é uma chave de assinatura e como usá-la
• Como criar um novo app no Developer Console do Google Play e configurar uma versão de teste para testar o app antes da publicação
• O que são Digital Asset Links e como adicioná-los ao seu web app

O que você precisa saber

• O que são Progressive Web Apps
• Como usar ferramentas de linha de comando
• Comandos básicos do shell Bash ou como traduzi-los para o shell de sua preferência

O que é necessário

• Um Progressive Web App publicado na Internet e que pode ser alterado
• A interface de linha de comando do Bubblewrap instalada e pronta para uso
• Uma conta de desenvolvedor do Google Play
• Sua chave de assinatura atual, se você já tiver apps lançados no Google Play
• Um dispositivo Android ou ChromeOS para teste

O que não é coberto

• Restringir seu PWA apenas a dispositivos Android ou ChromeOS
• Implantar um PWA para ChromeOS e um app Android para dispositivos móveis no mesmo app.
• Como obedecer à política de pagamentos do Google Play no PWA.

2. Como encapsular seu PWA

O Bubblewrap é uma ferramenta que facilita o encapsulamento do seu Progressive Web App em um Android App Bundle, como executar alguns comandos da CLI. Para isso, ele gera um projeto Android que inicia o PWA como uma Atividade Confiável na Web.

Antes de começar: que tipo de informação o Bubblewrap pode precisar sobre seu PWA para gerar um projeto do Android?

Para começar, crie um diretório para o projeto e acesse-o:

$ mkdir my-pwa && cd my-pwa

Em seguida, execute a ferramenta de linha de comando Bubblewrap para gerar a configuração e o projeto Android para o Android App Bundle que você vai fazer upload no Google Play:

$ bubblewrap init --manifest=https://my-pwa.com/manifest.json

Importante: quando o Bubblewrap é executado pela primeira vez, ele pede o download de dependências extras. Essas dependências são o Java Development Kit e as ferramentas de linha de comando do Android. Para garantir que as versões corretas sejam baixadas para cada dependência, recomendamos permitir que o Bubblewrap faça o download das versões corretas em vez de usar uma já disponível no seu computador.

Aqui, o Bubblewrap é inicializado com o local do arquivo manifesto do app da Web de um PWA. Isso vai gerar uma configuração padrão do manifesto do app Web e iniciar um assistente no console que permite mudar a configuração padrão. Siga o assistente para mudar qualquer um dos valores gerados pela ferramenta.

Chave de assinatura

A Google Play Store exige que os pacotes de aplicativos sejam assinados digitalmente com um certificado ao serem enviados, geralmente chamado de chave de assinatura. Esse é um certificado autoassinado e é diferente daquele usado para veicular seu aplicativo por HTTPS.

O Bubblewrap vai pedir o caminho da chave ao criar o aplicativo. Se você estiver usando uma página "Detalhes do app" da Play Store para seu aplicativo, adicione o caminho para a mesma chave usada por essa página.

Se você não tiver uma chave de assinatura e estiver criando uma nova página Detalhes do app na Play Store, use o valor padrão fornecido pelo Bubblewrap para criar uma nova chave:

Importante: armazene a chave e as senhas em um local seguro. Você vai precisar deles para criar o aplicativo pela primeira vez e também para atualizar o app na Play Store regularmente.

Saída do Bubblewrap

Depois de inicializar o projeto do Bubblewrap e concluir o assistente, os seguintes itens serão criados:

• twa-manifest.json: a configuração do projeto, refletindo os valores escolhidos no assistente do Bubblewrap. É recomendável rastrear esse arquivo com seu sistema de controle de versão, já que ele pode ser usado para regenerar todo o projeto do Bubblewrap, se necessário.
• Arquivos do projeto Android: os arquivos restantes no diretório são o projeto Android gerado. Esse projeto é a origem usada para o comando de build do Bubblewrap. Você também pode rastrear esses arquivos com seu sistema de controle de versões.
• (Opcional) Chave de assinatura: se você escolher que o Bubblewrap crie a chave de assinatura, ela será gerada no local descrito no assistente. Mantenha a chave em um local seguro e limite o número de pessoas que têm acesso a ela. Ela é usada para provar que os apps na Play Store são seus.

Com esses arquivos, temos tudo o que precisamos para criar um Android App Bundle.

Criar o Android App Bundle

No mesmo diretório em que você executou o comando de inicialização do Bubblewrap, execute o seguinte (você vai precisar das senhas da sua chave de assinatura):

$ bubblewrap build

O comando de build vai gerar dois arquivos importantes:

• app-release-bundle.aab: o Android App Bundle da sua PWA. Esse é o arquivo que você vai enviar para a Google Play Store.
• app-release-signed.apk: um formato de pacote Android que pode ser usado para instalar o aplicativo diretamente em um dispositivo de desenvolvimento usando o comando bubblewrap install.

3. Testar agora: Bubblewrap

Agora é sua vez. Usando o que você aprendeu na etapa anterior, tente fazer o seguinte:

1. Crie um diretório para armazenar o projeto Android gerado.
2. Inicialize esse diretório com o Bubblewrap e o manifesto do app da Web do PWA.
3. Gere uma nova chave de assinatura ou reutilize as atuais, se você tiver.
4. Crie o Android App Bundle com base no projeto Android gerado.

4. Adicionar seu app à Google Play Store

Agora que você tem um Android App Bundle para seu PWA, é hora de fazer upload dele na Google Play Store. Depois de registrar sua conta de desenvolvedor, acesse o Play Console para fazer login e começar.

Antes de começar:quais são os diferentes tipos de chaves de assinatura necessárias para criar uma versão no Google Play?

Criar um app

Depois de fazer login, você vai ver uma tela com todos os seus apps. Na parte de cima, há um botão Criar app que, quando clicado, mostra a tela a seguir para orientar você na criação de uma nova página de detalhes do app Android.

Há vários campos para preencher, incluindo nome do app, idioma padrão, se é um app ou um jogo, se é sem custo financeiro ou pago e várias declarações. Não é possível criar um app sem concordar com as declarações. Por isso, leia e entenda tudo antes de aceitar.

Embora você tenha a opção de tornar seu app sem custo financeiro ou pago, o PWA agrupado para inclusão no Google Play precisa estar disponível para a Internet em geral para funcionar. Não há como detectar de forma confiável se um usuário está acessando o PWA pelo app em vez de pelo navegador ou outro método de instalação. Por isso, recomendamos que você gere receita com seu PWA por outros meios, e não cobrando para fazer o download na loja.

Depois de preencher todas as informações e clicar no botão Criar app na parte de baixo do formulário, você vai acessar o painel do novo app. Nele, você vai encontrar checklists de tarefas que precisam ser concluídas para configurar, começar a testar e lançar o app.

Configurar o teste interno

O teste interno é uma ótima maneira de lançar seu app rapidamente sem revisão para um grupo de trusted testers selecionados. Confira as tarefas na lista de verificação Começar a testar agora e selecione Selecionar testadores.

Ao clicar nessa tarefa, você acessa a página Teste interno. É aqui que você gerencia a configuração de teste do app. Para acessar novamente, abra a seção Teste no menu Versão da barra lateral. Primeiro, crie uma lista de e-mails dos testadores para testar seu app. Para isso, clique no link Criar lista de e-mails na seção Testadores da página. Isso vai abrir um pop-up para criar sua lista de e-mails.

Nesse pop-up, você vai nomear sua lista de e-mails e poderá inserir endereços de e-mail manualmente ou fazer upload de um CSV com eles. Quando terminar, clique no botão Salvar mudanças. Você poderá voltar às listas de e-mail já criadas para adicionar ou remover endereços de e-mail conforme necessário. Depois de adicionar os testadores, é hora de criar uma versão de teste. Clique no botão Criar nova versão na parte de cima da página.

Criar uma versão de teste

Depois de clicar no botão Criar nova versão, você vai passar por várias seções. A primeira, Integridade do app, é onde você escolhe como gerenciar a chave de assinatura do app. A opção padrão é deixar o Google gerenciar sua chave de assinatura, e é a opção recomendada porque é segura e mantém seu app recuperável caso você perca a chave de upload.

Assinatura de apps do Google Play

Importante:a partir de agosto de 2021, a Assinatura de apps do Google Play será obrigatória para que a Play Store gerencie e proteja a assinatura final do seu aplicativo. Com a Assinatura de apps do Google Play, o Google gerencia e protege a chave de assinatura do app e a usa para assinar seus apps Android para distribuição aos usuários. A chave gerada pelo Bubblewrap se torna sua chave de upload em vez da chave de assinatura. Enquanto o Google gerencia a chave de assinatura para você, você gerencia e mantém privada sua chave de upload, que é usada sempre que você assina o app para fazer upload no Play Console. Com esse sistema, é possível redefinir a chave de upload se ela for perdida ou comprometida. Para isso, entre em contato com a equipe de suporte do Google Play.

Upload e finalização do app

Depois de escolher como gerenciar sua chave de assinatura, você vai precisar fazer upload do pacote de apps para a versão. Para fazer isso, arraste e solte o arquivo app-release-bundle.aab gerado pelo Bubblewrap no formulário. Para finalizar o lançamento, preencha os detalhes restantes e clique nos botões Salvar, Revisar lançamento e Iniciar lançamento para testes internos. Isso vai disponibilizar o app para os testadores internos. Na guia Testadores da página Teste interno, copie um link para compartilhar com os testadores e dar acesso ao app.

Embora os apps de teste não passem pelo processo completo de revisão da Play Store, pode levar algum tempo até que eles estejam disponíveis para download e teste após a criação e o lançamento da versão.

5. Testar agora: criar um app

Agora é sua vez. Usando o que você aprendeu na etapa anterior, tente fazer o seguinte:

1. Crie um novo app para seu PWA no Play Console.
2. Configure o teste interno para o app e adicione você como testador.
3. Faça upload do pacote de app e crie uma versão de teste.
4. Instale o app na Play Store no dispositivo Android ou ChromeOS usando o link de teste.

6. Digital Asset Links

Se você já testou seu PWA no Google Play, talvez tenha notado que ele não é executado em tela cheia. Isso acontece porque você ainda não verificou a propriedade do site com um arquivo Digital Asset Links. Embora o Bubblewrap possa configurar e criar seu pacote de aplicativos Android, você precisa concluir a vinculação atualizando seu aplicativo da Web.

Antes de começar:como os Digital Asset Links podem provar que o app e o PWA são de sua propriedade?

Encontrar a impressão digital SHA-256 do seu app

Para configurar os Digital Asset Links do seu PWA, você vai precisar da impressão digital SHA-256 do certificado usado para assinar o pacote que o usuário recebe no smartphone.

Com a Assinatura de apps do Google Play

Se você configurou a Assinatura de apps do Google Play ao criar a versão (o que era recomendado antes), a impressão digital SHA-256 pode ser encontrada no Play Console. Lembre-se de que esse certificado é diferente daquele usado para fazer upload do aplicativo. Para conseguir a impressão digital, no aplicativo no Play Console, acesse Versões->Configuração->Integridade do app. Lá, você vai encontrar várias opções em Certificado da chave de assinatura de app. Copie o valor da impressão digital do certificado SHA-256.

Sem a Assinatura de apps do Google Play

Se você desativou a Assinatura de apps do Google Play, a chave usada para assinar o aplicativo final será a mesma que você usa para fazer upload dele no Play Console. Você pode usar o keytool do Java para extrair a impressão digital:

$ keytool -list -v \
    -keystore <keystore-file-path> \
    -alias <key-alias> \
    -keypass <key-password> \
    -storepass <store-password> | grep SHA256

$     SHA256: BD:92:64:B0:1A:B9:08:08:FC:FE:7F:94:B2...

Para usar, você precisa saber o caminho da sua chave de assinatura e as senhas relevantes. Copie os valores hexadecimais da chave SHA256.

Criar seu arquivo Digital Asset Links

O Bubblewrap pode gerenciar as impressões digitais de assinatura que você recuperou e gerar o arquivo Digital Asset Links correto para você. Para adicionar uma impressão digital com o Bubblewrap, execute o seguinte comando no mesmo diretório criado durante Bubblewrapping Your PWA (em inglês), substituindo <fingerprint> pela impressão digital copiada da etapa anterior.

$ bubblewrap fingerprint add <fingerprint>

Esse comando adiciona a impressão digital à lista de impressões digitais do aplicativo e gera um arquivo assetlinks.json. Faça upload desse arquivo para o diretório .well-known na mesma origem do seu PWA.

O arquivo assetlinks.jsonprecisa estar em .well-known, precisa ser chamado de assetlinks.json, precisa estar na mesma origem do seu PWA e, portanto, precisa estar acessível em my-pwa.origin/.well-known/assetlinks.json. Qualquer desvio disso impede que ele seja encontrado e vinculado corretamente ao seu app. Você pode verificar se o Digital Asset Link está configurado corretamente usando a API Digital Asset Links.

7. Testar agora: Digital Asset Links

Agora é sua vez. Usando o que você aprendeu na etapa anterior, tente fazer o seguinte:

1. Encontre a impressão digital SHA-256 do seu app.
2. Gere um arquivo Digital Asset Links para seu app.
3. Faça upload do arquivo Digital Asset Links para seu PWA.
4. Verifique se o arquivo Digital Asset Links está configurado corretamente usando a API e o app de teste.

8. Teste seu conhecimento

Antes de terminar, teste seus conhecimentos e veja o que você aprendeu respondendo às perguntas a seguir. Não olhe as respostas!

Depois de gerar o projeto Android com o Bubblewrap, Sally confirma o arquivo ______ gerado no sistema de controle de versões para poder recriá-lo sempre que precisar.

twa-manifest.json chave de assinatura app-release-bundle.aab build.gradle

Jack quer que a equipe de controle de qualidade teste o app Android PWA dele. Ele ______ o Android App Bundle em uma faixa de teste interno.

uploads builds e uploads lançamentos assinaturas e uploads

O app Android PWA do Oogie Boogie não está sendo executado em tela cheia. Para corrigir isso, eles precisam extrair a impressão digital do certificado SHA-256 do ______ e fazer upload dela no arquivo Digital Asset Links localizado em ______ na mesma origem do PWA.

chave de upload, /.well-known/assetlinks.json chave de upload, /assetlinks.json chave de assinatura, /.well-known/assetlinks.json chave de assinatura, /assetlinks.json

9. Teste seu conhecimento: respostas

Respostas para as perguntas do Teste seus conhecimentos!

1. Depois de gerar o projeto Android com o Bubblewrap, Sally confirma o arquivo ______ gerado no sistema de controle de versões para poder recriá-lo sempre que precisar.
   • Resposta: twa-manifest.json
   • Seção: Envolver seu PWA com Bubblewrap
2. Jack quer que a equipe de controle de qualidade teste o app Android PWA dele. Ele ______ o Android App Bundle em uma faixa de teste interno.
   • Resposta: sinais e uploads
   • Seção: Adicionar seu app à Google Play Store
3. O app Android PWA do Oogie Boogie não está sendo executado em tela cheia. Para corrigir isso, eles precisam extrair a impressão digital do certificado SHA-256 do ______ e fazer upload dela no arquivo Digital Asset Links localizado em ______ na mesma origem do PWA.
   • Resposta: chave de assinatura, /.well-known/assetlinks.json
   • Seção: Digital Asset Links

10. Parabéns!

Parabéns! Você aprendeu a adicionar seu PWA à Google Play Store.

Quando se sentir pronto, siga estas etapas por conta própria:

• Criar uma versão de produção do app
• Saiba mais sobre outras opções para lançar seu app, incluindo lançamentos somente para ChromeOS e lançamentos que incluem um app Android para dispositivos móveis e um PWA para ChromeOS.
• Saiba como configurar o Google Play Faturamento para seu app e implementá-lo no seu PWA e no back-end.

Divirta-se com os códigos!