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:
- 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.
- 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 Android o un emulador 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. La compatibilidad con otros navegadores está en camino.
- 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 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. Te recomendamos que permitas que la herramienta haga esto, ya que garantiza que las dependencias estén configuradas correctamente. Consulta la documentación de Bubblewrap para usar una instalación existente del kit de desarrollo de Java (JDK) o de las herramientas de línea de comandos de Android.
Inicializa y compila el proyecto
Para inicializar un proyecto de Android que une una PWA, 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
La aplicación debería estar disponible en el selector de aplicaciones 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 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
PWA Builder proporciona una interfaz de GUI que usa la biblioteca de Bubblewrap para potenciar la generación de proyectos de Trusted Web Activity. Obtén más instrucciones para usar PWA Builder y 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.
Cómo configurar 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 confiable intentará cumplir con la elección predeterminada del navegador del usuario. Si el navegador predeterminado del usuario admite Trusted Web Activities, se iniciará. De lo contrario, se elegirá el 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
Si seguiste esta guía, es probable que tengas una Actividad web confiable que funcione 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 recomiendo que comiences por crear un ícono para tu app. Una vez que lo hagas, puedes considerar implementar tu app en Play Store.