Cómo se pueden usar diferentes componentes para renderizar contenido web dentro de las aplicaciones de Android.
Actualizado
La plataforma Android ha existido por más de diez años y desde sus inicios ha tenido un gran soporte para la Web. Se envió con WebView, un componente que permite a los desarrolladores usar la web dentro de sus propias aplicaciones de Android. Más que eso, Android permite a los desarrolladores traer su propio motor de navegador a la plataforma, fomentando la competencia y la innovación.
Los desarrolladores pueden incluir la web en sus aplicaciones de Android de muchas formas. WebView se usa con frecuencia para representar anuncios, como un componente de diseño que se usa junto con elementos nativos de la interfaz de usuario o para empaquetar juegos HTML 5. Las pestañas personalizadas permiten a los desarrolladores crear navegadores en la aplicación y proporcionar una experiencia de navegación perfecta para el contenido web de terceros, y Trusted Web Activity permite a los desarrolladores usar sus aplicaciones web progresivas (PWA) en aplicaciones de 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 aplicaciones de 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 utilizar para la mayoría de los casos de uso en los que se incluye contenido web en una aplicación de Android. Desde impulsar servicios publicitarios como AdMob hasta crear y enviar juegos HTML5 completos que utilizan API modernas como WebGL.
Pero, cuando se usa para crear un navegador en la aplicación o para incluir una PWA en una aplicación de Android, WebView carece de la seguridad, las características y las capacidades de la plataforma web.
El desafío del navegador en la aplicación
Con el tiempo, más y más desarrolladores han creado experiencias de navegador incorporando contenido de terceros en su aplicación de 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 aplicación.
WebView tiene un amplio soporte para la pila de tecnología web moderna y es compatible con muchas API web modernas, como WebGL. Pero WebView es principalmente un conjunto de herramientas de interfaz de usuario web. Eso
no está destinado a, y no es compatible, con todas las funciones de la plataforma web. Cuando una API ya tiene una alternativa nativa, como Web Bluetoooth, o requiere que se implemente la interfaz de usuario del navegador, como notificaciones push, es posible que no sea compatible. A medida que la plataforma web evoluciona y agrega más funciones que solo estaban disponibles para aplicaciones nativas, esta brecha se hará aún mayor. Como los desarrolladores de aplicaciones no controlan qué funciones se utilizan al abrir contenido de terceros, WebView es una mala elección para los navegadores integrados en aplicaciones o para abrir aplicaciones web progresivas. Incluso si WebView implementara soporte para todas las características de la plataforma web, los desarrolladores aún necesitarían escribir código e implementar su propia interfaz de usuario para funcionalidades como permisos o notificaciones push, lo que dificulta la coherencia para los usuarios.
Otra opción disponible para los desarrolladores es incrustar un motor de navegador en su aplicación. Además de conducir a un mayor tamaño de la aplicación, este enfoque es complejo y requiere mucho tiempo.
Pestañas personalizadas como solución para navegadores integrados en aplicaciones
Pestañas personalizadas era introducido en Chrome 45 y permite a los desarrolladores utilizar una pestaña del navegador predeterminado del usuario como parte de su aplicación. Las pestañas personalizadas fueron lanzadas originalmente por Chrome y, por lo tanto, se conocían como «pestañas personalizadas de Chrome». Hoy es un API de Android y los navegadores más populares admiten pestañas personalizadas, incluidos Chrome, Firefox, Edge y Samsung Internet, por lo que es más apropiado llamarlo simplemente «pestañas personalizadas».
Las pestañas personalizadas ayudan a los desarrolladores a integrar sin problemas el contenido web en la experiencia de su aplicación. También permiten a los desarrolladores personalizar la actividad en la que se muestra el contenido web al permitirles personalizar el color de la barra de herramientas, los botones de acción, la animación de transición y más.
También ofrecen funciones que antes no estaban disponibles al usar WebView o al incorporar un motor de navegador. Dado que el navegador de la aplicación funciona con el navegador del usuario, las pestañas personalizadas comparten el almacenamiento con el navegador, por lo que los usuarios no necesitan volver a iniciar sesión en sus sitios web favoritos cada vez que una de sus aplicaciones instaladas inicia una sesión de navegación en la aplicación.
A diferencia de WebViews, Custom Tabs es compatible con todas las funciones de la plataforma web y las API que son compatibles con el navegador que lo alimenta.
Abra aplicaciones web progresivas mediante la actividad web confiable
Las aplicaciones web progresivas traen muchos comportamientos y capacidades que antes solo estaban disponibles para las aplicaciones nativas en la web. Con la introducción del comportamiento similar a una aplicación, aumentó el deseo de los desarrolladores de reutilizar esas experiencias en Android, y los desarrolladores empezaron a pedir formas de integrar las PWA en sus aplicaciones.
Custom Tabs tiene soporte para todas las capacidades web modernas y API pero, dado que fue diseñado principalmente para abrir contenido de terceros, tiene una barra de herramientas en la parte superior que les dice a los usuarios qué URL están visitando, así como el ícono de candado que indica si el sitio es seguro. Al abrir la propia experiencia de una aplicación, la barra de herramientas evita que la aplicación se sienta como si estuviera integrada con el sistema operativo.
Actividades web de confianza se introdujo en Chrome 72 y permite a los desarrolladores usar su PWA dentro de una aplicación de Android. Su protocolo es similar al protocolo de pestañas personalizadas, pero introduce API que permiten a los desarrolladores verificar (a través de Enlaces de activos digitales) que controlan tanto la aplicación de Android como la URL que se abre y eliminan la barra de URL cuando ambas son verdaderas.
También introdujeron API para crear pantallas de presentación al abrir la PWA o delegar notificaciones web para que sean manejadas por código nativo. Pronto estarán disponibles más funciones, como la compatibilidad con Play Billing.
Dado que se espera que las URL abiertas en Trusted Web Activities sean PWA y tengan un conjunto de comportamientos y características de rendimiento, Trusted Web Activities introduce criterios de calidad para las PWA que se abren en su interior.
Limitaciones de las soluciones actuales
Los comentarios de los desarrolladores mostraron la necesidad de compatibilidad con la plataforma de las pestañas personalizadas combinadas con la flexibilidad de WebView para que pudieran, por ejemplo, acceder al DOM o inyectar JavaScript en sus navegadores dentro de la aplicación.
Pestañas personalizadas es efectivamente una pestaña representada por el navegador del usuario, con una interfaz de usuario personalizada o sin ninguna interfaz de usuario. Esto significa que el navegador debe cumplir con las expectativas del usuario en cuanto a privacidad y seguridad hacia el navegador, lo que hace que algunas de esas funciones sean imposibles.
El equipo de Web on Android en Google está buscando alternativas y experimentando con soluciones para resolver esos casos de uso. ¡Estén atentos para más detalles!
Resumen
WebView es útil cuando una aplicación necesita HTML, CSS y JavaScript dentro de su aplicación de Android, pero no utiliza funciones y capacidades más avanzadas disponibles en la web moderna, como notificaciones push, Web Bluetooth y otras. No se recomienda al abrir contenido que ha sido 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 WebView para crear navegadores integrados en aplicaciones. Por otro lado, mostrar contenido web de primera persona es un área donde los WebViews realmente brillan.
La actividad web de confianza debe usarse cuando los desarrolladores quieran renderizar su propia aplicación web progresiva en pantalla completa dentro de su aplicación de Android. Puede usarse como la única actividad en la aplicación o usarse junto con otras actividades nativas.
Las pestañas personalizadas es la forma recomendada para abrir contenido de terceros diseñado para la plataforma web, también conocidos como navegadores en la aplicación.