Usa contenido web en tu app para Android

Android te permite aprovechar el poder de la Web en tus apps. Por lo tanto, 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, instructivos interactivos, anuncios gráficos o, incluso, alojar un minijuego sin tener que compilar todo desde cero. Piensa en ella como una ventana a Internet desde tu app. Existen dos maneras de incorporar contenido web en tu app:

• WebView: Muestra el contenido web que controlas de forma intercalada cuando quieres un alto grado de flexibilidad para personalizar o actualizar la IU.
• Custom Tabs: Es una experiencia de navegación completa en la app con la tecnología del navegador predeterminado del usuario (consulta la compatibilidad con navegadores) para cuando los usuarios hacen clic en un vínculo y quieres mantenerlos en la app, en lugar de salir a un navegador externo, con gran parte de la experiencia de navegación lista para usar.

Figura 1. Se destacan `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. Se basan en tecnologías y contenido web existentes.
• Integración: Usa contenido externo de proveedores externos, como contenido multimedia y anuncios, en tu app.
• Flexibilidad: Actualiza el contenido de forma dinámica sin limitarte a las IU 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 complementario: Usa WebView.

• Mostrar tu propio contenido web intercalado como una experiencia principal en la que quieras un alto grado de flexibilidad para personalizar o actualizar la IU
• Mostrar otro contenido, como anuncios, términos y reglamentaciones legales, o cualquier otro contenido de terceros intercalado o como una ventana dentro de la experiencia en la app

Figura 2. Contenido web incorporado en la app con `WebView`como contenido principal (izquierda) y complementario (derecha).

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

• Ofrecer una experiencia de navegación completa con el navegador integrado en la app para cuando los usuarios hagan clic en un vínculo y quieras que permanezcan en la app, en lugar de salir a un navegador externo
  • Nota: En el caso de los dispositivos con pantallas grandes, como tablets y 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 la opción 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 tienen una opción de panel lateral que se puede abrir en la misma tarea, pero junto al contenido de la app existente.
• La Custom Tab se basa en el navegador predeterminado del usuario, para los navegadores que admiten Custom Tabs.
  • Si bien es posible usar un WebView y proporcionar una experiencia de navegación integrada en la app altamente personalizable, recomendamos Custom Tabs para una experiencia de navegador lista para usar y una transición fluida cuando un usuario quiera abrir un vínculo web en el navegador.

Figura 3. Hacer clic en un vínculo en la app (izquierda) y abrir un navegador integrado en la app (derecha).

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

El enfoque sugerido por Android es compilar tus flujos de acceso o autenticación con el Administrador de credenciales. Si descubres que aún necesitas usar la Web incorporada para estas experiencias, sigue estas indicaciones:

• Algunas apps usan WebView 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 de 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 una experiencia de acceso de terceros, como "Acceder con…", las Custom Tabs son la mejor opción. Iniciar una Custom Tab ayuda a proteger la credencial del usuario, ya que la mantiene aislada del sitio de terceros.

Para obtener más información sobre el uso de WebView 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.

Figura 4. Un campo de acceso en la app (izquierda) y un acceso de terceros abierto en una "pestaña personalizada" (derecha).