Navegación en la app con Web incorporada

Los navegadores integrados en la app les brindan a los usuarios una experiencia web completa sin que tengan que salir de la app. Android ofrece dos APIs principales para implementar navegadores integrados en la app: Pestañas personalizadas 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.** Se muestra cómo hacer clic en un vínculo integrado en la app (izquierda) y abrir un navegador integrado en la app con una pestaña personalizada (derecha).

Elegir entre pestañas personalizadas y WebViews 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 a tus necesidades:

Función	WebView	Pestañas personalizadas
Caso de uso principal	Crear apps híbridas con la Web como contenido principal o de apoyo, mostrar anuncios, campañas integradas en la app o páginas de Condiciones del Servicio	Mostrar contenido de sitios web externos (como artículos de noticias o páginas de productos)
Control de la IU	Completo. Es un componente `View` que puedes colocar en cualquier lugar. Controlas toda la IU circundante.	Limitado. Puedes aplicar un tema al color de la barra de herramientas y agregar algunas acciones personalizadas.
Datos y sesiones	En espacio aislado. No comparte cookies ni accesos con el navegador principal del usuario.	Compartidos. Usa la sesión del navegador predeterminado del usuario, incluidas las cookies y las contraseñas guardadas.
Puente nativo <-> web	Sí. Puedes usar un puente de JavaScript para una comunicación bidireccional y profunda entre el contenido web y el código de la aplicación nativa.	Limitado. 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.	Bajo. Puedes implementarlo con solo algunas 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 es un poco más complejo de manejar en comparación con las pestañas personalizadas.

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

También puedes usar WebView para entregar 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 aplicaciones web en WebView.

Por qué elegir WebView

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

Apps híbridas: Estás creando 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 en la app, como un editor de documentos o un lienzo de diseño.
Controles de la IU completos: Necesitas modificar el contenido de la página web o superponer elementos de la IU nativos sobre ella.
Análisis detallado: Necesitas información detallada sobre la participación y la actividad de los usuarios en la vista web.

Compensaciones clave

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

Rendimiento: WebView puede consumir mucha memoria. Si no lo administras con cuidado, puedes tener problemas de rendimiento o ANRs (errores de la app que no responde).
Seguridad y mantenimiento: Eres responsable del endurecimiento de la seguridad y de administrar el ciclo de vida. Sin embargo, las actualizaciones de WebView se implementan de forma 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é elegir 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 del navegador.
Facilidad de integración: Es la forma más sencilla de poner en funcionamiento una experiencia web incorporada.
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 adecuadas para 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 pestañas personalizadas, algunos ofrecen más personalización que otros. Para obtener más información, consulta Compatibilidad con navegadores.

Usa contenido web en Jetpack Compose

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

Pestañas personalizadas: Como 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 destinadas a dispositivos con Android usando las APIs de WebViews o de pestañas personalizadas, consulta los siguientes documentos: