Las Trusted Web Activities pueden ser difíciles de configurar, en especial si solo quieres mostrar tu sitio web. En esta guía, se explica cómo crear un proyecto pequeño que use Trusted Web Activities.
Al final de esta guía, podrás hacer lo siguiente:
- Haber usado Bubblewrap para compilar una aplicación que usa una Actividad web de confianza y pasa la verificación.
- Comprende cuándo se usan tus claves de firma.
- Poder determinar con qué firma se compila tu aplicación para Android
- Saber cómo crear un archivo básico de Vínculos de recursos digitales
Para seguir esta guía, necesitas lo siguiente:
- Node.js 10 o una versión posterior
- 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 para dispositivos móviles que admita Actividad web de confianza.
- Un sitio web que te gustaría ver en la Actividad web de confianza
Puedes usar una Actividad web de confianza para que tu app para Android inicie una pestaña del navegador en pantalla completa, sin ninguna IU del navegador. Esta capacidad está restringida a los sitios web que son de tu propiedad. Para demostrar la propiedad, debes configurar Vínculos de recursos digitales.
Cuando inicias una actividad web de confianza, el navegador verifica los vínculos de recursos digitales. Si falla la verificación, 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 Actividad web de confianza.
Para instalar la CLI, ejecuta este comando:
npm i -g @bubblewrap/cli
Configura el entorno
Cuando ejecutas Bubblewrap por primera vez, se ofrece descargar e instalar automáticamente las dependencias externas requeridas. Te recomendamos que permitas las descargas automáticas, ya que ayudan a garantizar que las dependencias estén configuradas correctamente. Consulta la documentación de Bubblewrap para usar un Java Development Kit (JDK) o una instalación de herramientas de línea de comandos de Android existentes.
Inicializa y compila el proyecto
Inicializa un proyecto de Android que encapsule una PWA:
bubblewrap init --manifest=https://my-twa.com/manifest.json
Bubblewrap lee el manifiesto web, les pide a los desarrolladores que confirmen los valores que se usarán en el proyecto de Android y genera 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 genera 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 el siguiente comando:
bubblewrap install
Como alternativa, se puede usar la herramienta adb.
adb install app-release-signed.apk
La aplicación ahora 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 de confianza. Esto se debe a que aún no configuramos nuestra validación de vínculos de recursos digitales.
Alternativas de la interfaz gráfica de usuario (GUI) para Bubblewrap
PWA Builder proporciona una interfaz gráfica de usuario que usa la biblioteca de Bubblewrap para potenciar la generación de proyectos de Actividad web de confianza. Encuentra instrucciones sobre cómo usar PWA Builder para crear una app para Android que abra tu AWP.
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 por la que falla la verificación es el uso de la firma incorrecta. (Recuerda que, si no se realiza la verificación, lanzarás tu sitio web 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 clave configurada durante el paso init. Sin embargo, cuando publiques tu app en Google Play, es posible que se cree otra clave, según cómo decidas controlar las claves de firma. Obtén más información sobre las claves de firma y su relación con Bubblewrap y Google Play.
Cómo configurar tu archivo de vinculación de recursos
Los Vínculos de recursos digitales constan, básicamente, de un archivo en tu sitio web que apunta a tu app y de algunos metadatos en tu app que apuntan a tu sitio web.
Después de crear tu 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 recursos digitales para obtener más información sobre cómo se relacionan con tu clave de firma.
Verifica tu navegador
Una actividad web de confianza intentará cumplir con la elección predeterminada del navegador del usuario. Si el navegador predeterminado del usuario admite actividades web de confianza, se iniciará. Si no se encuentra ninguno, se elegirá cualquier navegador instalado que admita Trusted Web Activities. Por último, el comportamiento predeterminado es volver a un modo de pestañas personalizadas.
Esto significa que, si estás depurando algo relacionado con las actividades web de confianza, 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, esperamos que tengas una actividad web de confianza que funcione y los conocimientos suficientes para depurar si falla la verificación. Si no es así, consulta más conceptos de Android para desarrolladores web.
Para continuar, crea un ícono para tu app. Una vez que lo hagas, puedes considerar implementar tu app en Play Store.