Guia de integração

André Cipriani Bandarra

Observação: uma forma mais simples guia de início rápido para atividades confiáveis na Web já está disponível.

A configuração de uma Atividade na Web confiável não exige que os desenvolvedores criem Java código, mas o Android Studio obrigatórios. Este guia foi criado usando o Android Studio 3.3. Consulte os documentos sobre como instalar.

Criar um projeto de Atividade na Web confiável

Ao usar atividades confiáveis da Web, o projeto precisa ter o nível desejado da API 16 ou mais recente.

Observação: nesta seção, vamos mostrar como configurar um novo projeto no Android. Estúdio. Se você já conhece a ferramenta, pule para a seção Seção Como abrir a biblioteca de atividades confiáveis na Web.

Abra o Android Studio e clique em Start a new Android Studio project.

O Android Studio vai solicitar a escolha de um tipo de atividade. Como as Atividades Confiáveis na Web usam uma Atividade fornecida pela biblioteca de suporte, escolha Adicionar nenhuma atividade e clique em Próxima.

Na etapa seguinte, o assistente solicitará as configurações do projeto. Confira breve descrição de cada campo:

• Nome:o nome que será usado para seu aplicativo no Acesso rápido do Android
• Nome do pacote:um identificador exclusivo para aplicativos Android no na Play Store e em dispositivos Android. Consulte o documentação para mais informações sobre requisitos e práticas recomendadas para a criação de pacotes para apps Android.
• Save location:onde o Android Studio criará o projeto no arquivo. sistema.
• Linguagem:o projeto não exige a criação de códigos Java ou Kotlin. Selecione Java, como padrão.
• Nível mínimo da API:a Biblioteca de Suporte requer pelo menos o nível 16 da API. Selecione a API 16 de qualquer versão acima.

Deixe as outras caixas de seleção desmarcadas. Não usaremos Apps instantâneos. ou dos artefatos do AndroidX e clique em Finish.

Obtenha a Biblioteca de Suporte de Atividades Confiáveis na Web

Para configurar a biblioteca Atividade na Web Confiável no projeto, você precisará editar o aplicativo arquivo de build. Procure a seção Gradle Scripts no Project Navigator. Há dois arquivos chamados build.gradle, que podem ser um pouco confusos, e o descrições entre parênteses ajudam a identificar o correto.

O arquivo que estamos procurando é aquele com o módulo Module ao lado nome.

A biblioteca Atividades Confiáveis na Web usa Recursos do Java 8 e a primeira mudança ativa o Java 8. Adicione uma seção compileOptions ao parte inferior da seção android, conforme abaixo:

android {
        ...
    compileOptions {
       sourceCompatibility JavaVersion.VERSION_1_8
       targetCompatibility JavaVersion.VERSION_1_8
    }
}

A próxima etapa adicionará a Biblioteca de Suporte de Atividades Confiáveis na Web ao projeto. Adicionar um novo dependência da seção dependencies:

dependencies {
    implementation 'com.google.androidbrowserhelper:androidbrowserhelper:2.2.0'
}

O Android Studio vai mostrar uma solicitação para sincronizar o projeto mais uma vez. Clique no link Sync Now e sincronize-o.

Iniciar a Atividade Confiável na Web

A configuração da Atividade na Web Confiável é feita editando o Manifesto do app Android.

No Navegador do projeto, expanda a seção app e depois manifests e clique duas vezes em AndroidManifest.xml para abrir o arquivo.

Como pedimos ao Android Studio para não adicionar nenhuma atividade ao projeto ao ao criá-lo, o manifesto estará vazio e conterá somente a tag do aplicativo.

