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 personalizada del navegador directamente dentro de sus apps.
La carga de contenido web ha formado 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. Iniciar el navegador real implica un cambio importante de contexto para los usuarios que no se puede personalizar, mientras que las 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 ofrecen una mejor experiencia del usuario que la de abrir un navegador externo. 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, usan el navegador preferido del usuario directamente y comparten automáticamente el estado y las funciones que este ofrece. No es necesario que escribas código personalizado para administrar solicitudes, otorgamientos de permisos o almacenamiento de cookies.
¿Qué pueden hacer las pestañas personalizadas?
Cuando usas una pestaña personalizada, el contenido web se carga en cualquier motor de renderización que se use en el navegador preferido del usuario. Cualquier función de la API o de la plataforma web está disponible allí y en tu pestaña personalizada. La sesión de navegación, las contraseñas guardadas, las formas de pago y las direcciones aparecerán como de costumbre.
¿Qué puedo personalizar en una pestaña personalizada?
Bastante. Las pestañas personalizadas te brindan un control detallado de gran parte del navegador Chrome y la experiencia del usuario. Dentro de tu app, inicias una pestaña personalizada con un Intent. Cuando se llama a este intent, puedes agregar varios atributos a CustomTabIntent para obtener la experiencia exacta que deseas. Aquí se enumeran algunas personalizaciones que puedes agregar.
Animaciones de entrada y salida personalizadas que se adaptan al resto de la app
Modificar el color de la barra de herramientas para que coincida con el desarrollo de la marca de tu app
Consistencia de color que puede permanecer en tu app, incluso si alternan entre el tema claro y el oscuro.
Entradas y acciones personalizadas en la barra de herramientas y los menús del navegador.
Controla la altura de lanzamiento de la pestaña personalizada, lo que habilita funciones como la transmisión de videos mientras interactúas con tu tienda web.
Los usuarios pueden minimizar una pestaña personalizada para interactuar con la app subyacente y restablecerla en cualquier momento sin perder el progreso a fin de reanudar su recorrido. Esto les brinda a los usuarios una alternativa a cerrar la pestaña personalizada y pueden realizar varias tareas a la vez entre la Web y la aplicación nativa sin problemas. Esta función está habilitada de forma predeterminada para las pestañas personalizadas a partir de Chrome 122 beta.
Eso está lejos de todo. Las pestañas personalizadas son muy potentes y están en desarrollo activo. Cada navegador debe agregar compatibilidad para estas funciones a medida que estén disponibles. Si bien casi todos tienen algún nivel de compatibilidad, es importante saber lo que puede o no estar disponible en los navegadores de los 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 debo usar las pestañas personalizadas?
No existe una única forma “correcta” de cargar contenido web. En algunas situaciones, WebView será la tecnología adecuada para usar. Por ejemplo, si alojas exclusivamente tu contenido dentro de la app o si necesitas incorporar JavaScript directamente desde ella. Si la 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. Otras fortalezas de las pestañas personalizadas incluyen:
- Seguridad: Las pestañas personalizadas usan la Navegación segura de Google para proteger al usuario y al dispositivo de sitios peligrosos.
- Optimización del rendimiento:
- Preparación previa del navegador en segundo plano para evitar robar recursos de la aplicación
- Acelera el tiempo de carga de la página cargando las URLs de forma especulativa por adelantado.
- Administración del ciclo de vida: El sistema no expulsa las apps que inician una pestaña personalizada durante el uso de las pestañas; su importancia se eleva a "primer plano".
- El jar de cookies y el modelo de permisos compartidos para que los usuarios no tengan que acceder a sitios a los que ya están conectados ni volver a otorgar los permisos que ya otorgaron.
- Si se habilita esta opción, se comparten las funciones del navegador, como Ahorro de datos, lo que te permite cargar contenido de forma más rápida y económica.
- Se sincronizó la función Autocompletar en todos los dispositivos para completar mejor los formularios.
- Los usuarios pueden volver a la app con un botón Atrás integrado.
Comparación entre las pestañas personalizadas y la actividad web de confianza
Trust 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 a los desarrolladores que deseen 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 de la plataforma de Android. Originalmente, Chrome lo introdujo en la versión 45. El protocolo es compatible con la mayoría de los navegadores de Android.
Esperamos recibir comentarios, preguntas y sugerencias sobre este proyecto, por lo que te recomendamos informar problemas en crbug.com y hacer preguntas en Twitter (@ChromiumDev).
Comenzar
Además de la demostración en GitHub, existen varias guías que te ayudarán a comenzar a usar las pestañas personalizadas.
- Cómo comenzar
- Personaliza la IU
- Agrega interactividad personalizada
- Preparación y recuperación previa: con el servicio de pestañas personalizadas
- Cómo realizar varias tareas a la vez con pestañas personalizadas parciales
- Cómo medir la participación de los usuarios
Si tienes preguntas, revisa la etiqueta chrome-custom-tabs en StackOverflow.