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.

La carga de contenido web ha sido 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. Las pestañas personalizadas son impulsadas directamente por 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 alimente el navegador preferido del usuario. Allí, encontrarás cualquier API o función de la plataforma web disponible 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 de forma fluida entre la Web y la app nativa. La función está habilitada de forma predeterminada para las pestañas personalizadas.

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 existe una única forma “correcta” de cargar contenido web. En ciertas situaciones, WebView será la tecnología adecuada para usar. 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, a la vez que se evita el robo de 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 la pestaña. La importancia de la pestaña personalizada se eleva al nivel de 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 Autocompletar 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 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 a los desarrolladores abrir una pestaña del navegador sin ninguna IU. Se recomienda para los desarrolladores que quieran 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 originalmente en la versión 45. La mayoría de los navegadores para Android son compatibles con 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.