Pestañas personalizadas de Chrome

BY admin
|

¿Qué son las pestañas personalizadas de Chrome? #

Los desarrolladores de aplicaciones tienen que elegir cuando un usuario toca una URL para iniciar un navegador o crear su propio navegador integrado en la aplicación mediante WebViews.

Ambas opciones presentan desafíos: iniciar el navegador es un cambio de contexto pesado que no se puede personalizar, mientras que las vistas web no comparten el estado con el navegador y agregan sobrecarga de mantenimiento.

Las pestañas personalizadas de Chrome dan a las aplicaciones más control sobre su experiencia web y hacen que las transiciones entre contenido nativo y web sean más fluidas sin tener que recurrir a una vista web.

Las pestañas personalizadas de Chrome permiten a una aplicación personalizar el aspecto y la sensación de Chrome. Una aplicación puede cambiar cosas como:

  • Color de la barra de herramientas
  • Animaciones de entrada y salida
  • Agregar acciones personalizadas a la barra de herramientas de Chrome, al menú de desbordamiento y a la barra de herramientas inferior

Las pestañas personalizadas de Chrome también permiten al desarrollador iniciar previamente Chrome y recuperar contenido previamente para una carga más rápida.

Puedes probar esto ahora con nuestra muestra en Github.

¿Cuándo debo usar Pestañas personalizadas de Chrome vs WebView? #

WebView es una buena solución si alojas tu propio contenido dentro de tu aplicación. Si tu app dirige a las personas a direcciones URL fuera de tu dominio, te recomendamos que utilices pestañas personalizadas de Chrome por estos motivos:

  • Fácil de implementar. No es necesario crear código para gestionar solicitudes, permisos o almacenes de cookies.

  • Personalización de la interfaz de usuario:

    • Color de la barra de herramientas
    • Botón de acción
    • Elementos de menú personalizados
    • Animaciones de entrada / salida personalizadas
    • Barra de herramientas inferior

  • Reconocimiento de navegación: el navegador envía una devolución de llamada a la aplicación en una navegación externa.

  • Seguridad: el navegador utiliza 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, evitando robar recursos de la aplicación.
    • Proporcionar una URL probable por adelantado al navegador, que puede realizar trabajo especulativo, acelerando el tiempo de carga de la página.

  • Gestión del ciclo de vida: el navegador evita que la aplicación sea desalojada por el sistema mientras está encima de ella, elevando su importancia al nivel de «primer plano».

  • Tarro de cookies compartido y modelo de permisos para que los usuarios no tengan que iniciar sesión en sitios a los que ya están conectados ni volver a conceder permisos que ya han concedido.

  • Si el usuario ha activado el Ahorrador de datos, seguirá beneficiándose de él.

  • Autocompletar sincronizado entre dispositivos para completar mejor el formulario.

  • Modelo de personalización simple.

  • Vuelva rápidamente a la aplicación con un solo toque.

  • Desea utilizar las últimas implementaciones de navegador en dispositivos pre-Lollipop (vista web de actualización automática) en lugar de las vistas web antiguas.

¿Cuándo estará disponible? #

A partir de Chrome 45, las pestañas personalizadas de Chrome ahora están disponibles para todos los usuarios de Chrome, en todas las versiones de Android compatibles con Chrome (Jellybean en adelante).

Estamos buscando comentarios, preguntas y sugerencias sobre este proyecto, por lo que lo alentamos a presentar problemas en crbug.com y haz preguntas a nuestra cuenta de Twitter @ChromiumDev.

Guía de implementación #

Un ejemplo completo está disponible en https://github.com/GoogleChrome/custom-tabs-client. Contiene clases reutilizables para personalizar la interfaz de usuario, conectarse al servicio en segundo plano y gestionar el ciclo de vida de la aplicación y la actividad de la pestaña personalizada.

Si sigue las instrucciones de esta página, podrá crear una gran integración.

El primer paso para una integración de pestañas personalizadas es agregar la Biblioteca de Soporte de pestañas personalizadas al proyecto. Abra su archivo build.gradle y agregue la biblioteca de soporte a la sección dependencia.

dependencies {
...
compile 'com.android.support:customtabs:23.3.0'
}

Una vez que se agrega la Biblioteca de soporte a su proyecto, hay dos conjuntos de personalizaciones posibles:

  • Personalizar la interfaz de usuario y la interacción con las pestañas personalizadas.
  • Hacer que la página se cargue más rápido y mantener viva la aplicación.

Las personalizaciones de la interfaz de usuario se realizan utilizando las clases CustomTabsIntent y CustomTabsIntent.Builder; las mejoras de rendimiento se logran utilizando CustomTabsClient para conectarse al servicio de pestañas personalizadas, calentamiento de Chrome y hacerle saber qué URL se abrirán.

