Las Trusted Web Activities pueden ser un poco complicadas de configurar, especialmente si solo quieres 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, harás lo siguiente:
- Usaste Bubblewrap para compilar una aplicación que usa una Trusted Web Activity y pasa la verificación.
- Comprende cuándo se usan tus claves de firma.
- Debes poder determinar la firma con la que se compila tu aplicación para Android.
- Saber cómo crear un archivo Digital Asset Links básico
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 de USB si usas un teléfono físico)
- Un navegador que admita la Actividad web de confianza en tu teléfono de desarrollo
- Un sitio web que quieras ver en la Actividad web de confianza
Una actividad web confiable permite que tu app para Android inicie una pestaña del navegador en pantalla completa sin ninguna IU del navegador. Esta función se limita a los sitios web que te pertenecen, y puedes demostrarlo configurando 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 en aplicaciones para Android mediante Trusted Web Activity.
La CLI se puede instalar con el siguiente comando:
Configura el entorno
Cuando ejecutes Bubblewrap por primera vez, se te ofrecerá descargar e instalar automáticamente las dependencias externas requeridas. Te recomendamos dejar que la herramienta haga esto, ya que garantiza que las dependencias se configuren correctamente. 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 leerá el Manifiesto web, 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:
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:
Como alternativa, se puede usar la herramienta adb.
Nota: La herramienta de línea de comandos **adb** se encuentra dentro de las herramientas de línea de comandos de Android en **android_sdk/platform-tools/**.
La aplicación ahora 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. Esto se debe a 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
PWA Builder proporciona una interfaz de GUI que usa la biblioteca de Bubblewrap para potenciar la generación de proyectos de Trusted Web Activity. Consulta esta entrada de blog para obtener más instrucciones sobre cómo usar PWA Builder para 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 causa común de error en 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 compile la aplicación, se creará un APK con una configuración de clave 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.
Cómo configurar tu archivo de vínculo de recursos
Los Vínculos de recursos digitales consisten, básicamente, 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 correctamente tu app. 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á si algún navegador instalado admite 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 Trusted Web Activities, debes asegurarte de usar el navegador que crees que estás usando. Puedes usar el siguiente comando para verificar qué navegador se está usando:
Próximos pasos
Si seguiste esta guía, es probable que tengas una Actividad web confiable en funcionamiento y que tengas suficiente conocimiento 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 recomendamos que comiences por crear un ícono para tu app. Una vez que lo hagas, puedes considerar implementar tu app en Play Store.