Skip to main content

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.