Cómo usar una AWP en tu app para Android

Cómo iniciar una AWP en una app para Android

Las apps web progresivas (AWP) son aplicaciones web que usan funciones similares a las de las apps para crear experiencias de alta calidad que son rápidas, confiables y atractivas.

La Web tiene un alcance increíble y ofrece opciones poderosas para que los usuarios descubran experiencias nuevas. Sin embargo, los usuarios también están acostumbrados a buscar aplicaciones en la tienda de su sistema operativo. En muchos casos, esos usuarios ya están familiarizados con la marca o el servicio que buscan y tienen un alto nivel de intención que genera métricas de participación superiores al promedio.

Play Store es una tienda de apps para Android y los desarrolladores a menudo quieren abrir sus apps web progresivas desde sus apps para Android.

La actividad web de confianza es un estándar abierto que permite que los navegadores proporcionen un contenedor totalmente compatible con la plataforma web que renderiza AWP dentro de una app para Android. La función está disponible en Chrome y en desarrollo en Firefox Nightly.

Las soluciones existentes eran limitadas

Siempre ha sido posible incluir experiencias web en una app para Android con tecnologías como WebView de Android o frameworks como Cordova.

La limitación de WebView de Android es que no está pensado como reemplazo del navegador. WebView de Android es una herramienta para desarrolladores que permite usar la IU web en una app para Android y no proporciona acceso completo a las funciones modernas de la plataforma web, como el selector de contactos o el sistema de archivos, entre otras.

Cordova se diseñó para aumentar las deficiencias de WebView, pero las APIs se limitan al entorno de Cordova. Eso significa que debes mantener una base de código adicional para usar las APIs de Cordova en tu app para Android, separada de tu AWP en la Web abierta.

Además, la visibilidad de las funciones no siempre funciona como se espera, y los problemas de compatibilidad entre las versiones de Android y los OEMs también pueden ser un inconveniente. Cuando se usa una de esas soluciones, los desarrolladores necesitan procesos de control de calidad adicionales y incurren en un costo de desarrollo adicional para detectar y crear soluciones alternativas.

Trusted Web Activity es un nuevo contenedor para apps web en Android.

Ahora los desarrolladores pueden usar una Actividad web de confianza como contenedor para incluir una AWP como actividad de inicio de una app para Android. La tecnología aprovecha el navegador para renderizar la AWP en pantalla completa, lo que garantiza que la Actividad web de confianza tenga la misma compatibilidad con las funciones y las APIs de la plataforma web que el navegador subyacente. También hay utilidades de código abierto que facilitan aún más la implementación de una app para Android mediante Trusted Web Activity.

Otra ventaja que no está disponible en otras soluciones es que el contenedor comparte el almacenamiento con el navegador. Los estados de acceso y las preferencias de los usuarios se comparten sin problemas en todas las experiencias.

Compatibilidad del navegador

La función está disponible en Chrome desde la versión 75, y Firefox la implementa en la versión nocturna.

Criterios de calidad

Los desarrolladores web deben usar una actividad web de confianza cuando quieran incluir contenido web en una app para Android.

El contenido web de una actividad web de confianza debe cumplir con los criterios de instalación de AWP.

Además, para coincidir con el comportamiento que los usuarios esperan de las aplicaciones para Android, Chrome 86 introdujo un cambio en el que no manejar las siguientes situaciones se considera una falla:

  • No se pudieron verificar los vínculos de recursos digitales en el lanzamiento de la aplicación.
  • No se pudo mostrar HTTP 200 para una solicitud de recurso de red sin conexión.
  • Una solicitud de navegación que muestra un error HTTP 404 o 5xx”.

Cuando una de esas situaciones ocurre en la actividad web de confianza, provoca una falla visible de la aplicación para Android para el usuario. Consulta la guía sobre cómo manejar esas situaciones en tu service worker.

La aplicación también debe cumplir con criterios adicionales específicos de Android, como el cumplimiento de las políticas.

Captura de pantalla que muestra la puntuación de Lighthouse para AirHorn con la insignia de AWP y una puntuación de rendimiento de 100.
La insignia de AWP en Lighthouse muestra si tu AWP pasa los criterios de instalación.

Herramientas

Los desarrolladores web que quieran aprovechar la Actividad web de confianza no necesitan aprender sobre tecnologías o APIs nuevas para transformar su AWP en una aplicación para Android. En conjunto, burbujas y PWABuilder proporcionan herramientas para desarrolladores en forma de biblioteca, interfaz de línea de comandos (CLI) e interfaz gráfica de usuario (GUI).

Envoltorio de burbujas

El proyecto Bubblewrap genera apps para Android en forma de una biblioteca NodeJS y una interfaz de línea de comandos (CLI).

Para iniciar un proyecto nuevo, se debe ejecutar la herramienta y pasar la URL del manifiesto web:

npx @bubblewrap/cli init --manifest=https://pwa-directory.appspot.com/manifest.json

La herramienta también podrá compilar el proyecto, y si ejecutas el comando que aparece a continuación, se generará una aplicación para Android lista para subir a Play Store:

npx @bubblewrap/cli build

Después de ejecutar este comando, un archivo llamado app-release-signed.apk estará disponible en el directorio raíz del proyecto. Este es el archivo que se subirá a Play Store.

PWABuilder

PWABuilder ayuda a los desarrolladores a transformar los sitios web existentes en aplicaciones web progresivas. También se integra con Burbujas para proporcionar una interfaz GUI que permita unir esas AWP en una app para Android. El equipo de PWABuilder creó una excelente entrada de blog sobre cómo generar una aplicación para Android con la herramienta.

Verifica la propiedad de la AWP en la app para Android

Un desarrollador que crea una app web progresiva excelente no querría que otro desarrollador creara una app para Android con ella sin su permiso. Para asegurarte de que esto no suceda, la aplicación para Android debe vincularse con la app web progresiva a través de una herramienta llamada Vínculos de recursos digitales.

Burbujas y PWABuilder se encargan de la configuración necesaria en la aplicación para Android, pero queda un último paso, que consiste en agregar el archivo assetlinks.json a la AWP.

Para generar este archivo, los desarrolladores necesitan la firma SHA-256 de la clave que se usa para firmar el APK que descargan los usuarios.

La clave se puede generar de varias maneras, y la forma más fácil de encontrar qué clave firmó el APK que se entregó a los usuarios finales es descargarla desde Play Store.

Para evitar mostrar una aplicación dañada a los usuarios, implementa la aplicación en un canal de prueba cerrado, instálala en un dispositivo de prueba y, luego, usa Peter's Asset Link Tool para generar el archivo assetlinks.json correcto para la app. Haz que el archivo assetlinks.json generado esté disponible en /.well-known/assetlinks.json, en el dominio que se está validando.

Próximos pasos

Una app web progresiva es una experiencia web de alta calidad. La Actividad web de confianza es una nueva forma de abrir esas experiencias de alta calidad desde una app para Android cuando cumplen con los criterios de calidad mínimos.

Si recién comienzas a usar las apps web progresivas, lee nuestra guía sobre cómo crear una AWP excelente. En el caso de los desarrolladores que ya tienen una AWP, usa Lighthouse para verificar si cumple con los criterios de calidad.

Luego, usa Bubblewrap o PWABuilder para generar la aplicación para Android, súbela a un canal de prueba cerrado en Play Store y vincúlala con la AWP con Peter's Asset Link Tool.

Por último, mueve tu aplicación del canal de prueba cerrada a producción.