Guía de integración

André Cipriani Bandarra

Nota: Una respuesta más sencilla guía de inicio rápido de Trusted Web Activities ya está disponible.

Para configurar una actividad web de confianza, no es necesario que los desarrolladores creen código Java, pero Android Studio es como en los productos necesarios. Esta guía se creó con Android Studio 3.3. Consulta los documentos sobre cómo instalarlo.

Cómo crear un proyecto de actividad web de confianza

Cuando se usa Trusted Web Activities, el proyecto debe orientarse al nivel de API 16 o superior.

Nota: En esta sección, encontrarás orientación para configurar un proyecto nuevo en Android. a Looker Studio. Si ya estás familiarizado con la herramienta, no dudes en pasar a la Cómo obtener la Biblioteca de actividad web de confianza.

Abre Android Studio y haz clic en Start a new Android Studio project.

Android Studio te pedirá que elijas un tipo de actividad. Dado que Trusted Web Activities usa una Actividad proporcionada por la biblioteca de compatibilidad, elige Add No Activity y haz clic en Siguiente.

Para el próximo paso, el asistente te pedirá configuraciones para el proyecto. Este es un breve descripción de cada campo:

• Nombre: El nombre que se usará para tu aplicación en la Selector de Android.
• Package Name: Un identificador único para las aplicaciones para Android en la en Play Store y en dispositivos Android. Consulta el documentación para obtener más información sobre los requisitos y las prácticas recomendadas para crear paquetes de las apps para Android.
• Save location: El lugar en el que Android Studio creará el proyecto en el archivo en un sistema de archivos.
• Lenguaje: No se requiere la escritura de código Java ni Kotlin para el proyecto. Selecciona Java como predeterminado.
• Nivel mínimo de API: La biblioteca de compatibilidad requiere al menos el nivel de API 16. Selecciona el nivel de API 16, cualquiera de las versiones anteriores.

Deja las casillas de verificación restantes desmarcadas, ya que no usaremos Instant Apps. o AndroidX y haz clic en Finish.

Cómo obtener la biblioteca de compatibilidad de la Actividad web de confianza

Para configurar la biblioteca de Trusted Web Activity en el proyecto, deberás editar la aplicación de compilación. Busca la sección Gradle Scripts en el Project Navigator. Hay dos archivos llamados build.gradle, que pueden ser un poco confusos. las descripciones entre paréntesis ayudan a identificar la correcta.

El archivo que buscamos es el que tiene el módulo Module junto a su de la fuente de datos.

La biblioteca de Trusted Web Activities usa Funciones de Java 8 y el primer cambio habilita Java 8. Agrega una sección compileOptions al parte inferior de la sección android, como se muestra a continuación:

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

En el siguiente paso, se agregará la biblioteca de compatibilidad de Trusted Web Activity al proyecto. Agregar un nuevo dependencia a la sección dependencies:

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

Android Studio mostrará un mensaje en el que se te pedirá sincronizar el proyecto una vez más. Haz clic en el vínculo Sync Now y sincronízalo.

Iniciar Trusted Web Activity

Para configurar Trusted Web Activity se debe editar el Manifiesto de las apps para Android.

En el navegador de proyectos, expande la sección app y, luego, manifests y haga doble clic en AndroidManifest.xml para abrir el archivo.

Como le pedimos a Android Studio que no agregara ninguna actividad a nuestro proyecto cuando cuando lo creas, el manifiesto está vacío y contiene solo la etiqueta de aplicación.

Para agregar la actividad web de confianza, inserta una etiqueta activity en la etiqueta 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>

Las etiquetas agregadas al XML son estándar Manifiesto de las apps para Android. Hay dos datos relevantes para el contexto de Trusted Web. Actividades:

1. La etiqueta meta-data le indica a la actividad web de confianza qué URL debe abrir. Cambiar El atributo android:value con la URL de la AWP que deseas abrir En en este ejemplo, es https://airhorner.com.
2. La segunda etiqueta intent-filter permite que la actividad web de confianza intercepte Android Intents que abren https://airhorner.com El atributo android:host dentro de la etiqueta data debe apuntar al dominio que se abre por Trusted Web Activity.

