Início rápido das atividades confiáveis na Web

Peter Conn
Peter Conn

As Atividades Confiáveis na Web podem ser difíceis de configurar, principalmente se você só quiser mostrar seu site. Este guia ensina como criar um pequeno projeto que usa Atividades Confiáveis na Web.

Ao final deste guia, você:

  • Usou Bubblewrap para criar um aplicativo que usa uma Atividade Confiável na Web e passa na verificação.
  • Entendeu quando as chaves de assinatura são usadas.
  • Conseguiu determinar a assinatura com que o aplicativo Android está sendo criado.
  • Sabe como criar um arquivo Digital Asset Links básico.

Para seguir este guia, você precisa de:

  • Node.js 10 ou mais recente.
  • Um smartphone ou emulador Android conectado e configurado para desenvolvimento. Ative a depuração USB se estiver usando um smartphone físico.
  • Um navegador para dispositivos móveis que ofereça suporte a Atividades Confiáveis na Web.
  • Um site que você gostaria de visualizar na Atividade Confiável na Web.

Você pode usar uma Atividade Confiável na Web para que seu app Android abra uma guia do navegador em tela cheia, sem nenhuma interface do navegador. Essa capacidade é restrita a sites que você possui. Para comprovar a propriedade, configure o Digital Asset Links.

Ao iniciar uma Atividade Confiável na Web, o navegador verifica o Digital Asset Links. Se a verificação falhar, o navegador vai mostrar seu site como uma guia personalizada.

Instalar e configurar o Bubblewrap

O Bubblewrap é um conjunto de bibliotecas e uma ferramenta de linha de comando (CLI, na sigla em inglês) para Node.js que ajuda os desenvolvedores a gerar, criar e executar apps da Web progressivos em aplicativos Android, usando Atividades Confiáveis na Web.

Instale a CLI executando este comando:

npm i -g @bubblewrap/cli

como configurar o ambiente

Ao executar o Bubblewrap pela primeira vez, ele oferece o download e a instalação automáticos das dependências externas necessárias. Recomendamos permitir downloads automáticos, porque isso ajuda a garantir que as dependências sejam configuradas corretamente. Consulte a documentação do Bubblewrap para usar um Java Development Kit (JDK) ou uma instalação de ferramentas de linha de comando do Android.

Inicializar e criar o projeto

Inicialize um Projeto do Android que envolve um PWA:

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

O Bubblewrap lê o manifesto da Web, pede aos desenvolvedores que confirmem os valores a serem usados no Projeto do Android e gera o projeto usando esses valores.

Depois que o projeto for gerado, gere um APK executando:

bubblewrap build

Executar

A etapa de build gera um arquivo chamado app-release-signed.apk. Esse arquivo pode ser instalado em um dispositivo de desenvolvimento para testes ou enviado ao Google Play Store para lançamento.

O Bubblewrap oferece um comando para instalar e testar o aplicativo em um dispositivo local. Com o dispositivo de desenvolvimento conectado ao computador, execute:

bubblewrap install

Como alternativa, a ferramenta adb pode ser usada.

adb install app-release-signed.apk

O aplicativo agora estará disponível no iniciador de aplicativos do dispositivo.

Ao abrir o aplicativo, você vai notar que seu site é iniciado como uma guia personalizada, não como uma Atividade Confiável na Web. Isso ocorre porque ainda não configuramos a validação do Digital Asset Links.

Alternativas de interface gráfica do usuário (GUI) para o Bubblewrap

O PWA Builder oferece uma interface GUI que usa a biblioteca Bubblewrap para gerar projetos de Atividades Confiáveis na Web. Encontre instruções sobre como usar o PWA Builder para criar um app Android que abra seu PWA.

Chaves de assinatura

O Digital Asset Links considera a chave com que um APK foi assinado, e uma causa comum de falha na verificação é o uso da assinatura errada. Lembre-se de que a falha na verificação significa que você vai iniciar seu site como uma guia personalizada com a interface do navegador na parte de cima da página. Quando o Bubblewrap cria o aplicativo, um APK é criado com uma configuração de chave durante a etapa init. No entanto, ao publicar seu app no Google Play, outra chave poderá ser criada para você, dependendo de como você escolher lidar com as chaves de assinatura. Saiba mais sobre as chaves de assinatura e como elas se relacionam com o Bubblewrap e o Google Play.

O Digital Asset Links consiste essencialmente em um arquivo no seu site que aponta para o app e alguns metadados no app que apontam para o site.

Depois de criar o arquivo assetlinks.json, faça upload dele para o site em .well-known/assetlinks.json em relação à raiz para que o app possa ser verificado corretamente pelo navegador. Confira uma análise detalhada do Digital Asset Links para mais informações sobre como ele se relaciona com a chave de assinatura.

Como verificar seu navegador

Uma Atividade Confiável na Web tenta seguir a escolha padrão do navegador do usuário. Se o navegador padrão do usuário oferecer suporte a Atividades Confiáveis na Web, ele será iniciado. Caso contrário, se algum navegador instalado oferecer suporte a Atividades Confiáveis na Web, ele será escolhido. Por fim, o comportamento padrão é voltar para um modo de guias personalizadas.

Isso significa que, se você estiver depurando algo relacionado a Atividades Confiáveis na Web, verifique se está usando o navegador correto. Você pode usar o comando a seguir para verificar qual navegador está sendo usado:

> adb logcat -v brief | grep -e TWAProviderPicker
D/TWAProviderPicker(17168): Found TWA provider, finishing search: com.google.android.apps.chrome

Próximas etapas

Esperamos que, se você seguiu este guia, tenha uma Atividade Confiável na Web funcionando e conhecimento suficiente para depurar se a verificação falhar. Caso contrário, confira mais conceitos do Android para desenvolvedores da Web.

Para as próximas etapas, crie um ícone para seu app. Depois disso, você pode considerar a implantação do app no Google Play Store.