Usa contenido web en tu app para Android

Android te permite, como desarrollador, aprovechar el poder de la Web en tus apps, de modo que puedas beneficiarte de la flexibilidad y la eficiencia de poder mostrar ciertos tipos de contenido.

Esto te permite integrar sin problemas contenido web existente en tu aplicación nativa 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 en los lugares en los que deseas un alto grado de flexibilidad para personalizar o actualizar la IU.
  • Pestañas personalizadas: 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 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?

  • Eficiencia: Reutiliza el código existente de tu sitio web. Se basa en tecnologías y contenido web existentes.
  • Integración: Aprovecha el 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. Incorpora 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 intercalado 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 WebViews como contenido principal (izquierda) y complementario (derecha).

2. Navegación integrada en la app con pestañas personalizadas 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
    • Las pestañas personalizadas tienen una opción de panel lateral que se puede abrir en la misma tarea, pero junto al contenido existente de tu app.
  • La pestaña personalizada se basa en el navegador predeterminado del usuario, en el caso de los navegadores que admiten pestañas personalizadas.
    • Si bien es posible usar un WebView y proporcionar una experiencia de navegación en la app altamente personalizable, recomendamos las pestañas personalizadas 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.
Página web con un vínculo en la app en un cuadro 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 experiencia de acceso de terceros, como "Acceder con…", las pestañas personalizadas son la mejor opción. El lanzamiento de pestañas personalizadas garantiza que las credenciales del usuario permanezcan protegidas y aisladas en el sitio de terceros.

Para obtener más información sobre cómo aprovechar WebViews para la autenticación, consulta Cómo autenticar usuarios con WebView. Para iniciar una pestaña personalizada, 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 una 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).