Nota: Cuando ejecutes el proyecto en esta etapa, la barra de URL de las pestañas personalizadas seguirán apareciendo en la parte superior de la pantalla. Esto no es un error.

En la siguiente sección, te mostraremos cómo configurar Vínculos de recursos digitales para verificar la relación entre el sitio web y la aplicación, y quita la barra de URL.

Quita la barra de URL

Trusted Web Activities requiere una asociación entre la aplicación para Android. y el sitio web que se debe establecer para quitar la barra de URL.

Esta asociación se crea a través de Vínculos de recursos digitales y la asociación debe establecerse de ambas formas, vinculando de la app al sitio web y del sitio web a la app.

Puedes configurar la app para la validación de sitios web y Chrome para que la omita el sitio web a la validación de la aplicación, con fines de depuración.

Establece una asociación entre la app y el sitio web

Abre el archivo de recursos de cadenas app > res > values > strings.xml y agrega lo siguiente: Declaración de los vínculos de recursos digitales a continuación:

<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>

Cambia el contenido del atributo site para que coincida con el esquema y el dominio abierto a través de Trusted Web Activity.

En el archivo de manifiesto de la app para Android, AndroidManifest.xml, vínculo a la agregando una nueva etiqueta meta-data, pero esta vez como elemento secundario de la Etiqueta 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>

Ya establecimos una relación entre la aplicación de Android y el sitio web. Es útil depurar esta parte de la relación sin crear del sitio web hasta la validación de la aplicación.

Sigue estos pasos para probar esto en un dispositivo de desarrollo:

Habilitar modo de depuración

1. Abre Chrome en el dispositivo de desarrollo, navega a chrome://flags, busca para un elemento llamado Habilitar la línea de comandos en dispositivos sin derechos de administrador y cámbialo a HABILITADO y, luego, reinicia el navegador.
2. Luego, en la aplicación Terminal de tu sistema operativo, usa el Android Debug Bridge (instalada con Android Studio) y ejecuta el siguiente comando:

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

Cierra Chrome y vuelve a iniciar la aplicación desde Android Studio. El la aplicación en la pantalla completa.

Nota: Es posible que debas forzar el cierre de Chrome para que se reinicie con la configuración la línea de comandos. Ve a Configuración de Android > Aplicaciones y Notificaciones > Chrome, y haz clic en Forzar detención.

Establece una asociación entre el sitio web y la app

Hay 2 datos que el desarrollador debe recopilar de la app para crear la asociación:

• Package Name: La primera información es el nombre del paquete de la app. Esta es el mismo nombre de paquete que se genera cuando se crea la app. También puedes encontrarlos En el Módulo build.gradle, en Secuencias de comandos de Gradle > build.gradle (módulo: app) y es el valor de la el atributo applicationId.
• Huella digital SHA-256: Las aplicaciones para Android se deben firmar para poder subido a Play Store. Se usa la misma firma para establecer la entre el sitio web y la aplicación a través de la huella digital SHA-256 del la clave de carga.

En la documentación de Android, se explica en detalle cómo generar una clave con Android Studio. Asegúrate de tomar nota de la ruta de acceso, el alias y las contraseñas del almacén de claves, ya que la necesitarás en el siguiente paso.

Extrae la huella digital SHA-256 con el keytool con el siguiente comando:

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

El valor de la huella digital SHA-256 se imprime en el Certificado. huellas digitales. Este es un resultado de ejemplo:

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

Con ambos datos a mano, ve al generador de vínculos de recursos. completa los campos y haz clic en Generate Statement. Copia la sentencia generada y publicarla desde tu dominio desde la URL /.well-known/assetlinks.json.

Nota: El archivo AssetLinks debe estar en /.well-known/assetlinks.json, en el raíz del dominio, ya que ese es solo el lugar donde Chrome lo buscará.

Cómo crear un ícono

Cuando Android Studio cree un proyecto nuevo, vendrá con un ícono predeterminado. Como desarrollador, deberás crear tu propio ícono y diferenciar tus elementos de su aplicación desde otras en el Selector de Android.

Android Studio incluye Image Asset Studio, que proporciona las herramientas necesarias para crear los iconos correctos, para cada resolución y dar forma a las necesidades de tu aplicación.

