Atividades confiáveis na Web podem ser um pouco complicadas de configurar, especialmente se você só quer exibir seu site. Este guia guiará você pela criação de um projeto básico que usa atividades confiáveis na Web, abordando todos os problemas.
Ao final deste guia, você:
- Ter usado o Bubblewrap para criar um aplicativo que usa uma atividade confiável na Web e é aprovado na verificação.
- Entenda quando as chaves de assinatura são usadas.
- Ser capaz de determinar a assinatura com que seu aplicativo Android está sendo criado.
- saber como criar um arquivo básico de Digital Asset Links;
Para seguir este guia, você 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. É possível usar o Chrome 72 ou posterior. A compatibilidade com outros navegadores será lançada em breve.
- Um site que você quer ver na Atividade confiável na Web.
Uma atividade confiável na Web permite que seu app Android inicie uma guia do navegador em tela cheia sem nenhuma interface do navegador. Esse recurso é restrito a sites de sua propriedade, e você prova isso configurando Digital Asset Links. Falaremos mais sobre eles depois.
Quando você inicia uma atividade confiável na Web, o navegador confere se o Digital Asset Links está fazendo check-out. 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 Progressive Web Apps dentro de aplicativos Android usando a Atividade confiável 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 instalar automaticamente as dependências externas necessárias. Recomendamos que a ferramenta faça isso, porque garante que as dependências sejam configuradas corretamente. Consulte a documentação do Bubblewrap para usar um Kit de Desenvolvimento Java (JDK) existente ou a instalação de ferramentas de linha de comando do Android.
Inicializar e criar projeto
Para inicializar um projeto Android que une um PWA, execute o comando init:
bubblewrap init --manifest=https://my-twa.com/manifest.json
O Bubblewrap lerá o Manifesto da Web, pede aos desenvolvedores para confirmar os valores a serem usados no projeto Android e gera o projeto usando esses valores. Depois que o projeto for gerado, gere um APK executando o seguinte:
bubblewrap build
Execução
A etapa de build vai gerar um arquivo chamado app-release-signed.apk. Esse arquivo pode ser instalado em um
dispositivo de desenvolvimento para teste ou enviado à 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 deve estar disponível na tela de início do dispositivo. Ao abrir o aplicativo, você notará que seu site foi lançado como uma guia personalizada, não como uma atividade confiável na Web. Isso ocorre porque ainda não configuramos nossa validação do Digital Asset Links, mas antes...
Alternativas à interface gráfica do usuário (GUI) para o Bubblewrap
O PWA Builder fornece uma interface GUI que usa a biblioteca Bubblewrap para alimentar a geração de projetos de Atividades Confiáveis na Web. Encontre mais instruções sobre como usar o PWA Builder para criar um app Android que abra seu PWA nesta postagem do blog.
Observação sobre chaves de assinatura
O Digital Asset Links considera a chave com que um APK foi assinado, e uma causa comum para falhas na verificação é usar a assinatura errada. Lembre-se de que a falha na verificação significa que você iniciará seu site como uma Guia Personalizada com a interface do navegador na parte superior da página. Quando o Bubblewrap criar o aplicativo, um APK será 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, dependendo de como você optar por gerenciar 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 recursos
Os Digital Asset Links consistem essencialmente em um arquivo no site que aponta para o app e em alguns metadados que direcionam para ele.
Depois de criar o arquivo assetlinks.json, faça upload dele para seu 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 saber mais sobre como ele se relaciona à chave de assinatura.
Verificando seu navegador
Uma Atividade confiável na Web tentará aderir à opção padrão de 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 suportar atividades na Web confiáveis, ele será escolhido. Por fim, o comportamento padrão é retornar ao modo de guias personalizadas.
Isso significa que, se você estiver depurando algo relacionado a Atividades Confiáveis da Web, verifique se está usando o navegador que acredita estar. Use o seguinte comando 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, ele deve ter uma Atividade confiável na Web e conhecimento suficiente para depurar o que está acontecendo quando a verificação falha. Caso contrário, consulte mais conceitos do Android para desenvolvedores da Web ou informe um problema do GitHub nestes documentos.
Para as próximas etapas, recomendamos começar criando um ícone para seu app. Depois disso, considere implantar seu app na Play Store.