Cómo se pueden usar los distintos componentes para renderizar contenido web dentro de apps para Android
La plataforma de Android existe desde hace más de diez años y, desde sus inicios, ha tenido un gran apoyo con la Web. Se envió con WebView, un componente que permite a los desarrolladores usar la Web dentro de sus propias apps para Android. Además, Android permite que los desarrolladores incorporen su propio motor de navegador en la plataforma, lo que fomenta la competencia y la innovación.
Los desarrolladores pueden incluir la Web en sus aplicaciones para Android de muchas maneras. Con frecuencia, WebView se usa para renderizar anuncios, como un componente de diseño que se usa junto con elementos de la IU de Android o para empaquetar juegos HTML 5. Las pestañas personalizadas permiten a los desarrolladores crear navegadores integrados en la app y brindar una experiencia de navegación fluida al contenido web de terceros, y Trusted Web Activity permite a los desarrolladores usar sus apps web progresivas (AWP) en apps para Android, que se pueden descargar desde Play Store.
WebView de Android
WebView brinda a los desarrolladores acceso a HTML, CSS y JavaScript modernos en sus apps para Android, y permite que el contenido se envíe dentro del APK o se aloje en Internet. Es uno de los componentes más flexibles y potentes de Android, que se puede usar en la mayoría de los casos prácticos en los que el contenido web se incluye en una app para Android. Desde la tecnología de servicios de anuncios, como AdMob, hasta la creación y el envío de juegos HTML5 completos con APIs modernas, como WebGL.
Sin embargo, cuando se usa para crear un navegador integrado en la app o incluye una AWP en una aplicación para Android, WebView carece de la seguridad, las funciones y las capacidades de la plataforma web.
Desafío de los navegadores en la app
Con el tiempo, cada vez más desarrolladores crearon experiencias de navegador que incorporan contenido de terceros a sus aplicaciones para Android, con el objetivo de brindar una experiencia más fluida a sus usuarios cuando navegan a sitios web de terceros. Esas experiencias se conocieron como navegadores en la app.
WebView tiene una amplia compatibilidad con la pila tecnológica web moderna y es compatible con muchas APIs web modernas, como WebGL. Sin embargo, WebView es principalmente un kit de herramientas de IU web. No pretende ni es compatible con todas las funciones de la plataforma web. Cuando una API ya tiene una alternativa a nivel del SO, como Web Bluetooth, o requiere que se implemente la IU del navegador, como notificaciones push, es posible que no sea compatible. A medida que la plataforma web evolucione y agregue más funciones que solo estaban disponibles para las apps para Android, esta brecha se ampliará aún más. Dado que los desarrolladores de apps no controlan qué funciones se usan cuando abren contenido de terceros, WebView no resulta una buena opción para los navegadores integrados en la app o para abrir apps web progresivas. Incluso si WebView implementó la compatibilidad con todas las funciones de la plataforma web, los desarrolladores tendrían que escribir código e implementar su propia IU para funcionalidades como los permisos o las notificaciones push, lo que dificultaría lograr la coherencia para los usuarios.
Consideraciones de seguridad para usar WebView como navegador integrado en la app
WebView le otorga a la aplicación incorporada acceso completo al contenido renderizado, incluidas las cookies y el DOM. Esas son funciones potentes que requieren un alto nivel de confianza de los usuarios.
Dado que WebView no está diseñado como framework para compilar navegadores, carece de funciones de seguridad disponibles en los navegadores modernos.
Arquitectura de varios procesos y aislamiento de sitios
Los navegadores están diseñados para ser seguros al procesar y ejecutar contenido no confiable. Para garantizar que el usuario se mantenga seguro mientras navega por contenido que es potencialmente poco confiable o incluso malicioso, los navegadores modernos emplean técnicas como el uso de una arquitectura de varios procesos y el aislamiento de sitios.
Sin la arquitectura de varios procesos, una falla causada por la página web puede provocar fallas en toda la app del navegador o aprovechar una vulnerabilidad para tomar el control de todo el dispositivo. El aislamiento de sitios agrega otra capa de seguridad que dificulta que los sitios no confiables accedan a información de otros sitios y la roben.
Hasta Android 8.0 Oreo, el procesador de WebView usaba el mismo proceso que la aplicación de incorporación. En las versiones más recientes del SO y cuando los dispositivos tienen la capacidad suficiente, el procesador se ejecuta en un proceso diferente. Sin embargo, se sigue compartiendo un solo proceso entre todas las páginas y las instancias de WebView que las ejecutan, lo que hace que sea imposible implementar por completo el aislamiento de sitios.
La falta de una arquitectura multiprocesos y el aislamiento de sitios no es un problema para las aplicaciones que procesan contenido que les pertenece y en el que confías, pero puede ser un problema para las aplicaciones que ejecutan contenido de terceros que no es de confianza, como los navegadores integrados, y deja a los usuarios expuestos a vulnerabilidades como Meltdown y Spectre, que podrían usarse para robar cookies, detalles bancarios, información personal y mucho más.
Indicadores de IU seguros
También es importante proporcionar buenos indicadores de seguridad a los usuarios, y los navegadores ponen mucho esfuerzo y evolucionan constantemente en esta área. Sin embargo, WebView carece de una API para verificar si la conexión de un sitio es segura que permita a los desarrolladores de aplicaciones crear indicadores de seguridad confiables. La falta de una API de este tipo podría causar, por ejemplo, que una URL que se muestra en la barra de direcciones no coincida con la página que se muestra al usuario, incluso con conexiones HTTPS seguras.
Otra opción disponible para los desarrolladores es incorporar un motor de navegador en sus aplicaciones. Además de aumentar el tamaño de la aplicación, este enfoque es complejo y consume mucho tiempo.
Pestañas personalizadas como solución para navegadores integrados en la app
Las pestañas personalizadas se presentaron en Chrome 45 y permiten a los desarrolladores usar una pestaña del navegador predeterminado del usuario como parte de su aplicación. Las pestañas personalizadas se lanzaron originalmente en Chrome y, por lo tanto, se las conocía como "Pestañas personalizadas de Chrome". Hoy en día, es una API de Android y los navegadores más populares admiten pestañas personalizadas, como Chrome, Firefox, Edge y Samsung Internet, por lo que es más apropiado llamarla "pestañas personalizadas".
Las pestañas personalizadas ayudan a los desarrolladores a integrar perfectamente el contenido web en la experiencia de sus aplicaciones. También permiten que los desarrolladores personalicen la actividad en la que se muestra el contenido web. Para ello, pueden personalizar el color de la barra de herramientas, los botones de acción, la animación de transición y mucho más.
También ofrecen funciones que antes no estaban disponibles cuando se usaba WebView o incorporabas un motor de navegador. Como el navegador de la app funciona con el navegador del usuario, las pestañas personalizadas comparten almacenamiento con este, de modo que los usuarios no necesitan volver a acceder a sus sitios web favoritos cada vez que una de sus apps instaladas inicia una sesión de navegación en la app.
A diferencia de los componentes WebView, las pestañas personalizadas admiten todas las funciones y las APIs de la plataforma web compatibles con el navegador que la impulsa.
Cómo abrir apps web progresivas con Trusted Web Activity
Las apps web progresivas aportan a la Web muchos comportamientos y capacidades que antes solo estaban disponibles para apps específicas de la plataforma. Con la introducción del comportamiento similar a las apps, aumentó el deseo de los desarrolladores de reutilizar esas experiencias en Android, y los desarrolladores comenzaron a solicitar formas de integrar AWP en sus apps.
Las pestañas personalizadas admiten todas las APIs y las capacidades web modernas, pero, como se diseñaron principalmente para abrir contenido de terceros, tiene una barra de herramientas en la parte superior que indica a los usuarios la URL que están visitando y un ícono de bloqueo que indica si el sitio es seguro. Cuando se abre la experiencia de una app, la barra de herramientas evita que la aplicación sienta que está integrada en el sistema operativo.
Actividades web de confianza se introdujo en Chrome 72 y permite a los desarrolladores usar su AWP dentro de una app para Android. Su protocolo es similar al protocolo de pestañas personalizadas, pero presenta APIs que permiten a los desarrolladores verificar (a través de Vínculos de recursos digitales) que controlen tanto la app para Android como la URL que se abren, y que quiten la barra de URL cuando ambos sean verdaderos.
También agregaron APIs para crear pantallas de presentación cuando se abre la AWP o se delegan notificaciones web para que las controle el código de Android. Pronto se incorporarán más funciones, como la compatibilidad con la Facturación Play.
Dado que se espera que las URLs que se abren en Trusted Web Activities sean AWP y tengan un conjunto de comportamientos y características de rendimiento, Trusted Web Activities presenta criterios de calidad para las AWP que se abren dentro de ellas.
Limitaciones de las soluciones actuales
Los comentarios de los desarrolladores mostraron la necesidad de la compatibilidad de la plataforma de las pestañas personalizadas junto con la flexibilidad de WebView para que pudieran, por ejemplo, acceder al DOM o insertar JavaScript en los navegadores integrados en la app.
De hecho, las pestañas personalizadas son una pestaña que renderiza el navegador del usuario, con una IU personalizada o sin ninguna. Esto significa que el navegador debe cumplir con las expectativas del usuario en cuanto a la privacidad y la seguridad del navegador, lo que imposibilita algunas de esas funciones.
El equipo de Web en Android de Google está buscando alternativas y experimentando con soluciones para resolver esos casos de uso. No te pierdas los detalles.
Resumen
WebView es útil cuando una aplicación necesita HTML, CSS y JavaScript en su app para Android, pero no usa funciones y capacidades más avanzadas disponibles en la Web moderna, como notificaciones push, Bluetooth web y otras. No se recomienda cuando se abre contenido que se diseñó para la plataforma web moderna, ya que es posible que no se muestre de la manera prevista por el desarrollador. No se recomienda usar WebView para crear navegadores integrados en la app. Por otro lado, mostrar contenido web propio es un área en la que realmente se destacan los WebView.
La actividad web de confianza debe usarse cuando los desarrolladores quieren renderizar su propia app web progresiva en pantalla completa dentro de su aplicación para Android. Puede usarse como la única actividad en la app o junto con otras actividades de Android.
Las pestañas personalizadas son la forma recomendada de abrir contenido de terceros diseñado para la plataforma web, también conocidos como navegadores integrados en la app.