Adicione a Atividade na Web confiável inserindo uma tag activity na tag application:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.twa.myapplication">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        tools:ignore="GoogleAppIndexingWarning">
        <activity
            android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">

           <!-- Edit android:value to change the url opened by the Trusted Web Activity -->
           <meta-data
               android:name="android.support.customtabs.trusted.DEFAULT_URL"
               android:value="https://airhorner.com" />

           <!-- This intent-filter adds the Trusted Web Activity to the Android Launcher -->
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />
               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>

           <!--
             This intent-filter allows the Trusted Web Activity to handle Intents to open
             airhorner.com.
           -->
           <intent-filter>
               <action android:name="android.intent.action.VIEW"/>
               <category android:name="android.intent.category.DEFAULT" />
               <category android:name="android.intent.category.BROWSABLE"/>

               <!-- Edit android:host to handle links to the target URL-->
               <data
                 android:scheme="https"
                 android:host="airhorner.com"/>
           </intent-filter>
        </activity>
    </application>
</manifest>

As tags adicionadas ao XML são padrão Manifesto do app Android. Há duas informações relevantes para o contexto do programa Trusted Web Atividades:

1. A tag meta-data informa à Atividade confiável na Web qual URL ela deve abrir. Alterar o atributo android:value com o URL do PWA que você quer abrir. Em neste exemplo, é https://airhorner.com.
2. A segunda tag intent-filter permite que a Atividade Confiável na Web intercepte o Android Intents que abrem https://airhorner.com. O atributo android:host na tag data precisam apontar para o domínio que está sendo aberto pela Atividade confiável na Web.

.

Observação: ao executar o projeto nesta fase, a barra de URL das guias personalizadas ainda aparecem na parte superior da tela. Isso não é um bug.

A próxima seção mostra como configurar Digital AssetLinks (link em inglês) para verificar a relação entre o site e o app e remover a barra de URL.

Remova a barra de URL

Atividades confiáveis na Web exigem uma associação entre o aplicativo Android e o site a ser estabelecido para remover a barra de URL.

Essa associação é criada via Digital Asset Links e a associação deve ser estabelecida de ambas as maneiras, vinculando do app para o site e do site para o app.

É possível configurar o app para a validação de sites e configurar o Chrome para pular do site para a validação do app, para fins de depuração.

Estabelecer uma associação entre o app e o site

Abra o arquivo de recursos de string app > res > values > strings.xml e adicione o declaração Digital AssetLinks abaixo:

<resources>
    <string name="app_name">AirHorner Trusted Web Activity</string>
    <string name="asset_statements">
        [{
            \"relation\": [\"delegate_permission/common.handle_all_urls\"],
            \"target\": {
                \"namespace\": \"web\",
                \"site\": \"https://airhorner.com\"}
        }]
    </string>
</resources>

Mude o conteúdo do atributo site para corresponder ao esquema e ao domínio aberto pela Atividade na Web Confiável.

De volta ao arquivo AndroidManifest.xml do manifesto do app Android, um link para o ao adicionar uma nova tag meta-data, mas agora como filha da Tag application:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.twa.myapplication">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <meta-data
            android:name="asset_statements"
            android:resource="@string/asset_statements" />

        <activity>
            ...
        </activity>

    </application>
</manifest>

Nós já estabelecemos uma relação entre o aplicativo Android e o site. É útil depurar essa parte do relacionamento sem criar do site para a validação do aplicativo.

Confira como testar isso em um dispositivo de desenvolvimento:

Ativar o modo de depuração

1. Abra o Chrome no dispositivo de desenvolvimento, navegue até chrome://flags, pesquise em um item chamado Ativar linha de comando em dispositivos sem acesso root e mudar como ATIVADO e reinicie o navegador.
2. Em seguida, no aplicativo Terminal do seu sistema operacional, use o Android Debug Bridge (instalado com o Android Studio) e execute o seguinte comando:

adb shell "echo '_ --disable-digital-asset-link-verification-for-url=\"https://airhorner.com\"' > /data/local/tmp/chrome-command-line"

Feche o Chrome e reinicie o app no Android Studio. A o aplicativo será mostrado em tela cheia.

Observação: pode ser necessário forçar o fechamento do Chrome para que ele seja reiniciado com a configuração linha de comando. Acesse Configurações do Android > Aplicativos e notificações > Chrome, e clique em Forçar fechamento.

