Guía de inicio rápido

Peter Conn
Peter Conn

Trusted Web Activities puede ser un poco complicado de configurar, en especial si lo único que quieres hacer es mostrar tu sitio web. En esta guía, aprenderás a crear un proyecto básico que utilice Trusted Web Activities y conocerá todos los problemas.

Al final de esta guía, harás lo siguiente:

  • Usar Bubblewrap para compilar una aplicación que usa una actividad web de confianza y aprueba la verificación
  • Comprender cuándo se usan tus claves de firma
  • Debes poder determinar la firma con la que se está compilando tu aplicación para Android.
  • Saber cómo crear un archivo básico de Vínculos de recursos digitales

Para seguir esta guía, necesitarás lo siguiente:

  • Tener instalado Node.js 10 o una versión posterior en la computadora del desarrollador
  • Un teléfono o emulador de Android conectado y configurado para el desarrollo (habilita la depuración por USB si usas un teléfono físico).
  • Un navegador compatible con Trusted Web Activity en tu teléfono de desarrollo. Chrome 72 o versiones posteriores funcionarán. Pronto se admitirán otros navegadores.
  • Un sitio web que quieras ver en Trusted Web Activity.

Una actividad web de confianza permite que tu app para Android inicie una pestaña del navegador en pantalla completa sin ninguna IU del navegador. Esta función se restringe a los sitios web que te pertenecen. Para comprobarlo, configura Vínculos de recursos digitales. Hablaremos más sobre ellas más adelante.

Cuando inicies una actividad web de confianza, el navegador verificará que los Vínculos de recursos digitales finalicen la compra, lo que se denomina verificación. Si falla la verificación, el navegador volverá a mostrar tu sitio web como una pestaña personalizada.

Cómo instalar y configurar el envoltorio de burbujas

Bubblewrap es un conjunto de bibliotecas y una herramienta de línea de comandos (CLI) para Node.js que ayuda a los desarrolladores a generar, compilar y ejecutar apps web progresivas dentro de aplicaciones para Android mediante Trusted Web Activity.

La CLI se puede instalar con el siguiente comando:

npm i -g @bubblewrap/cli

Configura el entorno

Cuando ejecutes la función de Burbujas por primera vez, ofrecerá la posibilidad de descargar e instalar automáticamente las dependencias externas necesarias. Recomendamos que permitas que la herramienta lo haga, ya que garantiza que las dependencias se configuren de forma correcta. Consulta la documentación de Burbblewrap para usar un Java Development Kit (JDK) o la instalación de herramientas de línea de comandos de Android existente.

Inicializa y compila el proyecto

Para inicializar un proyecto de Android que une una AWP, se ejecuta el comando init:

bubblewrap init --manifest=https://my-twa.com/manifest.json

Burbujas leerá el Manifiesto web, les pedirá a los desarrolladores que confirmen los valores que se usarán en el proyecto de Android y generará el proyecto con esos valores. Una vez que se haya generado el proyecto, ejecuta el siguiente comando para generar un APK:

bubblewrap build

Ejecución

El paso de compilación generará un archivo llamado app-release-signed.apk. Este archivo se puede instalar en un dispositivo de desarrollo para probarlo o subirse a Play Store para su lanzamiento.

El envoltorio de burbujas proporciona un comando para instalar y probar la app en un dispositivo local. Con el dispositivo de desarrollo conectado a la computadora, ejecuta lo siguiente:

bubblewrap install

También se puede usar la herramienta adb.

adb install app-release-signed.apk

La aplicación debería estar disponible en el selector del dispositivo. Cuando abras la aplicación, notarás que tu sitio web se inicia como una pestaña personalizada, no como una actividad web de confianza, porque aún no configuramos nuestra validación de Vínculos de recursos digitales, pero primero...

Alternativas de interfaz gráfica de usuario (GUI) para burbujaswrap

El Creador de AWP proporciona una interfaz GUI que usa la biblioteca de burbujas para potenciar la generación de proyectos de actividad web de confianza. En esta entrada de blog, encontrarás más instrucciones para usar el Compilador de AWP y crear una app para Android que abra tu AWP.

Nota sobre las claves de firma

Los Vínculos de recursos digitales tienen en cuenta la clave con la que se firmó un APK y una de las causas comunes por las que falla la verificación es usar la firma incorrecta. (Recuerda que si la verificación falla, significa que iniciarás tu sitio web como una pestaña personalizada con la IU del navegador en la parte superior de la página). Cuando Burbujas compile la aplicación, se creará un APK con una configuración de clave durante el paso init. Sin embargo, cuando publiques tu app en Google Play, es posible que se cree otra clave para ti según cómo elijas administrar las claves de firma. Obtén más información sobre la firma de claves y cómo se relacionan con la función de Burbujas y Google Play.

En esencia, los Vínculos de recursos digitales consisten en un archivo en tu sitio web que dirige a tu app y algunos metadatos que dirigen a tu sitio web.

Después de crear el archivo assetlinks.json, súbelo a tu sitio web en .well-known/assetlinks.json (en relación con la raíz) para que el navegador pueda verificar correctamente tu app. Consulta un análisis detallado de los vínculos de recursos digitales para obtener más información sobre cómo se relaciona con tu clave de firma.

Revisando el navegador

Una actividad web de confianza intentará respetar la elección de navegador predeterminada del usuario. Si el navegador predeterminado del usuario admite Trusted Web Activities, se iniciará. Sin embargo, si algún navegador instalado es compatible con Trusted Web Activities, se elegirá. Por último, el comportamiento predeterminado es volver al modo de pestañas personalizadas.

Esto significa que, si estás depurando algo relacionado con Trusted Web Activities, debes asegurarte de usar el navegador que crees. Puedes usar el siguiente comando para verificar qué navegador se está usando:

> adb logcat -v brief | grep -e TWAProviderPicker
D/TWAProviderPicker(17168): Found TWA provider, finishing search: com.google.android.apps.chrome

Próximos pasos

Con suerte, si seguiste esta guía, tendrás una actividad web de confianza en funcionamiento y tendrás los conocimientos suficientes para depurar lo que sucede cuando falla la verificación. De lo contrario, consulta más conceptos de Android para desarrolladores web o informa un problema en GitHub con estos documentos.

Para los próximos pasos, te recomendamos que comiences por crear un ícono para tu app. Ahora, puedes implementar la app en Play Store.