Abrir una pestaña personalizada de Chrome #

Configurar el color de la barra de direcciones #

Uno de los aspectos más importantes (y más sencillos de implementar) de las pestañas personalizadas de Chrome es la capacidad de cambiar el color de la barra de direcciones para que sea coherente con el tema de la aplicación.

// Changes the background color for the omnibox. colorInt is an int
// that specifies a Color.
builder.setToolbarColor(colorInt);

Configurar un botón de acción personalizado#

Como desarrollador de tu aplicación, tienes control total sobre el Botón de Acción que se presenta a los usuarios dentro de la pestaña de Chrome.

En la mayoría de los casos, esta será una acción principal, como Compartir u otra actividad común que realizarán los usuarios.

El botón de acción se representa como un Paquete con un icono del botón de acción y un PendingIntent al que Chrome llamará cuando el usuario pulse el botón de acción. El icono tiene una altura actual de 24dp y una anchura de 24-48 dp.

Configurar un menú personalizado#

El navegador Chrome tiene un menú completo de acciones que los usuarios realizarán con frecuencia dentro de un navegador, sin embargo, pueden no ser relevantes para el contexto de su aplicación.

Como desarrollador, puede agregar y personalizar hasta cinco elementos de menú que aparecerán entre la fila de iconos y los elementos de pie.

El elemento de menú se agrega llamando a CustomTabsIntent.Builder#addMenuItem con title y un PendingIntent que Chrome llamará en su nombre cuando el usuario toque el elemento se pasan como parámetros.

builder.addMenuItem(menuItemTitle, menuItemPendingIntent);

Configurar animaciones personalizadas de entrada y salida #

Muchas aplicaciones de Android usan animaciones personalizadas de Entrada y salida de vistas cuando hacen la transición entre Actividades en Android. Las pestañas personalizadas de Chrome no son diferentes, puedes cambiar las animaciones de entrada y salida (cuando el usuario presiona Atrás) para que sean coherentes con el resto de la aplicación.

Calienta Chrome para que las páginas se carguen más rápido #

De forma predeterminada, cuando se llame a CustomTabsIntent#launchUrl, se activará Chrome y se iniciará la URL. Esto puede tomar un tiempo precioso e impactar en la percepción de suavidad.

Creemos que los usuarios exigen una experiencia casi instantánea, por lo que hemos proporcionado un Servicio en Chrome al que su aplicación puede conectarse y decirle a Chrome que caliente el navegador y los componentes nativos. También estamos experimentando con la capacidad para que usted, el desarrollador, le diga a Chrome el conjunto probable de páginas web que visitará el usuario. Chrome entonces podrá realizar:

  • Resolución previa de DNS del dominio principal
  • Resolución previa de DNS de los subrecursos más probables
  • Conexión previa al destino, incluida la negociación HTTPS / TLS.

El proceso de calentamiento de cromo es el siguiente:

  • Utilice CustomTabsClient#bindCustomTabsService para conectarse al servicio.
  • Una vez que el servicio esté conectado, llama a CustomTabsClient#warmup para iniciar Chrome entre bastidores.
  • Llame a CustomTabsClient#newSession para crear una nueva sesión. Esta sesión se utiliza para todas las solicitudes a la API.
  • Opcionalmente, adjunte un CustomTabsCallback como parámetro al crear una nueva sesión, para que sepa que se cargó una página.
  • Indica a Chrome con qué páginas es probable que el usuario cargue CustomTabsSession#mayLaunchUrl.
  • Llama al constructor CustomTabsIntent.Builder pasando el CustomTabsSession creado como parámetro.

Conectarse al servicio Chrome #

El método CustomTabsClient#bindCustomTabsService elimina la complejidad de conectarse al servicio de pestañas personalizadas.

Cree una clase que extienda CustomTabsServiceConnection y use onCustomTabsServiceConnected para obtener una instancia de CustomTabsClient. Esta instancia será necesaria en los próximos pasos.

Calentar el proceso del Navegador#

boolean warmup(long flags)

Calienta el proceso del navegador y carga las bibliotecas nativas. El calentamiento es asíncrono, el valor devuelto indica si la solicitud ha sido aceptada. Varias llamadas exitosas también devolverán true.

Devuelve true para el éxito.

Crear una nueva sesión de pestañas#

boolean newSession(CustomTabsCallback callback)

Session se utiliza en llamadas posteriores para vincular la llamada mayLaunchUrl, el CustomTabsIntent y la pestaña generada entre sí. La devolución de llamada proporcionada aquí está asociada con la sesión creada. Cualquier actualización para la sesión creada (consulte Devolución de llamada de pestañas personalizadas a continuación) también se recibe a través de esta devolución de llamada. Devuelve si una sesión se creó correctamente. Varias llamadas con el mismo CustomTabsCallback o un valor null devolverán false.

