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 ha sido parte de las apps para dispositivos móviles desde los inicios de los smartphones, pero las opciones más antiguas pueden presentar desafíos para los desarrolladores. El lanzamiento del navegador real es un cambio de contexto pesado para los usuarios que no se puede personalizar, mientras que los WebView no admiten todas las funciones de la plataforma web, no comparten el estado con el navegador y agregan una 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. Las pestañas personalizadas funcionan directamente con 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, otorgar permisos o almacenar cookies.
¿Qué pueden hacer las pestañas personalizadas?
Cuando usas una pestaña personalizada, tu contenido web se carga en el motor de renderización que impulsa el navegador preferido del usuario. Cualquier API o función de la plataforma web está disponible allí y en tu pestaña personalizada. Su sesión de navegación, las contraseñas guardadas, las formas de pago y las direcciones se muestran 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 de la interfaz de Chrome y la experiencia del usuario del navegador. En tu app, inicia una pestaña personalizada con un Intent. Cuando se llama a este intent, puedes agregar una cantidad de atributos al objeto CustomTabIntent para obtener la experiencia exacta que deseas. Aquí se enumeran algunas personalizaciones que puedes agregar:
- Animaciones de entrada y salida personalizadas para que coincidan con el resto de la app
- Cómo modificar el color de la barra de herramientas para que coincida con la marca de tu app
- Consistencia de color que puede permanecer en tu app, incluso si se cambia entre temas claros y oscuros
- Acciones y entradas personalizadas en la barra de herramientas y los menús del navegador
- Controla la altura de lanzamiento de la pestaña personalizada, lo que permite, por ejemplo, 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, de modo que puedan 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 ser 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 los usuarios. Consulta la tabla de comparación de funciones para verificar rápidamente la disponibilidad de las diferentes funciones en los navegadores de Android más populares.
Puedes probarlo ahora con nuestra muestra en GitHub.
¿Cuándo debería usar pestañas personalizadas?
No existe una única forma “correcta” de cargar contenido web. En ciertas situaciones, WebView será la tecnología adecuada para usar. Por ejemplo, si solo alojas tu propio contenido dentro de tu app o si necesitas insertar JavaScript directamente desde ella. Si tu app dirige a las personas a URLs fuera de los dominios, es probable que las pestañas personalizadas con estado compartido integrado sean una mejor opción. Estas son otras ventajas de las pestañas personalizadas:
- 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:
- Precalentamiento del navegador en segundo plano, sin robar recursos de la aplicación
- Acelerar el tiempo de carga de la página cargando de forma especulativa las URLs con anticipación
- Administración del ciclo de vida: El sistema no expulsará las apps que lancen una pestaña personalizada durante el uso de la pestaña. La importancia de la pestaña personalizada se eleva al nivel de primer plano.
- Modelo de permisos y contenedor 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 los permisos que ya otorgaron.
- Las funciones del navegador, como el autocompletado para completar mejor los formularios, están disponibles de inmediato.
- Los usuarios pueden volver a la app con un botón de atrás integrado.
Comparación entre las pestañas personalizadas y las actividades web de confianza
Las Trusted Web Activities extienden el protocolo de pestañas personalizadas y comparten la mayoría de sus beneficios. Sin embargo, en lugar de proporcionar una IU personalizada, permite que los desarrolladores abran 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 la introdujo originalmente en la versión 45. El protocolo es compatible con la mayoría de los navegadores de Android.
Agradecemos tus comentarios, preguntas y sugerencias sobre este proyecto, por lo que te recomendamos que registres problemas en crbug.com y hagas preguntas en Twitter @ChromiumDev.
Más información
Si tienes preguntas, consulta la etiqueta chrome-custom-tabs en StackOverflow.