As Atividades confiáveis na Web podem ser um pouco complicadas de configurar, principalmente se você só quer exibir seu site. Este guia vai mostrar como criar um projeto básico que usa atividades confiáveis na Web, cobrindo todos os detalhes.
Ao final deste guia, você vai:
- Usaram o Bubblewrap para criar um aplicativo que usa uma Atividade confiável na Web e passa na verificação.
- Entenda quando suas chaves de assinatura são usadas.
- Determinar a assinatura usada para criar o aplicativo Android.
- Saiba como criar um arquivo básico de Digital Asset Links.
Para seguir este guia, você vai precisar de:
- Node.js 10 ou mais recente instalado no computador de desenvolvimento.
- Um smartphone ou emulador Android conectado e configurado para desenvolvimento (ative a depuração USB se você estiver usando um smartphone físico).
- Um navegador compatível com a Atividade Confiável na Web no seu smartphone de desenvolvimento. O Chrome 72 ou mais recente vai funcionar. O suporte em outros navegadores está a caminho.
- Um site que você quer acessar na Atividade Confiável na Web.
Uma atividade confiável na Web permite que seu app Android inicie uma guia de navegador em tela cheia sem qualquer interface do navegador. Esse recurso é restrito a sites de sua propriedade, e você prova isso configurando os Digital Asset Links. Vamos falar mais sobre elas mais tarde.
Quando você inicia uma atividade da Web confiável, o navegador verifica se os links de recursos digitais estão corretos. Isso é chamado de verificação. Se a verificação falhar, o navegador voltará a exibir 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) para Node.js que ajuda os desenvolvedores a gerar, criar e executar apps da Web progressiva em aplicativos Android usando atividades confiáveis na Web.
A CLI pode ser instalada com o seguinte comando:
npm i -g @bubblewrap/cli
Como configurar o ambiente
Ao executar o Bubblewrap pela primeira vez, ele oferece a opção de fazer o download e a instalação automática das dependências externas necessárias. Recomendamos permitir que a ferramenta faça isso, porque ela garante que as dependências sejam configuradas corretamente. Consulte a documentação do Bubblewrap para usar um kit de desenvolvimento Java (JDK, na sigla em inglês) existente ou uma instalação de ferramentas de linha de comando do Android.
Inicializar e criar o projeto
Para inicializar um projeto do Android que envolve um PWA, execute o comando "init":
bubblewrap init --manifest=https://my-twa.com/manifest.json
O Bubblewrap vai ler o manifesto da Web, pedir que os desenvolvedores confirmem os valores a serem usados no projeto Android e gerar o projeto usando esses valores. Depois que o projeto for gerado, gere um APK executando:
bubblewrap build
Executar
A etapa de build vai gerar um arquivo chamado app-release-signed.apk. Esse arquivo pode ser instalado em um
dispositivo de desenvolvimento para testes ou enviado por upload à Play Store para lançamento.
O Bubblewrap fornece 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 deve estar disponível no inicializador do dispositivo. Ao abrir o aplicativo, você vai notar que o site é aberto como uma guia personalizada, não como uma Atividade da Web confiável. Isso acontece porque ainda não configuramos a validação de links de recursos digitais. Mas primeiro...
Alternativas para a interface gráfica do usuário (GUI) no formato de balão
O PWA Builder fornece uma interface de GUI que usa a biblioteca Bubblewrap para potencializar a geração de projetos de Atividade na Web Confiável. Encontre mais instruções sobre como usar o PWA Builder para criar um app Android que abra seu PWA em esta postagem do blog.
Observação sobre chaves de assinatura
Os links de recursos digitais consideram 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 lançar 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 o app no Google Play, outra chave pode ser criada para você, dependendo de como você lida com as chaves de assinatura. Saiba mais sobre as chaves de assinatura e a relação delas com o Bubblewrap e o Google Play.
Como configurar o arquivo do link de recurso
Os Digital Asset Links consistem basicamente em um arquivo no site que aponta para o app e alguns metadados que direcionam para o site.
Depois de criar o arquivo assetlinks.json, faça o 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 dos Links de recursos digitais (link em inglês) para mais informações sobre como isso está relacionado à sua chave de assinatura.
Verificando o navegador
Uma atividade confiável na Web tenta aderir à escolha padrão de navegador do usuário. Se o navegador padrão do usuário for compatível com as 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 é retornar ao modo das guias personalizadas.
Isso significa que, se você estiver depurando algo relacionado a atividades confiáveis na Web, verifique se está usando o navegador que acredita usar. Use 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
Se tiver seguido este guia, você terá uma Atividade confiável na Web e conhecimento suficiente para depurar o que está acontecendo quando a verificação falha. Caso contrário, confira mais conceitos do Android para desenvolvedores da Web ou registre um problema do GitHub em relação a estes documentos.
Para as próximas etapas, recomendamos que você comece criando um ícone para o app. Depois de fazer isso, considere implantar o app na Play Store.