Dile a Chrome qué URL es probable que abra el usuario#

boolean mayLaunchUrl(Uri url, Bundle extras, List otherLikelyBundles)

Este método CustomTabsSession le informa al navegador de una posible navegación futura a una URL. El método warmup() debe denominarse primero como mejor práctica. La URL más probable debe especificarse primero. Opcionalmente, se puede proporcionar una lista de otras URL probables. Se tratan como menos probables que el primero, y deben clasificarse en orden de prioridad decreciente. Estas URL adicionales pueden ignorarse. Todas las llamadas anteriores a este método se carecerán de prioridad. Devuelve si la operación se completó correctamente.

Devolución de llamada de conexión de pestañas personalizadas #

void onNavigationEvent(int navigationEvent, Bundle extras)

Se llamará cuando ocurra un evento de navegación en la pestaña personalizada. El ‘navigationEvent int’ es uno de los 6 valores que define el estado de la página en la que se encuentra. Consulte a continuación para obtener más información.

¿Qué sucede si el usuario no tiene instalada una versión reciente de Chrome? #

Las pestañas personalizadas utilizan una Intent ACTION_VIEW con extras clave para personalizar la interfaz de usuario. Esto significa que, de forma predeterminada, la página se abrirá en el navegador del sistema o en el navegador predeterminado del usuario.

Si el usuario tiene instalado Chrome y es el navegador predeterminado, recogerá automáticamente los EXTRAS y presentará una interfaz de usuario personalizada. También es posible que otro navegador use los extras de intención para proporcionar una interfaz personalizada similar.

¿Cómo puedo comprobar si Chrome admite pestañas personalizadas de Chrome? #

Todas las versiones de Chrome que admiten pestañas personalizadas de Chrome exponen un servicio. Para comprobar si Chrome admite pestañas personalizadas, intente vincularse al servicio. Si tiene éxito, se pueden usar pestañas personalizadas de forma segura.

Prácticas recomendadas #

Desde que se lanzó Chrome Custom Tabs, hemos visto varias implementaciones con diferentes niveles de calidad. Esta sección describe un conjunto de prácticas recomendadas que hemos encontrado para crear una buena integración.

Conectarse al servicio de pestañas personalizadas y calentamiento de llamadas() #

Puede ahorrar hasta 700 ms al abrir un enlace con las Pestañas personalizadas conectándose al servicio y cargando previamente Chrome.

Conéctese al servicio de pestañas Personalizadas con el método onStart() de las Actividades desde las que planea iniciar una pestaña personalizada. Al conectarse, llame a warmup ().

La carga ocurre como un proceso de baja prioridad, lo que significa que no tendrá ningún impacto negativo en el rendimiento de su aplicación, pero dará un gran impulso al rendimiento al cargar un enlace.

Contenido de procesamiento previo #

El procesamiento previo hará que el contenido externo se abra al instante. Por lo tanto, como si tu usuario tiene al menos un 50% de probabilidad de hacer clic en el enlace, llama al método mayLaunchUrl ().

Llamar a mayLaunchUrl () hará que las pestañas personalizadas obtengan previamente la página principal con el contenido de soporte y el procesamiento previo. Esto le dará la máxima velocidad al proceso de carga de páginas, pero viene con un costo de red y batería.

Las pestañas personalizadas son inteligentes y saben si el usuario está utilizando el teléfono en una red medida o si se trata de un dispositivo de gama baja y el renderizado previo tendrá un efecto negativo en el rendimiento general del dispositivo y no se recuperará ni renderizará previamente en esos escenarios. Por lo tanto, no es necesario optimizar su aplicación para esos casos.

Proporciona una alternativa para cuando las pestañas personalizadas no están instaladas #

Aunque las pestañas personalizadas están disponibles para la gran mayoría de los usuarios, hay algunos escenarios en los que un navegador que admite Pestañas personalizadas no está instalado en el dispositivo o el dispositivo no admite una versión de navegador que tenga habilitadas las pestañas personalizadas.

Asegúrese de proporcionar una alternativa que proporcione una buena experiencia de usuario, ya sea abriendo el navegador predeterminado o utilizando su propia implementación de WebView.

Agregue su aplicación como referencia #

Por lo general, es muy importante que los sitios web rastreen de dónde proviene su tráfico. Asegúrese de hacerles saber que les está enviando usuarios configurando el referente al iniciar su pestaña personalizada

intent.putExtra(Intent.EXTRA_REFERRER,
Uri.parse(Intent.URI_ANDROID_APP_SCHEME + "//" + context.getPackageName()));

Agregar animaciones personalizadas #

Las animaciones personalizadas harán que la transición de su aplicación al contenido web sea más fluida. Asegúrese de que la animación de finalización sea la inversa de la animación de inicio, ya que ayudará al usuario a comprender que está volviendo al contenido donde comenzó la navegación.

