Navegación en la app con Web incorporada

Los navegadores integrados en la app brindan a los usuarios una experiencia web completa sin que tengan que salir de tu app. Android ofrece dos APIs principales para implementar navegadores integrados en la app: Custom Tabs y WebViews. Usa un navegador integrado en la app cuando tengas un vínculo o un anuncio que dirija a una página web. Puedes abrir esa página directamente en tu app, como se muestra en la Figura 1.

Un vínculo en la app dentro de un recuadro rojo y una flecha que apunta a otra pantalla en la que se muestra el vínculo abierto con una pestaña personalizada. — **Figura 1:** Haz clic en un vínculo integrado en la app (izquierda) y abre un navegador integrado en la app con una pestaña personalizada (derecha).

Elegir entre pestañas personalizadas y WebView es una decisión arquitectónica importante que afecta la velocidad de desarrollo, la experiencia del usuario y el control que tienes sobre la IU.

Comparación rápida

Usa la siguiente tabla para decidir qué herramienta se adapta mejor a tus necesidades:

Función	WebView	Pestañas personalizadas
Caso de uso principal	Crear apps híbridas con la Web como contenido principal o complementario, mostrar anuncios, realizar campañas integradas en la app o incluir páginas de condiciones del servicio	Mostrar contenido de sitios web externos (como artículos de noticias o páginas de productos)
Control de IU	Full. Es un componente `View` que puedes colocar en cualquier lugar. Controlas toda la IU circundante.	Limitada. Puedes aplicar un tema al color de la barra de herramientas y agregar algunas acciones personalizadas.
Datos y sesiones	Zona de pruebas No comparte cookies ni accesos con el navegador principal del usuario.	Compartido. Utiliza la sesión predeterminada del navegador del usuario, incluidas las cookies y las contraseñas guardadas.
Puente entre la Web y la app nativa	Sí. Puedes usar un puente de JavaScript para una comunicación bidireccional profunda entre el contenido web y el código de la app nativa.	Limitada. Puedes usar el método `window.postMessage()` para pasar cadenas básicas.
Esfuerzo del desarrollador	Alto. Debes administrar el ciclo de vida, la navegación y el rendimiento por tu cuenta.	Baja. Puedes implementarlo con solo unas pocas líneas de código.

WebView

Un WebView es una vista que hace que las páginas web sean una parte integral del diseño de tu app. Es potente, pero un poco más complejo de manejar en comparación con las pestañas personalizadas.

WebView puede cargar contenido web local o remoto, ejecutar JavaScript y habilitar la comunicación bidireccional entre tu contenido web y el código nativo de la app. Para obtener más información sobre sus capacidades, consulta Qué puede hacer WebView.

También puedes usar WebView para publicar una aplicación web o mostrar una página web en línea como parte de tu app. Por ejemplo, un acuerdo de usuario final que debes actualizar periódicamente. Para obtener más información, consulta Cómo crear apps web en WebView.

Por qué deberías elegir WebView

A continuación, se describen algunas situaciones en las que WebView es una buena opción:

Apps híbridas: Estás compilando una app en la que el contenido web y los componentes nativos (como una barra de navegación o un botón de acción flotante) se encuentran uno al lado del otro.
Contenido de origen: Tu contenido web es una parte interactiva y fundamental de la experiencia de la app, como un editor de documentos o un lienzo de diseño.
Control total de la IU: Debes modificar el contenido de la página web o superponer elementos de la IU nativa sobre ella.
Análisis detallado: Necesitas estadísticas detalladas sobre la participación y la actividad de los usuarios en la vista web.

Intercambios clave

A continuación, se indican algunas compensaciones clave que debes tener en cuenta cuando uses WebView:

Rendimiento: WebView puede consumir mucha memoria. Si no lo administras con cuidado, puedes tener problemas de rendimiento o errores de ANR (errores de la app que no responde).
Seguridad y mantenimiento: Eres responsable de reforzar la seguridad y administrar el ciclo de vida. Sin embargo, las actualizaciones de WebView se lanzan a nivel global a través de Google Play, por lo que no tienes que preocuparte por que el motor subyacente quede desactualizado.

Pestañas personalizadas

Las pestañas personalizadas son una excelente opción para dirigir a los usuarios a URLs externas, ya que proporcionan una ventana del navegador rápida, segura y fácil de usar que se desliza sobre tu app.

Por qué deberías elegir las pestañas personalizadas

A continuación, se describen algunas situaciones en las que las pestañas personalizadas son una buena opción:

Vínculos externos: Cuando un usuario presiona un vínculo a un sitio web que no es de tu propiedad, las pestañas personalizadas lo mantienen en el contexto de tu app y, al mismo tiempo, le brindan una experiencia completa de navegador.
Facilidad de integración: Es la forma más sencilla de poner en funcionamiento una experiencia web integrada.
Estado compartido: Debido a que comparte cookies con el navegador predeterminado del usuario, los usuarios no tienen que volver a acceder a los sitios que ya visitaron.
Acceso de terceros: Son adecuados para los flujos de acceso de terceros (como "Acceder con Google" o "Acceder con Facebook"), ya que el navegador controla las credenciales de forma segura.

Si bien la mayoría de los navegadores admiten las pestañas personalizadas, algunos ofrecen más opciones de personalización que otros. Para obtener más información, consulta Compatibilidad con navegadores.

Cómo usar contenido web en Jetpack Compose

Puedes usar tanto pestañas personalizadas como WebView cuando compilas con Jetpack Compose:

Pestañas personalizadas: Dado que las pestañas personalizadas usan un Intent, puedes iniciarlas desde cualquier Context en tus funciones de Compose, lo que permite una integración perfecta.
WebView: Compose aún no tiene un elemento componible de WebView nativo, por lo que deberás usar AndroidView para incorporar un WebView estándar en tu diseño.

Recursos adicionales

Para desarrollar páginas web para dispositivos con Android usando las APIs de WebView o de pestañas personalizadas, consulta los siguientes documentos: