Usa contenido web en tu app para Android

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

Esto te permite integrar sin problemas 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 crear todo desde cero. Piensa en ella como una ventana a Internet desde tu app. Hay dos formas de incorporar contenido web en tu app:

  • WebView: Muestra contenido web que controlas de forma intercalada donde deseas un alto grado de flexibilidad para personalizar o actualizar la IU.
  • Custom Tabs: Una experiencia de navegación completa en la app con el navegador predeterminado del usuario (consulta la compatibilidad con navegadores) para cuando los usuarios hagan clic en un vínculo y quieras que permanezcan 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 muestran los esquemas de `WebView` (izquierda) y `Pestaña personalizada` (derecha).

¿Por qué incorporar contenido web?

Existen varios beneficios de incorporar contenido web en tu app:

  • Eficiencia: Reutiliza el código existente de tu sitio web. Se basa en tecnologías y contenido web existentes.
  • Integración: Usa contenido externo de proveedores externos, como medios y anuncios, en tu app.
  • Flexibilidad: Actualiza el contenido de forma dinámica sin estar limitado a las IU predefinidas ni tener que 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 complementario: Usa WebView

  • Mostrar tu propio contenido web intercalado como una experiencia principal cuando desees un alto grado de flexibilidad para personalizar o actualizar la IU
  • Mostrar otro contenido, como anuncios, condiciones y reglamentaciones legales, o cualquier otro contenido de terceros de forma intercalada o como una ventana dentro de la experiencia de la 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 objetos `WebView`como contenido principal (izquierda) y complementario (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 hagan clic en un vínculo y quieras que permanezcan en la app, en lugar de que salgan a un navegador externo.
    • Nota: En el caso de los dispositivos con pantallas grandes, como las tablets y los dispositivos plegables, hay opciones adicionales para ayudar a las apps a aprovechar el espacio adicional:
    • Las apps pueden abrir vínculos web en pantalla dividida con launch an adjacent multi-window experience. Esto permite que los usuarios realicen varias tareas a la vez entre tu app y un navegador. O
    • Custom Tabs tienen una opción de panel lateral que se puede abrir en la misma tarea, pero junto al contenido existente de la app.
  • Custom Tab se ejecuta con el navegador predeterminado del usuario, en el caso de los navegadores que admiten Custom Tabs.
    • Si bien es posible usar un WebView y brindar una experiencia de navegación en la app altamente personalizable, recomendamos Custom Tabs para una experiencia de navegación lista para usar y una transición fluida cuando un usuario quiera 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 en la app a la derecha.
Figura 3: Haz clic en un vínculo integrado en la app (izquierda) y abre un navegador integrado en la app (derecha).

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

El enfoque sugerido de Android es compilar tus flujos de acceso o autenticación con Credential Manager. Si crees que aún necesitas usar Embedded Web para estas experiencias, sigue estas recomendaciones:

  • 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 o a una experiencia de acceso de terceros, como "Acceder con…", Custom Tabs son la mejor opción. Iniciar un Custom Tab ayuda a proteger las credenciales del usuario, ya que las mantiene aisladas en el sitio de terceros.

Para obtener más información sobre el uso de WebViews para la autenticación, consulta Cómo autenticar usuarios con WebView. Para iniciar una 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. Un campo de acceso en la app (izquierda) y un acceso de terceros abierto en una `Pestaña personalizada` (derecha).