Cómo se pueden usar diferentes componentes para renderizar contenido web en apps para Android
La plataforma de Android existe desde hace más de diez años y, desde sus inicios, ha tenido una gran compatibilidad 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 incluyan 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. WebView se usa con frecuencia 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 compilar navegadores integrados en la app y proporcionar una experiencia de navegación fluida al contenido web de terceros, y la actividad web confiable 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 les brinda a los desarrolladores acceso a HTML, CSS y JavaScript modernos dentro de 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 para la mayoría de los casos de uso en los que se incluye contenido web en una app para Android. Desde la potenciación de servicios de anuncios como AdMob hasta la compilación y el envío de juegos HTML5 completos que usan APIs modernas, como WebGL.
Sin embargo, cuando se usa para crear un navegador integrado en la app o incluir una AWP en una aplicación para Android, WebView carece de la seguridad, las funciones y las capacidades de la plataforma web.
El desafío del navegador integrado en la app
Con el tiempo, cada vez más desarrolladores crearon experiencias de navegadores que incorporan contenido de terceros en su aplicación para Android, con el objetivo de crear una experiencia más fluida para 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 de tecnología web moderna y admite muchas APIs web modernas, como WebGL. Sin embargo, WebView es principalmente un kit de herramientas de IU web. No está diseñado para admitir todas las funciones de la plataforma web ni lo hace. Cuando una API ya tiene una alternativa a nivel del SO, como Web Bluetooth, o requiere que se implemente la IU del navegador, como las 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 hará aún mayor. Como los desarrolladores de apps no controlan qué funciones se usan cuando se abre contenido de terceros, WebView no es una buena opción para navegadores integrados en la app ni para abrir aplicaciones web progresivas. Incluso si WebView implementara la compatibilidad con todas las funciones de la plataforma web, los desarrolladores aún tendrían que escribir código e implementar su propia IU para funciones como permisos o notificaciones push, lo que dificulta 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 de incorporación acceso completo al contenido renderizado, incluidas las cookies y el DOM. Estas son funciones potentes que requieren un alto nivel de confianza de los usuarios.
Dado que WebView no está diseñado como un framework para compilar navegadores, carece de las 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 mientras renderizan y ejecutan contenido no confiable. Para garantizar que el usuario esté protegido mientras navega por contenido que puede ser poco confiable o incluso malicioso, los navegadores modernos emplean técnicas como el uso de arquitectura de varios procesos y aislamiento de sitios.
Sin la arquitectura de varios procesos, una falla causada por la página web puede hacer que falle toda la app del navegador o que se aproveche 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 o la roben.
Hasta Android 8.0 Oreo, el renderizador de WebView usaba el mismo proceso que la aplicación de incorporación. En versiones más recientes del SO y cuando los dispositivos son lo suficientemente capaces, el renderizador 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 imposible implementar por completo el aislamiento de sitios.
La falta de una arquitectura de varios procesos y el aislamiento de sitios no es un problema para las aplicaciones que renderizan contenido propio y de confianza, pero puede ser un problema para las aplicaciones que ejecutan contenido de terceros no confiable, como navegadores integrados en la app, 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 se esfuerzan mucho y siempre evolucionan en este área. Sin embargo, WebView carece de una API para verificar si la conexión de un sitio es segura, lo que permite a los desarrolladores de aplicaciones crear indicadores de seguridad confiables. La falta de una API de este tipo podría provocar, 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 a través de conexiones HTTPS seguras.
Otra opción disponible para los desarrolladores es incorporar un motor de navegador en su aplicación. Además de aumentar el tamaño de la aplicación, este enfoque es complejo y lleva 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 que los desarrolladores usen una pestaña del navegador predeterminado del usuario como parte de su aplicación. Chrome lanzó originalmente las pestañas personalizadas, por lo que se las conocía como "pestañas personalizadas de Chrome". Hoy en día, es una API de Android y la mayoría de los navegadores populares admiten Pestañas personalizadas, incluidos Chrome, Firefox, Edge y Samsung Internet, por lo que es más apropiado llamarlas simplemente "Pestañas personalizadas".
Las pestañas personalizadas ayudan a los desarrolladores a integrar el contenido web en la experiencia de su app sin inconvenientes. También permiten a los desarrolladores personalizar la actividad en la que se muestra el contenido web, ya que les permite 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 se incorporaba un motor de navegador. Dado que el navegador integrado en la app se alimenta del navegador del usuario, las pestañas personalizadas comparten el almacenamiento con el navegador, por lo 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 integrada en la app.
A diferencia de WebView, las pestañas personalizadas admiten todas las funciones y APIs de la plataforma web que admite el navegador que las impulsa.
Cómo abrir apps web progresivas con la Actividad web de confianza
Las aplicaciones web progresivas aportan a la Web muchos comportamientos y capacidades que antes solo estaban disponibles para las apps específicas de la plataforma. Con la introducción del comportamiento similar a una app, aumentó el deseo de los desarrolladores de volver a usar esas experiencias en Android, y comenzaron a preguntar por formas de integrar las AWP en sus apps.
Las pestañas personalizadas admiten todas las funciones y APIs web modernas, pero, como se diseñaron principalmente para abrir contenido de terceros, tienen una barra de herramientas en la parte superior que les indica a los usuarios qué URL están visitando, así como el ícono de candado que indica si el sitio es seguro. Cuando se abre la experiencia de una app, la barra de herramientas evita que la aplicación se sienta integrada en el sistema operativo.
Las Actividades web de confianza se introdujeron en Chrome 72 y permiten 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 controlan tanto la app para Android como la URL que se abre, y quitar la barra de URL cuando ambas condiciones sean verdaderas.
También se introdujeron 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 agregarán más funciones, como la compatibilidad con la Facturación Google 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 en ella.
Limitaciones de las soluciones actuales
Los comentarios de los desarrolladores mostraron la necesidad de la compatibilidad de la plataforma de las pestañas personalizadas combinada con la flexibilidad de WebView para que, por ejemplo, pudieran acceder al DOM o insertar JavaScript en sus navegadores integrados en la app.
Las pestañas personalizadas son, en realidad, una pestaña que renderiza el navegador del usuario, con una IU personalizada o sin IU. Esto significa que el navegador debe cumplir con las expectativas del usuario en cuanto a la privacidad y la seguridad, lo que hace que algunas de esas funciones sean imposibles.
El equipo de Web en Android de Google está analizando 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 dentro de 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 diseñado para la plataforma web moderna, ya que es posible que no se muestre de la manera que el desarrollador pretendía. 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 las WebViews realmente brillan.
Se debe usar la actividad web de confianza cuando los desarrolladores quieran renderizar su propia app web progresiva en pantalla completa dentro de su aplicación para Android. Se puede usar como la única actividad de 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 conocido como navegadores integrados en la app.