Estabelecer uma associação entre o site e o app

Há duas informações que o desenvolvedor precisa coletar da aplicativo para criar a associação:

• Nome do pacote:a primeira informação é o nome do pacote do app. Isso é o mesmo nome de pacote gerado ao criar o app. Ele também pode ser encontrado no Module build.gradle, em Scripts do Gradle > build.gradle (módulo: app) e é o valor do applicationId.
• Impressão digital SHA-256:os aplicativos Android precisam estar assinados para serem enviados para a Play Store. A mesma assinatura é usada para estabelecer conexão entre o site e o aplicativo pela impressão digital SHA-256 do a chave de upload.

A documentação do Android explica em detalhes como gerar uma chave usando o Android Studio. Anote o caminho, o alias e as senhas do repositório de chaves. você vai precisar dela na próxima etapa.

Extraia a impressão digital SHA-256 usando a keytool; pelo seguinte comando:

keytool -list -v -keystore [path] -alias [alias] -storepass [password] -keypass [password]

O valor da impressão digital SHA-256 aparece na seção Certificate de impressões digitais. Confira um exemplo de saída:

keytool -list -v -keystore ./mykeystore.ks -alias test -storepass password -keypass password

Alias name: key0
Creation date: 28 Jan 2019
Entry type: PrivateKeyEntry
Certificate chain length: 1
Certificate[1]:
Owner: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Issuer: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Serial number: ea67d3d
Valid from: Mon Jan 28 14:58:00 GMT 2019 until: Fri Jan 22 14:58:00 GMT 2044
Certificate fingerprints:
   SHA1: 38:03:D6:95:91:7C:9C:EE:4A:A0:58:43:A7:43:A5:D2:76:52:EF:9B
   SHA256: F5:08:9F:8A:D4:C8:4A:15:6D:0A:B1:3F:61:96:BE:C7:87:8C:DE:05:59:92:B2:A3:2D:05:05:A5:62:A5:2F:34
Signature algorithm name: SHA256withRSA
Subject Public Key Algorithm: 2048-bit RSA key
Version: 3

Com as duas informações à mão, acesse o gerador de assetlinks. preencha os campos e clique em Gerar declaração. Copie a instrução gerada e veicule-o a partir do seu domínio, usando o URL /.well-known/assetlinks.json.

Observação: o arquivo AssetLinks precisa estar em /.well-known/assetlinks.json, no raiz do domínio, já que é apenas o local onde o Chrome o procurará.

Como criar um ícone

Quando o Android Studio cria um novo projeto, ele mostra um ícone padrão. Como desenvolvedor, você vai querer criar seu próprio ícone e diferenciar sua aplicativo de outros no Android Launcher.

O Android Studio contém o Image Asset Studio, que fornece as ferramentas necessárias para criar os ícones corretos, para cada a resolução e o formato que o aplicativo precisa.

No Android Studio, navegue até File > New > Image Asset, selecione Launcher Icons (Adaptative and Legacy) e siga as etapas do assistente. para criar um ícone personalizado para o aplicativo.

Como gerar um APK assinado

Com o arquivo assetlinks no seu domínio e a tag asset_statements configurado no aplicativo Android, a próxima etapa será gerar um aplicativo assinado. Novamente, as etapas para isso são amplamente documentados.

O APK de saída pode ser instalado em um dispositivo de teste usando o adb:

adb install app-release.apk

Se a etapa de verificação falhar, é possível verificar se há erros mensagens usando o Android Debug Bridge, no terminal do seu sistema operacional e com o Dispositivo de teste conectado.

adb logcat | grep -e OriginVerifier -e digital_asset_links

Com o APK de upload gerado, é possível fazer upload do app na Play Store.

Como adicionar uma tela de apresentação

A partir do Chrome 75, as Atividades confiáveis na Web são compatíveis com as telas de apresentação. A tela de apresentação pode ser configurada adicionando alguns novos arquivos de imagem e configurações ao projeto.

