Usa contenido web en tu app para Android

Android te permite aprovechar el poder de la Web en tus apps. De esta manera, puedes beneficiarte de la flexibilidad y la eficiencia de poder mostrar ciertos tipos de contenido.

Esto te permite integrar sin problemas el contenido web existente en tu app para Android, por ejemplo, para mostrar un feed de noticias, mostrar instructivos interactivos, mostrar anuncios o incluso alojar un minijuego sin tener que compilar todo desde cero. Imagina que es una ventana a Internet desde tu app. Hay dos formas de incorporar contenido web en tu app:

  • WebView: Muestra el contenido web que controlas en línea donde deseas un alto grado de flexibilidad para personalizar o actualizar la IU.
  • Custom Tabs: Es una experiencia de navegación completa en la app con tecnología del navegador predeterminado del usuario (consulta la compatibilidad con navegadores) para cuando los usuarios hacen clic en un vínculo y deseas mantenerlos en la app, en lugar de que salgan a un navegador externo, con gran parte de la experiencia de navegación lista para usar.
App para Android abierta en Google Play, con la vista web principal destacada. Pestaña personalizada abierta en la página web de Android for Developers, destacada.
Figura 1. Se muestra `WebView` (izquierda) y `Custom Tab` (derecha).

¿Por qué incorporar contenido web?

Incorporar contenido web en tu app tiene varios beneficios:

  • Eficiencia: Reutiliza el código existente de tu sitio web. Aprovecha las tecnologías y el contenido web existentes.
  • Integración: Usa contenido externo de proveedores externos, como contenido multimedia y anuncios, dentro de tu app.
  • Flexibilidad: Actualiza el contenido de forma dinámica sin estar limitado a IUs predefinidas ni lanzar actualizaciones de la app.

¿Cuándo usar contenido web?

Existen tres casos de uso principales para usar la Web en tu app para Android:

1. Incorporar contenido web en tu app como contenido principal o de apoyo: Usa WebView

  • Muestra tu propio contenido web en línea como una experiencia principal en la que deseas un alto grado de flexibilidad para personalizar o actualizar la IU.
  • Muestra otro contenido, como anuncios, condiciones legales y reglamentaciones, o contenido de terceros en línea, o como una ventana dentro de la experiencia de tu app.
App para Android abierta en Google Play, con la vista web principal destacada en un cuadro rojo App para Android abierta con texto de asistencia dentro de un cuadro rojo.
Figura 2. Contenido web incorporado en la app con `WebView`s como contenido principal (izquierda) y de apoyo (derecha).

2. Navegación en la app con Custom Tabs o WebView para casos de uso más avanzados

  • Ofrece una experiencia de navegación completa en la app para cuando los usuarios hacen clic en un vínculo y deseas mantenerlos en la app, en lugar de que salgan a un navegador externo.
    • Nota: Para dispositivos de pantalla grande, como tablets y dispositivos plegables, existen opciones adicionales para ayudar a las apps a aprovechar el espacio adicional:
    • Las apps pueden abrir vínculos web en pantalla dividida con launch para iniciar una experiencia de Multiventana adyacente. Esto permite que los usuarios realicen varias tareas a la vez entre tu app y un navegador. O
    • Custom Tabs tiene una opción de panel lateral que se puede abrir en la misma tarea, pero junto al contenido existente de tu app.
  • El Custom Tab funciona con el navegador predeterminado del usuario, para los navegadores que admiten Custom Tabs.
    • Si bien es posible usar una WebView y proporcionar una experiencia de navegación en la app altamente personalizable, recomendamos Custom Tabs para una experiencia de navegador lista para usar y una transición fluida para cuando un usuario desea abrir un vínculo web en el navegador.
Página web con un vínculo en la app dentro de un recuadro rojo a la izquierda y un navegador integrado en la app a la derecha.
Figura 3. Se muestra un clic en un vínculo en la app (izquierda) y la apertura de un navegador integrado en la app (derecha).

3. Flujos de acceso o autenticación dentro de tu app

El enfoque sugerido de Android es compilar tus flujos de acceso o autenticación con Credential Manager. Si descubres que aún necesitas usar la Web incorporada para estas experiencias, usa las siguientes instrucciones:

  • Algunas apps usan WebViews para proporcionar flujos de acceso a sus usuarios, incluido el uso de un nombre de usuario y una llave de acceso (o contraseña) específicos para tu app. Esto permite que los desarrolladores unifiquen los flujos de autenticación en todas las plataformas.
  • Cuando se vincula a un proveedor de identidad externo o a una experiencia de acceso, como "Acceder con…", Custom Tabs es la mejor opción. Iniciar una Custom Tab ayuda a proteger la credencial del usuario, ya que la mantiene aislada del sitio externo.

Para obtener más información sobre el uso de WebViews para la autenticación, consulta Cómo autenticar usuarios con WebView. Para iniciar un Custom Tab, consulta Descripción general de las pestañas personalizadas de Android.

Campo de acceso en la app con WebView a la izquierda. Acceso de terceros con pestaña personalizada a la derecha.
Figura 4. Se muestra un campo de acceso en la app (izquierda) y un acceso externo abierto en una `Custom Tab` (derecha).