En Android Studio, navega hasta File > New > Image Asset, selecciona Launcher Icons (Adaptative and Legacy) y sigue los pasos del asistente. para crear un ícono personalizado para la aplicación.

Cómo generar un APK firmado

Con el archivo assetlinks implementado en tu dominio y la etiqueta asset_statements configurada en la aplicación para Android, el siguiente paso es generar una app firmada. Una vez más, los pasos para esto son ampliamente documentados.

El APK de salida se puede instalar en un dispositivo de prueba mediante adb:

adb install app-release.apk

Si el paso de verificación falla, se pueden buscar errores con Android Debug Bridge, desde la terminal del SO y con el dispositivo de prueba conectado.

adb logcat | grep -e OriginVerifier -e digital_asset_links

Con el APK de carga generado, ahora podrás subir la app a Play Store.

Cómo agregar una pantalla de presentación

A partir de Chrome 75, Trusted Web Activities admite pantallas de presentación. La pantalla de presentación se puede configurar agregando algunos archivos de imagen y configuraciones nuevos al en un proyecto final.

Asegúrate de actualizar a Chrome 75 o una versión posterior y de usar la la versión más reciente de la biblioteca de compatibilidad de la actividad web de confianza

Genera las imágenes para la pantalla de presentación

Los dispositivos Android pueden tener diferentes tamaños de pantalla y las densidades de píxeles. Para asegurarte de que la pantalla de presentación se vea bien en todos los dispositivos, deberás generar la imagen para cada densidad de píxeles.

Explicación completa de los píxeles independientes de la pantalla (dp o dip) está fuera del alcance de este artículo, pero un ejemplo sería crear una imagen que es de 320 x 320 dp, que representa un cuadrado de 2 x 2 pulgadas en la pantalla de un dispositivo de cualquier densidad. y equivale a 320 x 320 píxeles en la densidad mdpi.

A partir de allí, podemos derivar los tamaños necesarios para otras densidades de píxeles. A continuación, se incluye una lista con las densidades de píxeles, el multiplicador aplicado al tamaño base (320 x 320 dp), el el tamaño resultante en píxeles y la ubicación donde la imagen debe agregarse en el Proyecto de Android Studio

Densidad	Multiplicador	Tamaño	Ubicación del proyecto
mdpi (modelo de referencia)	× 1.0	320x320 px	/res/drawable-mdpi/
ldpi	x 0.75	240x240 px	/res/drawable-ldpi/
hdpi	1.5 veces	480 × 480 px	/res/drawable-hdpi/
xhdpi	2.0x	640x640 px	/res/drawable-xhdpi/
xxhdpi	3.0 veces	960x960 px	/res/drawable-xxhdpi/
xxxhdpi	4.0 veces	1280 × 1280 px	/res/drawable-xxxhdpi/

Nota: Una alternativa para crear todos los tamaños de imágenes es usar un elemento de diseño vectorial. Vector Asset Studio ofrece herramientas para ayudar a los desarrolladores a transformar SVG en elementos de diseño vectoriales de Android.

Actualizar la aplicación

Con las imágenes de la pantalla de presentación generadas, es hora de agregar los elementos parámetros de configuración al proyecto.

Primero, agrega un content-provider al manifiesto de 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>

Nota: Asegúrate de cambiar el atributo android:authorities cuando crees el proveedor. ya que dos aplicaciones no pueden tener la misma autoridad en un dispositivo.

Luego, agrega el recurso res/xml/filepaths.xml y especifica la ruta de acceso a la pantalla de presentación:

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

Por último, agrega meta-tags al manifiesto de Android para personalizar 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>

Asegúrate de que el valor de android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY coincide con el valor definido del atributo android:authorities dentro del Etiqueta provider.

Cómo hacer que LauncherActivity sea transparente

Además, asegúrate de que LauncherActivity sea transparente para evitar que se muestre una pantalla blanca. que se muestra antes de la presentación estableciendo un tema translúcido para LauncherActivity:

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

Esperamos ver qué crearán los desarrolladores con Trusted Web. Actividades. Para dejar comentarios, comunícate con nosotros: @ChromiumDev.