Elegir un icono para el Botón de Acción #

Agregar un botón de acción hará que los usuarios interactúen más con las funciones de tu aplicación. Pero, si no hay un buen icono para representar la acción que realizará el Botón de Acción, cree un mapa de bits con un texto que describa la acción.

Recuerde que el tamaño máximo para el mapa de bits es de 24dp de alto x 48dp de ancho.

Preparación para otros navegadores #

Recuerde que el usuario puede tener más de un navegador instalado que admita pestañas personalizadas. Si hay más de un navegador que admite Pestañas personalizadas y ninguno si es el navegador preferido, pregúntele al usuario cómo desea abrir el enlace

Permita que el usuario se excluya de las pestañas personalizadas #

Agregue una opción en la aplicación para que el usuario abra enlaces en el navegador predeterminado en lugar de usar una pestaña personalizada. Esto es especialmente importante si la aplicación abrió el enlace usando el navegador antes de agregar soporte para Pestañas personalizadas.

Deje que las aplicaciones nativas manejen el contenido #

Algunas URL pueden ser manejadas por aplicaciones nativas. Si el usuario tiene instalada la aplicación de Twitter y hace clic en un enlace a un tweet. Ella espera que la aplicación de Twitter lo maneje.

Antes de abrir una url de su aplicación, compruebe si hay una alternativa nativa disponible y úsela.

Personaliza el color de la barra de herramientas #

Personaliza con el color principal de tu aplicación si quieres que el usuario sienta que el contenido forma parte de tu aplicación.

Si quieres dejar claro para el usuario que ha dejado tu aplicación, no personalices el color en absoluto.

Agregar una acción compartida #

Asegúrese de agregar la Acción Compartida al menú de desbordamiento, ya que los usuarios esperan poder compartir el enlace al contenido que están viendo en la mayoría de los casos de uso, y las pestañas personalizadas no agregan una de forma predeterminada.

Personalice el botón de cierre #

Personalice el botón de cierre para que la pestaña personalizada se sienta parte de su aplicación.

Si desea que el usuario sienta que las pestañas personalizadas son un cuadro de diálogo modal, use el botón «X» predeterminado. Si desea que el usuario sienta que la pestaña Personalizada es parte del flujo de la aplicación, utilice la flecha hacia atrás.

Manejar enlaces internos #

Al interceptar clics en enlaces generados por Android:AutoLink o anular clics en enlaces en vistas web, asegúrate de que tu aplicación maneje los enlaces internos y las pestañas personalizadas manejen los externos.

Manejar múltiples clics #

Si necesita hacer algún procesamiento entre el usuario que hace clic en un enlace y abre la pestaña Personalizada, asegúrese de que se ejecute en menos de 100 ms. De lo contrario, la gente verá la falta de respuesta y puede intentar hacer clic varias veces en el enlace.

Si no es posible evitar el retraso, asegúrese de que la aplicación esté preparada para cuando un usuario haga clic varias veces en el mismo enlace y no abra una pestaña personalizada varias veces.

API de bajo nivel #

Aunque el método recomendado para integrar su aplicación con Pestañas personalizadas es usar la Biblioteca de Compatibilidad de pestañas personalizadas, también está disponible una implementación de bajo nivel.

La implementación completa de la Biblioteca de soporte está disponible en Github y se puede usar como punto de inicio. También contiene los archivos AIDL necesarios para conectarse al servicio, ya que los contenidos en el repositorio Chromium no se pueden usar directamente con Android Studio.

Conceptos básicos para iniciar pestañas personalizadas con la API de bajo nivel #

Agregar personalizaciones de interfaz de usuario #

Las personalizaciones de interfaz de usuario se incluyen agregando extras a la Intent ACTION_VIEW. Puede encontrar una lista completa de las claves adicionales utilizadas para personalizar la interfaz de usuario en los documentos CustomTabsIntent. A continuación se muestra un ejemplo de cómo agregar un color de barra de herramientas personalizado:

Conexión al servicio de pestañas personalizadas #

El servicio de pestañas personalizadas se puede usar de la misma manera que otros servicios de Android. La interfaz se crea con AIDL y crea automáticamente una clase de servicio proxy para usted.

Utilice los métodos del servicio proxy para calentar, crear sesiones y obtener previamente

Enlaces útiles#

  • Demo de Github
  • Pestañas personalizadas de Chrome en StackOverflow

Preguntas frecuentes #

  • ¿Cuándo estará disponible en el canal estable?
    • Las pestañas personalizadas de Chrome están disponibles a partir de Chrome 45.
  • ¿Dónde puedo hacer preguntas?
    • Etiqueta Stackoverflow: pestañas personalizadas cromadas