Cómo se pueden usar diferentes 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 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 incorporen su propio motor de navegador a 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 los elementos de la IU de Android o para empaquetar juegos HTML5. Las pestañas personalizadas permiten que los desarrolladores creen navegadores integrados en la app y proporcionen una experiencia de navegación fluida al contenido web de terceros, y la Actividad web de confianza permite que los desarrolladores usen 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 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 potenciar servicios de anuncios como AdMob hasta compilar y enviar 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 de los navegadores integrados en la app
Con el tiempo, cada vez más desarrolladores crearon experiencias de navegador 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 integrados en la app.
WebView tiene una amplia compatibilidad con la pila tecnológica 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 será 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 los navegadores integrados en la app ni para abrir apps 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 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 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 por parte de los usuarios.
Como 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 que no es de confianza. Para garantizar que el usuario permanezca seguro mientras navega por contenido que es potencialmente poco confiable o incluso malicioso, los navegadores actualizados 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 hacer que falle toda la app del navegador, o se puede 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 renderizador 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 renderizador se ejecuta en un proceso diferente. Sin embargo, todas las páginas y las instancias de WebView que las ejecutan siguen compartiendo un solo proceso, lo que hace imposible implementar por completo el aislamiento de sitios.
La falta de una arquitectura de varios procesos y de aislamiento de sitios no es un problema para las aplicaciones que renderizan contenido propio y de confianza, pero puede serlo para las aplicaciones que ejecutan contenido de terceros no confiable, como los navegadores integrados en la app, y deja a los usuarios expuestos a vulnerabilidades como Meltdown y Spectre, que podrían usarse para robar cookies, datos 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 esta área. Sin embargo, WebView carece de una API para verificar si la conexión de un sitio es segura, lo que permite que los desarrolladores de aplicaciones creen 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 en 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 requiere mucho tiempo.
Pestañas personalizadas como solución para los navegadores integrados en la app
Las pestañas personalizadas se introdujeron en Chrome 45 y permiten que los desarrolladores usen una pestaña del navegador predeterminado del usuario como parte de su aplicación. Originalmente, Chrome lanzó las pestañas personalizadas y, por lo tanto, 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 las 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 sin problemas el contenido web en la experiencia en la app. También permiten que los desarrolladores personalicen la actividad en la que se muestra el contenido web, ya que les permiten 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 basa en el 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 las WebViews, las pestañas personalizadas admiten todas las funciones y APIs de la plataforma web que admite el navegador que las potencia.
Cómo abrir apps web progresivas con la Actividad web de confianza
Las apps 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 al de las apps, aumentó el deseo de los desarrolladores de reutilizar esas experiencias en Android, y los desarrolladores comenzaron a pedir formas de integrar las AWP en sus apps.
Las pestañas personalizadas admiten todas las APIs y funciones 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 bloqueo que indica si el sitio es seguro. Cuando se abre la experiencia propia de una app, la barra de herramientas evita que la aplicación se sienta como si estuviera integrada en el sistema operativo.
Las actividades web de confianza se introdujeron en Chrome 72 y permiten que los desarrolladores usen su AWP dentro de una app para Android. Su protocolo es similar al de las pestañas personalizadas, pero presenta APIs que permiten que los desarrolladores verifiquen (a través de vínculos de recursos digitales) que controlan tanto la app para Android como la URL que se abre, y que quiten la barra de URL cuando ambas condiciones se cumplan.
También se introdujeron APIs para crear pantallas de presentación cuando se abre la AWP o se delegan las 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 Play.
Dado que se espera que las URLs que se abren en las actividades web de confianza sean AWP y tengan un conjunto de comportamientos y características de rendimiento, las actividades web de confianza presentan criterios de calidad para las AWP que se abren en ellas.
Limitaciones de las soluciones actuales
Los comentarios de los desarrolladores mostraron la necesidad de que la compatibilidad de la plataforma con las pestañas personalizadas se combinara con la flexibilidad de WebView para que pudieran, por ejemplo, acceder al DOM o insertar JavaScript en sus navegadores integrados en la app.
Las pestañas personalizadas son, en realidad, pestañas que renderiza el navegador del usuario, con una IU personalizada o sin IU. Esto significa que el navegador debe respetar las expectativas del usuario en cuanto a la privacidad y la seguridad del navegador, lo que hace que algunas de esas funciones sean imposibles.
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 dentro de su app para Android, pero no usa funciones y capacidades más avanzadas disponibles en la Web moderna, como las notificaciones push, Web Bluetooth 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 que pretendía el desarrollador. No se recomienda WebView para crear navegadores integrados en la app. Por otro lado, mostrar contenido web propio es un área en la que las WebViews realmente se destacan.
La Actividad web de confianza se debe usar cuando los desarrolladores quieren renderizar su propia app web progresiva en pantalla completa dentro de su aplicación para Android. Se puede usar 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 conocido como navegadores integrados en la app.