Como adicionar seu Progressive Web App ao Google Play

1. Olá!

Neste laboratório, você usará um Progressive Web App implantado e o unirá 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 na Play Store do Google
  • O que é uma chave de assinatura e como usá-la
  • Como criar um novo app no Google Play Console e configurar uma versão de teste antes do lançamento
  • O que são os links de recursos digitais e como adicioná-los ao seu webapp

O que você precisa saber

Pré-requisitos

O que não será coberto

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

2. Encapsulando seu PWA

O Bubblewrap é uma ferramenta que permite unir seu Progressive Web App em um Android App Bundle com alguns comandos da CLI. Ele faz isso gerando um projeto Android que inicia o PWA como uma atividade confiável na Web.

Para começar, crie um diretório em que seu projeto esteja ativo e mova para ele:

$ 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 do Android App Bundle que você enviará ao Google Play:

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

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

Assistente da CLI de balão mostrando uma inicialização do Airhorner com o domínio substituído por example..com e os URLs de início substituídos.

Chave de assinatura

A Play Store do Google exige que os pacotes de aplicativos sejam assinados digitalmente com um certificado quando enviados, geralmente chamados de chaves de assinatura. Esse certificado é autoassinado e é diferente daquele usado para exibir o aplicativo por HTTPS.

O balãowrap solicitará o caminho para a chave ao criar o aplicativo. Caso você use uma página "Detalhes do app" existente na Play Store para seu app, será necessário adicionar o caminho à mesma chave usada por essa página.

Assistente da CLI de balão pedindo o local do nome e do local da chave de assinatura existente do usuário.

Se você não tiver uma chave de assinatura existente e estiver criando uma nova página "Detalhes do app" na Play Store, poderá usar o valor padrão fornecido pelo Bubblewrap para que ela crie uma nova chave:

Assistente da CLI do balão perguntando se o usuário quer criar uma nova chave de assinatura.

Saída de balão

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

  • twa-manifest.json: a configuração do projeto, que reflete os valores escolhidos no assistente do balão. Acompanhe esse arquivo com o sistema de controle de versões, já que ele pode ser usado para gerar de novo todo o projeto do balão.
  • Arquivos de 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 acompanhar esses arquivos com seu sistema de controle de versões.
  • (Opcional) Chave de assinatura: se você escolher que o balão crie a chave de assinatura, ela será enviada para o local descrito no assistente. A chave precisa ser mantida em um local seguro e limitar o número de pessoas que podem acessá-la. Ela é usada para provar que os apps da Play Store vêm de você.

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

Criar seu Android App Bundle

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

$ bubblewrap build

Saída da CLI Bubblewrap para criar um projeto, pedindo senhas para a chave de assinatura e mostrando a geração de diferentes versões do app Android.

O comando de compilação gerará dois arquivos importantes:

  • app-release-bundle.aab: é seu Android App Bundle do PWA. Você fará o upload desse arquivo na Google Play Store.
  • app-release-Signed.apk: um formato de empacotamento do Android que pode ser usado para instalar o aplicativo diretamente em um dispositivo de desenvolvimento usando o comando bubblewrap install.

3. Teste: balão

Agora é sua vez. Use o que você aprendeu na etapa anterior para tentar fazer o seguinte:

  1. Crie um diretório para armazenar o projeto do Android gerado.
  2. Inicialize esse diretório pelo Bubblewrap e pelo manifesto de app da Web do PWA.
  3. Gere uma nova chave de assinatura ou reutilize as existentes, se as tiver.
  4. Crie seu Android App Bundle a partir do projeto gerado.

4. Como adicionar seu app à Play Store do Google

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

Criar um app

Depois de fazer login, você verá uma tela com todos os seus apps. Próximo à parte superior, há um botão Create app que, quando clicado, mostra a seguinte tela com instruções para você criar uma nova página "Detalhes do app" para Android.

Tela mostrando o formulário de criação de app do Play Console.

Há uma série de campos a serem preenchidos, incluindo nome do app, idioma padrão, se é um app ou jogo, se é sem custo financeiro ou pago e diversas declarações. Não será possível criar um app sem concordar com as declarações. Por isso, é importante que você as leia e entenda antes de concordar com elas.

Depois de preencher todas as informações e clicar no botão Criar app na parte inferior do formulário, você acessará o painel do novo app. No painel, você verá listas de verificação de tarefas que precisam ser concluídas para configurar, iniciar testes e lançar seu app.

Configurar testes internos

Os testes internos são uma ótima maneira de lançar seu app rapidamente, sem revisão, para um grupo confiável de testadores selecionados. Veja as tarefas na lista de verificação Iniciar teste agora e escolha Selecionar testadores.

Começar a testar agora lista de verificação

Clique nessa tarefa para acessar a página Teste interno. Aqui você pode gerenciar a configuração de teste do seu app. Para acessá-lo novamente, abra a seção Teste no menu Versão na barra lateral. A primeira coisa a fazer aqui é criar uma lista de e-mails de testadores para testar seu app. Para isso, clique no link Criar lista de e-mails na seção Testadores da página. Um pop-up será aberto para criar sua lista de e-mails.

Pop-up exibindo o formulário de criação de lista de e-mails, que inclui nome da lista, endereços de e-mail, um link para fazer upload de um arquivo CSV com os endereços e uma área para mostrar quais foram enviados.

