As Atividades confiáveis na Web podem ser um pouco complicadas de configurar, especialmente 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 que você possui, e você prova isso configurando os links de recursos digitais. 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 vai voltar a 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) 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 uma instalação de ferramentas de linha de comando do Java Development Kit (JDK) ou 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 do 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 à 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 agora está disponível no iniciador 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 de interface gráfica do usuário (GUI) para o Bubblewrap
O PWA Builder fornece uma interface gráfica que usa a biblioteca Bubblewrap para gerar projetos de atividades confiáveis na Web. Confira 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, quando você publica seu app no Google Play, outra chave pode ser criada para você, dependendo de como você lida com as chaves de assinatura. Saiba mais sobre chaves de assinatura e como elas se relacionam ao Bubblewrap e ao Google Play.
Configurar o arquivo de link de recurso
Os links de recursos digitais consistem basicamente em um arquivo no 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 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 um estudo detalhado sobre os links de recursos digitais para mais informações sobre como eles se relacionam à sua chave de assinatura.
Como verificar o navegador
Uma atividade confiável na Web vai tentar 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 às Atividades Confiáveis na Web, verifique se está usando o navegador que pensa que está usando. 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 você seguiu este guia, a Atividade da Web confiável vai funcionar e você terá conhecimento suficiente para depurar o que está acontecendo quando a verificação falhar. 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 disso, você pode implantar o app na Play Store.