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 en un cuadro rojo y una flecha que apunta a otra pantalla que 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 Custom Tabs y WebViews es una decisión de arquitectura importante que afecta la velocidad de desarrollo, la experiencia del usuario y el control que tienes sobre la IU.

Breve comparación

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 complementario, mostrar anuncios gráficos, campañas de aplicaciones 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. Tú 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. 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 profunda y bidireccional entre el contenido web y el código de la aplicación nativa. Limitada Puedes usar el método window.postMessage() para pasar cadenas básicas.
Esfuerzo del desarrollador Alta. 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 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 debas actualizar periódicamente. Para obtener más información, consulta Cómo compilar apps web en WebView.

Por qué deberías elegir WebView

A continuación, se incluyen 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) conviven.
  • Contenido propio: El contenido web es una parte interactiva y central de la experiencia en 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 detallados: Necesitas información detallada sobre la participación y la actividad de los usuarios en la vista web.

Compensaciones clave

A continuación, se indican algunas de las ventajas y desventajas 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 aplicación que no responde).
  • Seguridad y mantenimiento: Tienes la responsabilidad de reforzar la seguridad y administrar el ciclo de vida. Esto incluye administrar la preservación del estado en la recreación del proceso con WebViewCompat.saveState() y mantenerse dentro del límite de transacciones de estado guardado de 1 MB de Android. Sin embargo, las actualizaciones de WebView se lanzan a nivel global a través de Google Play, por lo que no tienes que preocuparte de 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 la app.

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

A continuación, se incluyen 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, proporcionan una experiencia de navegador completa.
  • Facilidad de integración: Es la forma más sencilla de poner en marcha una experiencia web incorporada.
  • Estado compartido: Como comparte cookies con el navegador predeterminado del usuario, este no tiene que volver a acceder a los sitios que ya visitó.
  • Acceso de terceros: Son ideales 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.

Aunque la mayoría de los navegadores admiten las pestañas personalizadas, algunos ofrecen más personalización que otros. Para obtener más información, consulta Navegadores compatibles.

Cómo usar contenido web en Jetpack Compose

Puedes usar tanto las pestañas personalizadas como 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 fluida.
  • WebView: Compose aún no tiene un elemento componible 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 con las APIs de WebViews o de pestañas personalizadas, consulta los siguientes documentos: