Cómo usar una AWP en tu app para Android

Cómo iniciar una AWP en una app para Android

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

La Web tiene un alcance increíble y ofrece formas poderosas para que los usuarios descubran nuevas experiencias. 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 conocen la marca o el servicio que buscan y tienen un alto nivel de intencionalidad, lo que genera métricas de participación superiores al promedio.

Play Store es una tienda de aplicaciones para Android, y los desarrolladores suelen querer abrir sus aplicaciones web progresivas desde sus aplicaciones para Android.

La Actividad web de confianza es un estándar abierto que permite que los navegadores proporcionen un contenedor completamente compatible con la plataforma web que renderiza las 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 fue posible incluir experiencias web en una app para Android con tecnologías como Android WebView o frameworks como Cordova.

La limitación de Android WebView es que no está diseñado para reemplazar a un navegador. El 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 complementar las deficiencias de WebView, pero las APIs se limitan al entorno de Cordova. Esto significa que debes mantener una base de código adicional para usar las APIs de Cordova en tu app para Android, separada de tu PWA 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 OEM también pueden ser un problema. Cuando usan una de esas soluciones, los desarrolladores necesitan procesos adicionales de control de calidad y generan un costo de desarrollo adicional para detectar y crear soluciones alternativas.

Actividad web de confianza 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 para facilitar aún más la implementación de una app para Android con una Actividad web de confianza.

Otra ventaja que no está disponible en otras soluciones es que el contenedor comparte 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 implementó en su 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 instalabilidad de la AWP.

Además, para que coincida con el comportamiento que los usuarios esperan de las aplicaciones para Android, Chrome 86 introdujo un cambio en el que no controlar 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 devolvió el código HTTP 200 para una solicitud de recurso de red sin conexión.
  • Una solicitud de navegación que devuelve un error HTTP 404 o 5xx".

Cuando ocurre una de esas situaciones en la actividad web de confianza, se produce una falla visible para el usuario de la aplicación para Android. Consulta la guía para controlar esas situaciones en tu service worker.

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

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

Herramientas

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

Plástico de burbujas

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

Para iniciar un proyecto nuevo, ejecuta la herramienta y pasa la URL del manifiesto web:

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

La herramienta también puede compilar el proyecto, y la ejecución del siguiente comando generará una aplicación para Android lista para subirse a Play Store:

npx @bubblewrap/cli build

Después de ejecutar este comando, habrá un archivo llamado app-release-signed.apk 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 sitios web existentes en apps web progresivas. También se integra con Bubblewrap para proporcionar una interfaz gráfica de usuario que permite empaquetar esas APW en una app para Android. El equipo de PWABuilder publicó una excelente entrada de blog sobre cómo generar una aplicación para Android con la herramienta.

Cómo verificar la propiedad de la PWA en la app para Android

Un desarrollador que crea una excelente app web progresiva no querría que otro desarrollador creara una app para Android con ella sin su permiso. Para garantizar 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.

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

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 más sencilla para encontrar la clave con la que se firmó el APK que se entrega a los usuarios finales es descargarlo desde Play Store.

Para evitar mostrar una aplicación dañada a los usuarios, implementa la aplicación en un canal de prueba cerrada, instálala en un dispositivo de prueba y, luego, usa la herramienta Asset Link de Peter 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 valida.

Próximos pasos

Una aplicación 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 estás comenzando a usar las apps web progresivas, lee nuestra guía para crear una AWP excelente. Si ya tienes una PWA, 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 PWA usando la herramienta Asset Link de Peter.

Por último, mueve tu aplicación del canal de pruebas cerradas a producción.