Descripción general de las pestañas personalizadas de Android

Las pestañas personalizadas son una función de los navegadores para Android que les brinda a los desarrolladores de apps una forma de agregar una experiencia de navegador personalizada directamente en su app.

Cargar contenido web es parte de las apps para dispositivos móviles desde los primeros días de los smartphones, pero las opciones más antiguas pueden presentar desafíos para los desarrolladores. El inicio del navegador real es un cambio de contexto pesado para los usuarios que no se puede personalizar, mientras que los WebViews no admiten todas las funciones de la plataforma web, no comparten el estado con el navegador y agregan sobrecarga de mantenimiento.

Las pestañas personalizadas permiten que los usuarios permanezcan en la app mientras navegan, lo que aumenta la participación y reduce el riesgo de que abandonen la app. Para ello, se basan directamente en el navegador preferido del usuario y comparten automáticamente el estado y las funciones que ofrece. No necesitas escribir código personalizado para administrar solicitudes, otorgamientos de permisos ni almacenes de cookies.

¿Qué pueden hacer las pestañas personalizadas?

Cuando usas una pestaña personalizada, tu contenido web se carga en cualquier motor de renderización que potencie el navegador preferido de tu usuario. Allí, puedes encontrar cualquier API o función de la plataforma web, y también en tu pestaña personalizada. Su sesión de navegación, contraseñas guardadas, formas de pago y direcciones aparecen tal como ya están acostumbrados.

¿Qué puedo personalizar en una pestaña personalizada?

Bastante. Las pestañas personalizadas te brindan un control detallado sobre gran parte del cromo del navegador y la experiencia del usuario. En tu app, puedes iniciar una pestaña personalizada con un intent. Cuando se llame a este intent, puedes agregar una serie de atributos al CustomTabIntent para obtener la experiencia exacta que deseas. Aquí se enumeran algunas personalizacións que puedes agregar:

  • Animaciones de entrada y salida personalizadas para que coincidan con el resto de la app
  • Modifica el color de la barra de herramientas para que coincida con el desarrollo de la marca de tu app
  • Coherencia de colores que puede permanecer en tu app, incluso si cambia entre temas oscuros y claros
  • Acciones y entradas personalizadas en la barra de herramientas y los menús del navegador
  • Controla la altura de inicio de la pestaña personalizada, lo que te permite transmitir tus videos mientras interactúas con tu tienda web.

Además, los usuarios pueden minimizar una pestaña personalizada para interactuar con la app subyacente y restablecerla en cualquier momento sin perder el progreso para reanudar su recorrido. Esto les brinda a los usuarios una alternativa para cerrar la pestaña personalizada y realizar varias tareas sin problemas entre la Web y la app nativa. La función está habilitada de forma predeterminada para las pestañas personalizadas.

Eso está lejos de todo. Las pestañas personalizadas son muy potentes y están en desarrollo activo. Cada navegador debe agregar compatibilidad con estas funciones a medida que estén disponibles. Si bien casi todos tienen algún nivel de compatibilidad, es importante saber qué puede estar disponible o no en los navegadores de tus usuarios. Consulta la tabla de comparación de funciones para verificar rápidamente la disponibilidad de las diferentes funciones en los navegadores populares de Android.

Puedes probar esto ahora con nuestra muestra en GitHub.

¿Cuándo debería usar las pestañas personalizadas?

No hay una sola forma “correcta” de cargar contenido web. En ciertas situaciones, WebView será la tecnología adecuada. Por ejemplo, si alojas tu propio contenido de forma exclusiva en tu app o si necesitas insertar JavaScript directamente desde tu app. Si tu app dirige a las personas a URLs fuera de los dominios, el estado compartido integrado en las pestañas personalizadas significa que es probable que sean una mejor opción. Estas son otras fortalezas de las pestañas personalizadas:

  1. Seguridad: Las pestañas personalizadas usan la Navegación segura de Google para proteger al usuario y al dispositivo de sitios peligrosos.
  2. Optimización del rendimiento:
    1. Preparación previa del navegador en segundo plano, sin robar recursos de la aplicación.
    2. Carga las URLs de forma especulativa con anticipación para acelerar el tiempo de carga de la página.
  3. Administración del ciclo de vida: El sistema no expulsará las apps que inicien una pestaña personalizada durante el uso de las pestañas. Su importancia se elevará al nivel "en primer plano".
  4. Modelo de permisos y almacenamiento de cookies compartidos para que los usuarios no tengan que acceder a los sitios a los que ya están conectados ni volver a otorgar permisos que ya otorgaron.
  5. Las funciones del navegador, como el autorrelleno para completar mejor los formularios, están disponibles de forma predeterminada.
  6. Los usuarios pueden volver a la app con un botón Atrás integrado.

Pestañas personalizadas en comparación con la actividad web de confianza

Trusted Web Activities extiende el protocolo de pestañas personalizadas y comparte la mayoría de sus beneficios. Sin embargo, en lugar de proporcionar una IU personalizada, permite a los desarrolladores abrir una pestaña del navegador sin ninguna IU. Se recomienda para los desarrolladores que desean abrir su propia app web progresiva, en pantalla completa, dentro de su propia app para Android.

¿Dónde están disponibles las pestañas personalizadas?

Las pestañas personalizadas son una función compatible con los navegadores en la plataforma de Android. Chrome lo introdujo por primera vez en la versión 45. La mayoría de los navegadores para Android admiten el protocolo.

Estamos buscando comentarios, preguntas y sugerencias sobre este proyecto, por lo que te recomendamos que envíes problemas a crbug.com y hagas preguntas en Twitter a @ChromiumDev.

Comenzar

Además de la demostración de GitHub, hay varias guías para comenzar a usar las pestañas personalizadas.

Si tienes preguntas, consulta la etiqueta chrome-custom-tabs en StackOverflow.