Nesse pop-up, você nomeará sua lista de e-mails e poderá inserir endereços de e-mail manualmente ou fazer upload de um CSV de endereços de e-mail a ser usado. Depois de concluído, pressione o botão Save changes. Você poderá acessar as listas de e-mail que já criou 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 superior da página.

Página de teste interno com uma seta apontando para o botão "Criar nova versão".

Criar uma versão de teste

Depois de clicar no botão Criar nova versão, você verá 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 é permitir que o Google gerencie sua chave de assinatura. Essa é a opção recomendada porque é segura e mantém o app recuperável no caso de perda da chave de upload.

Assinatura de apps do Google Play

Um fluxograma que mostra, da esquerda para a direita, um desenvolvedor e a chave de upload que assina o app e o envia ao Google. O Google terá uma chave de assinatura do app para assinar o app com essa chave e enviá-la ao usuário.

Finalização e upload de apps

Depois de escolher como gerenciar a chave de assinatura, será solicitado que você faça upload do pacote de apps para a versão. Para fazer isso, arraste e solte o arquivo app-release-bundle.aab que o Bubblewrap gerou no formulário. Para finalizar a versão, preencha os outros detalhes, clique em Salvar, Revisar versão e, por fim, nos botões Iniciar lançamento para teste interno. Isso fará com que o app fique disponível para os testadores internos. Na guia Testadores da página Teste interno, copie um link para compartilhar com seus testadores e permitir que eles tenham acesso ao app.

Página de teste interna, com uma seta apontando para o link de cópia do link para compartilhar um link de teste com os testadores.

5. Teste: crie um app

Agora é sua vez. Use o que você aprendeu na etapa anterior para tentar fazer o seguinte:

  1. Crie um novo app para o PWA no Play Console.
  2. Configure testes internos para o app e adicione-se como testador.
  3. Faça upload do pacote de apps e crie uma versão de teste para ele.
  4. Instale o app pela Play Store em um dispositivo Android ou Chrome OS usando o link de teste.

6. Digital Asset Links

Se você testou seu PWA no Google Play, perceberá que ele não é executado em tela cheia. Isso ocorre porque você ainda não verificou a propriedade do site por meio de um arquivo Digital Asset Links. Embora o Bubblewrap possa configurar e criar seu pacote de aplicativos para Android, você precisa concluir o link atualizando seu aplicativo da Web.

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

Para configurar os links de recursos digitais do PWA, você precisará da impressão digital SHA-256 do certificado usado para assinar o pacote recebido pelo usuário no smartphone.

Com a Assinatura de apps do Google Play

Se você configurar a Assinatura de apps do Google Play para seu app ao criar a versão (o que foi recomendado anteriormente), a impressão digital SHA-256 poderá ser encontrada no Play Console. Lembre-se de que esse certificado é diferente do usado para fazer upload do seu aplicativo. Para saber qual é a impressão digital, acesse o app no Play Console e acesse Versões->Configuração->Integridade do app. Você verá várias opções em Certificado de chave de assinatura do app. Copie o valor da impressão digital do certificado SHA-256.

Tela "Integridade do app" com a impressão digital do certificado SHA-256 destacada.

Sem a Assinatura de apps do Google Play

Se você tiver desativado a Assinatura de apps do Google Play, a chave usada para assinar o app final será a mesma que você usou para fazer upload dele no Play Console. É possível usar a 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 usá-lo, será preciso saber o caminho da chave de assinatura e as senhas relevantes. Copie os valores hexadecimais da chave SHA256.

O Wrapwrap pode gerenciar as impressões digitais da assinatura que você recuperou e gerar o arquivo Digital Asset Links correto. Para adicionar uma impressão digital ao Bubblewrap, execute o seguinte comando no mesmo diretório criado durante o Bubblewraping seu PWA, 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 app e gera um arquivo assetlinks.json. Faça upload desse arquivo para o diretório .well-known na mesma origem do PWA.

7. Teste - Links de recursos digitais

Agora é sua vez. Use o que você aprendeu na etapa anterior para tentar 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 o PWA.
  4. Verificar se o arquivo Digital Asset Links está configurado corretamente usando a API e o app de teste.

8. Teste seu conhecimento

Antes de terminar, responda às perguntas a seguir para testar seu conhecimento e ver o que você aprendeu. Não dê uma olhada nas respostas.

Depois de gerar o projeto Android com o balão, Sally confirma o arquivo ______ gerado no sistema de controle de versão para que ela possa recriá-lo sempre que precisar.

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

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

uploads builds e uploads lançamentos sinais e uploads

O app PWA do Oogie Boogie'não está em tela cheia. Para corrigir isso, eles recebem a impressão digital do certificado SHA-256 do ______ e fazem upload dele no arquivo do 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 seus conhecimentos – respostas

Respostas às perguntas "Teste seus conhecimentos"

  1. Depois de gerar o projeto Android com o balão, Sally confirma o arquivo ______ gerado no sistema de controle de versão para que ela possa recriá-lo sempre que precisar.
  2. João quer que a equipe de controle de qualidade teste o app Android PWA. Ele ______ o Android App Bundle em uma faixa de teste interno.
  3. O app PWA do Oogie Boogie'não está em tela cheia. Para corrigir isso, eles recebem a impressão digital do certificado SHA-256 do ______ e fazem upload dele no arquivo do Digital Asset Links localizado em ______ na mesma origem do PWA.

10. Parabéns!

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

Quando você achar que precisa, siga estas etapas por conta própria:

Boa codificação!