Las Trusted Web Activities pueden ser un poco complicadas de configurar, en especial si todo lo que quieres hacer es mostrar tu sitio web. En esta guía, se explica cómo crear un proyecto básico que usa Trusted Web Activities y se abordan todos los problemas.
Al final de esta guía, podrás hacer lo siguiente:
- Haber utilizado Bubblewrap para compilar una aplicación que use una actividad web de confianza y apruebe la verificación
- Comprende cuándo se usan tus claves de firma.
- Poder determinar la firma con la que se compila tu aplicación para Android
- Aprende a crear un archivo básico de Vínculos de recursos digitales.
Para seguir esta guía, necesitarás lo siguiente:
- Node.js 10 o una versión posterior instalado en la computadora de desarrollo
- Un teléfono o emulador Android conectado y configurado para el desarrollo (Habilita la depuración por USB si usas un teléfono físico)
- Un navegador que admita la Actividad web de confianza en tu teléfono de desarrollo Funcionará Chrome 72 o una versión posterior. Pronto se admitirán otros navegadores.
- Un sitio web que desees ver en la Actividad web de confianza.
Una actividad web de confianza permite que tu app para Android inicie una pestaña del navegador en pantalla completa sin ninguna IU. Esta función se limita a los sitios web que te pertenecen, y puedes demostrarlo configurando los Vínculos de recursos digitales. Hablaremos más sobre ellos más adelante.
Cuando inicies una actividad web confiable, el navegador verificará que los vínculos de recursos digitales sean correctos. Esto se denomina verificación. Si la verificación falla, el navegador volverá a mostrar tu sitio web como una pestaña personalizada.
Instala y configura Bubblewrap
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 con Trusted Web Activity.
La CLI se puede instalar con el siguiente comando:
npm i -g @bubblewrap/cli
Configura el entorno
Cuando ejecutes Bubblewrap por primera vez, se te ofrecerá descargar e instalar automáticamente las dependencias externas requeridas. Recomendamos que permitas que la herramienta lo haga, ya que garantiza que las dependencias se configuren de forma correcta. Consulta la documentación de Bubblewrap para usar la instalación de un Java Development Kit (JDK) o de las herramientas de línea de comandos de Android existentes.
Inicializa y compila el proyecto
Para inicializar un proyecto de Android que une una AWP, ejecuta el comando init:
bubblewrap init --manifest=https://my-twa.com/manifest.json
Bubblewrap 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
Ejecutar
El paso de compilación generará un archivo llamado app-release-signed.apk. Este archivo se puede instalar en un dispositivo de desarrollo para realizar pruebas o subir a Play Store para su lanzamiento.
Bubblewrap proporciona un comando para instalar y probar la aplicación en un dispositivo local. Con el dispositivo de desarrollo conectado a la computadora, ejecuta lo siguiente:
bubblewrap install
Como alternativa, se puede usar la herramienta adb.
adb install app-release-signed.apk
Ahora, la aplicación debería estar disponible en el selector de dispositivos. Cuando abras la aplicación, notarás que tu sitio web se inicia como una pestaña personalizada, no como una actividad web confiable, ya que aún no configuramos la validación de vínculos de recursos digitales. Pero primero…
Alternativas de interfaz gráfica de usuario (GUI) para Bubblewrap
El Compilador de AWP proporciona una interfaz de GUI que utiliza la biblioteca de Bubblewrap para impulsar la generación de proyectos de Actividad web de confianza. Obtén más instrucciones sobre cómo usar AWP Builder con el fin de crear una app para Android que abra tu AWP en esta entrada de blog.
Nota sobre las claves de firma
Los Vínculos de recursos digitales tienen en cuenta la clave con la que se firmó un APK. Una causa común de que falle la verificación es usar una firma incorrecta. (Recuerda que, si no apruebas la verificación, tu sitio web se lanzará como una pestaña personalizada con la IU del navegador en la parte superior de la página). Cuando Bubblewrap compila la aplicación, se crea un APK con una configuración de claves durante el paso init. Sin embargo, cuando publicas tu app en Google Play, es posible que se cree otra clave, según la forma en que elijas controlar las claves de firma. Obtén más información sobre las llaves de firma y cómo se relacionan con Bubblewrap y Google Play.
Configurando tu archivo de vínculo de recursos
Los vínculos de recursos digitales consisten, en esencia, en un archivo en tu sitio web que dirige a tu app y algunos metadatos en tu app 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 tu app correctamente. Consulta un análisis detallado de los vínculos de activos digitales para obtener más información sobre cómo se relacionan con tu clave de firma.
Cómo verificar el navegador
Una actividad web de confianza intentará cumplir con la selección de navegador predeterminada del usuario. Si el navegador predeterminado del usuario admite Trusted Web Activities, se iniciará. De lo contrario, se elegirá cualquier navegador instalado que admita Trusted Web Activities. Por último, el comportamiento predeterminado es recurrir a un modo de pestañas personalizadas.
Esto significa que, si estás depurando algo relacionado con las actividades web confiables, debes asegurarte de que estás usando el navegador que crees que estás usando. 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
Esperamos que, si seguiste esta guía, tengas una actividad web confiable que funcione y tengas 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 envía un problema de GitHub sobre estos documentos.
Para los próximos pasos, te recomiendo que comiences por crear un ícono para tu app. Una vez que lo hagas, puedes considerar implementar tu app en Play Store.