Atualize para o Chrome 75 ou versão mais recente e use as versão mais recente da Biblioteca de Suporte de Atividades Confiáveis na Web.

Como gerar imagens para a tela de apresentação

Os dispositivos Android podem ter diferentes tamanhos de tela e as densidades de pixels. Para garantir que a tela de apresentação tenha uma boa aparência em todos os dispositivos, é necessário gerar imagem para cada densidade de pixel.

Uma explicação completa sobre pixels independentes de tela (dp ou dip) está fora do escopo deste artigo, mas um exemplo seria criar uma imagem que tem 320 x 320 dp, o que representa um quadrado de 2 x 2 polegadas em uma tela de dispositivo de qualquer densidade e é equivalente a 320 x 320 pixels na densidade mdpi.

A partir daí, podemos derivar os tamanhos necessários para outras densidades de pixel. Abaixo está uma lista com as densidades de pixels, o multiplicador aplicado ao tamanho base (320 x 320 dp), o tamanho resultante em pixels e o local onde a imagem deve ser adicionada no projeto do Android Studio.

Densidade	Multiplicador	Tamanho	Localização do projeto
mdpi (linha de base)	1,0x	320x320 px	/res/drawable-mdpi/
ldpi	0,75x	240x240 px	/res/drawable-ldpi/
hdpi	1,5x	480x480 px	/res/drawable-hdpi/
xhdpi	2,0x	640x640 px	/res/drawable-xhdpi/
xxhdpi	3x	960x960 px	/res/drawable-xxhdpi/
xxxhdpi	4x	1.280 x 1.280 px	/res/drawable-xxxhdpi/

Observação: uma alternativa à criação de todos os tamanhos de imagem é usar um drawable vetorial. O Vector Asset Studio oferece ferramentas para ajudar os desenvolvedores a transformar SVGs em drawables vetoriais do Android.

Atualização do aplicativo

Com as imagens para a tela de apresentação geradas, é hora de adicionar as imagens configurações ao projeto.

Primeiro, adicione um content-provider ao manifesto do Android (AndroidManifest.xml).

<application>
    ...
    <provider
        android:name="androidx.core.content.FileProvider"
        android:authorities="com.example.twa.myapplication.fileprovider"
        android:grantUriPermissions="true"
        android:exported="false">
        <meta-data
            android:name="android.support.FILE_PROVIDER_PATHS"
            android:resource="@xml/filepaths" />
    </provider>
</application>

Observação: não se esqueça de mudar o atributo android:authorities ao criar o provedor, porque dois aplicativos não podem ter a mesma autoridade em um dispositivo.

Em seguida, adicione o recurso res/xml/filepaths.xml e especifique o caminho para a tela de apresentação twa:

<paths>
    <files-path path="twa_splash/" name="twa_splash" />
</paths>

Por fim, adicione meta-tags ao manifesto do Android para personalizar a LauncherActivity:

<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">
    ...
    <meta-data android:name="android.support.customtabs.trusted.SPLASH_IMAGE_DRAWABLE"
               android:resource="@drawable/splash"/>
    <meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_BACKGROUND_COLOR"
               android:resource="@color/colorPrimary"/>
    <meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_FADE_OUT_DURATION"
               android:value="300"/>
    <meta-data android:name="android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY"
               android:value="com.example.twa.myapplication.fileprovider"/>
    ...
</activity>

Verifique se o valor do android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY corresponde ao valor definido do atributo android:authorities no tag provider.

Como tornar a LauncherActivity transparente

Além disso, confira se a LauncherActivity é transparente para evitar uma tela branca mostrado antes da apresentação definindo um tema translúcido para a LauncherActivity:

<application>
    ...
    <activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
              android:theme="@android:style/Theme.Translucent.NoTitleBar">
    ...
    </activity>
</application>

Estamos ansiosos para ver o que os desenvolvedores criam com a Web confiável Atividades. Para enviar feedback, entre em contato pelo e-mail @ChromiumDev.