Onglets personnalisés Chrome

BY admin
|

Que sont les onglets personnalisés Chrome? #

Les développeurs d’applications sont confrontés à un choix lorsqu’un utilisateur appuie sur une URL pour lancer un navigateur ou créer son propre navigateur intégré à l’application à l’aide de WebViews.

Les deux options présentent des défis — le lancement du navigateur est un changement de contexte lourd qui n’est pas personnalisable, tandis que les vues Web ne partagent pas l’état avec le navigateur et ajoutent des frais de maintenance.

Les onglets personnalisés Chrome donnent aux applications plus de contrôle sur leur expérience Web et facilitent les transitions entre le contenu natif et le contenu Web sans avoir à recourir à une vue Web.

Les onglets personnalisés Chrome permettent à une application de personnaliser l’apparence et la sensation de Chrome. Une application peut changer des choses comme:

  • Couleur de la barre d’outils
  • Animations d’entrée et de sortie
  • Ajouter des actions personnalisées à la barre d’outils Chrome, au menu de débordement et à la barre d’outils inférieure

Les onglets personnalisés Chrome permettent également au développeur de pré-démarrer Chrome et de pré-récupérer le contenu pour un chargement plus rapide.

Vous pouvez le tester maintenant avec notre échantillon sur Github.

Quand dois-je utiliser les Onglets personnalisés Chrome vs WebView? #

La vue Web est une bonne solution si vous hébergez votre propre contenu dans votre application. Si votre application dirige les utilisateurs vers des URL en dehors de votre domaine, nous vous recommandons d’utiliser des onglets personnalisés Chrome pour ces raisons:

  • Simple à mettre en œuvre. Pas besoin de créer du code pour gérer les demandes, les autorisations ou les magasins de cookies.

  • Personnalisation de l’interface utilisateur:

    • Couleur de la barre d’outils
    • Bouton d’action
    • Éléments de menu personnalisés
    • Animations d’entrée/sortie personnalisées
    • Barre d’outils inférieure

  • Sensibilisation à la navigation : le navigateur délivre un rappel à l’application lors d’une navigation externe.

  • Sécurité: le navigateur utilise la navigation sécurisée de Google pour protéger l’utilisateur et l’appareil contre les sites dangereux.

  • Optimisation des performances:

    • Préchauffage du navigateur en arrière-plan, tout en évitant de voler des ressources de l’application.
    • Fournir une URL probable à l’avance au navigateur, ce qui peut effectuer un travail spéculatif, accélérant le temps de chargement de la page.

  • Gestion du cycle de vie: le navigateur empêche l’application d’être expulsée par le système tout en la surmontant, en élevant son importance au niveau « premier plan ».

  • Modèle de pot de cookies et d’autorisations partagé afin que les utilisateurs n’aient pas à se connecter aux sites auxquels ils sont déjà connectés, ni à accorder à nouveau les autorisations qu’ils ont déjà accordées.

  • Si l’utilisateur a activé l’économiseur de données, il en bénéficiera toujours.

  • Saisie semi-automatique synchronisée sur tous les appareils pour une meilleure complétion du formulaire.

  • Modèle de personnalisation simple.

  • Revenez rapidement à l’application en un seul clic.

  • Vous souhaitez utiliser les dernières implémentations de navigateur sur les appareils pré-Lollipop (WebView à mise à jour automatique) au lieu des WebViews plus anciennes.

Quand cela sera-t-il disponible? #

À partir de Chrome 45, Chrome Custom Tabs est désormais généralement disponible pour tous les utilisateurs de Chrome, sur toutes les versions Android prises en charge par Chrome (à partir de Jellybean).

Nous sommes à la recherche de commentaires, de questions et de suggestions sur ce projet, nous vous encourageons donc à déposer des problèmes sur crbug.com et posez des questions sur notre compte Twitter @ChromiumDev.

Guide d’implémentation #

Un exemple complet est disponible à https://github.com/GoogleChrome/custom-tabs-client. Il contient des classes réutilisables pour personnaliser l’interface utilisateur, se connecter au service d’arrière-plan et gérer le cycle de vie de l’application et de l’activité de l’onglet personnalisé.

Si vous suivez les instructions de cette page, vous pourrez créer une excellente intégration.

La première étape d’une intégration d’onglets personnalisés consiste à ajouter la bibliothèque de prise en charge des onglets personnalisés à votre projet. Ouvrez votre fichier build.gradle et ajoutez la bibliothèque de support à la section dépendance.

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

Une fois la bibliothèque de support ajoutée à votre projet, deux ensembles de personnalisations sont possibles:

  • Personnalisation de l’interface utilisateur et de l’interaction avec les onglets personnalisés.
  • Accélérer le chargement de la page et maintenir l’application en vie.

Les personnalisations de l’interface utilisateur sont effectuées en utilisant les classes CustomTabsIntent et CustomTabsIntent.Builder; les améliorations de performances sont obtenues en utilisant le CustomTabsClient pour se connecter au service d’onglets personnalisés, réchauffer Chrome et lui faire savoir quelles URL seront ouvertes.

Ouverture d’un onglet personnalisé Chrome #

Configurer la couleur de la barre d’adresse #

L’un des aspects les plus importants (et les plus simples à implémenter) des onglets personnalisés Chrome est la possibilité pour vous de changer la couleur de la barre d’adresse pour qu’elle soit cohérente avec le thème de votre application.

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

Configurer un bouton d’action personnalisé #

En tant que développeur de votre application, vous avez un contrôle total sur le bouton d’action présenté à vos utilisateurs dans l’onglet Chrome.

Dans la plupart des cas, il s’agira d’une action principale telle que Partager ou d’une autre activité commune que vos utilisateurs effectueront.

Le bouton d’action est représenté sous la forme d’un ensemble avec une icône du bouton d’action et un pendingIntent qui sera appelé par Chrome lorsque votre utilisateur appuie sur le bouton d’action. L’icône est currenlty 24dp en hauteur et 24-48 dp en largeur.

Configurer un menu personnalisé #

Le navigateur Chrome dispose d’un menu complet d’actions que les utilisateurs effectueront fréquemment dans un navigateur, mais elles peuvent ne pas être pertinentes pour le contexte de votre application.

En tant que développeur, vous pouvez ajouter et personnaliser jusqu’à cinq éléments de menu qui apparaîtront entre la ligne d’icônes et les éléments de pied.

L’élément de menu est ajouté en appelant CustomTabsIntent.Builder#addMenuItem avec le titre et un pendingIntent que Chrome appellera en votre nom lorsque l’utilisateur appuie sur l’élément sont passés en tant que paramètres.

builder.addMenuItem(menuItemTitle, menuItemPendingIntent);

Configurer des animations d’entrée et de sortie personnalisées #

De nombreuses applications Android utilisent des animations d’entrée et de sortie de vue personnalisées lors de la transition entre les activités sur Android. Les onglets personnalisés Chrome ne sont pas différents, vous pouvez modifier les animations d’entrée et de sortie (lorsque l’utilisateur appuie en arrière) pour les garder cohérentes avec le reste de votre application.

Réchauffez Chrome pour accélérer le chargement des pages #

Par défaut, lorsque CustomTabsIntent#launchUrl est appelé, il fera tourner Chrome et lancera l’URL. Cela peut prendre un temps précieux et avoir un impact sur la perception de la douceur.

Nous pensons que les utilisateurs exigent une expérience quasi instantanée, nous avons donc fourni un Service dans Chrome auquel votre application peut se connecter et demander à Chrome de réchauffer le navigateur et les composants natifs. Nous expérimentons également la possibilité pour vous, le développeur, de dire à Chrome l’ensemble probable de pages Web que l’utilisateur visitera. Chrome sera alors en mesure d’effectuer:

  • Pré-résolution DNS du domaine principal
  • Pré-résolution DNS des sous-ressources les plus probables
  • Pré-connexion à la destination, y compris la négociation HTTPS/TLS.

Le processus de réchauffement du Chrome est le suivant:

  • Utilisez CustomTabsClient#bindCustomTabsService pour vous connecter au service.
  • Une fois le service connecté, appelez CustomTabsClient#warmup pour démarrer Chrome en coulisses.
  • Appelez CustomTabsClient#newSession pour créer une nouvelle session. Cette session est utilisée pour toutes les requêtes à l’API.
  • En option, attachez un CustomTabsCallback en paramètre lors de la création d’une nouvelle session, de sorte que vous sachiez qu’une page a été chargée.
  • Indiquez à Chrome les pages avec lesquelles l’utilisateur est susceptible de charger CustomTabsSession#mayLaunchUrl.
  • Appelle le constructeur CustomTabsIntent.Builder en passant le CustomTabsSession créé en paramètre.

Connectez-vous au service Chrome #

La méthode CustomTabsClient#bindCustomTabsService élimine la complexité de la connexion au service d’onglets personnalisés.

Créez une classe qui étend CustomTabsServiceConnection et utilisez onCustomTabsServiceConnected pour obtenir une instance de CustomTabsClient. Cette instance sera nécessaire lors des prochaines étapes.

Réchauffez le processus du navigateur #

boolean warmup(long flags)

Réchauffe le processus du navigateur et charge les bibliothèques natives. L’échauffement est asynchrone, la valeur de retour indique si la demande a été acceptée. Plusieurs appels réussis retourneront également true.

Renvoie true pour réussir.

Créer une nouvelle session d’onglet #

boolean newSession(CustomTabsCallback callback)

La session est utilisée dans les appels suivants pour lier l’appel mayLaunchUrl, le CustomTabsIntent et l’onglet générés l’un à l’autre. Le rappel fourni ici est associé à la session créée. Toutes les mises à jour de la session créée (voir Rappel des onglets personnalisés ci-dessous) sont également reçues via ce rappel. Renvoie si une session a été créée avec succès. Plusieurs appels avec le même CustomTabsCallback ou une valeur null renverront false.

Indiquez à Chrome l’URL que l’utilisateur est susceptible d’ouvrir #

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

Cette méthode CustomTabsSession indique au navigateur une navigation future probable vers une URL. La méthode warmup() doit être appelée en premier lieu en tant que meilleure pratique. L’URL la plus probable doit d’abord être spécifiée. En option, une liste d’autres URL probables peut être fournie. Ils sont traités comme étant moins probables que le premier et doivent être triés par ordre de priorité décroissant. Ces URL supplémentaires peuvent être ignorées. Tous les appels précédents à cette méthode seront privés de priorité. Renvoie si l’opération s’est terminée avec succès.

Rappel de connexion d’Onglets personnalisés #

void onNavigationEvent(int navigationEvent, Bundle extras)

Sera appelé lorsqu’un événement de navigation se produit dans l’onglet personnalisé. Le ‘navigationEvent int’ est l’une des 6 valeurs qui définit l’état de la page dans laquelle se trouve la page. Voir ci-dessous pour plus d’informations.

Que se passe-t-il si l’utilisateur n’a pas de version récente de Chrome installée ? #

Les onglets personnalisés utilisent une intention ACTION_VIEW avec des extras clés pour personnaliser l’interface utilisateur. Cela signifie que par défaut, la page seraouvrir dans le navigateur système, ou le navigateur par défaut de l’utilisateur.

Si l’utilisateur a installé Chrome et qu’il s’agit du navigateur par défaut, il récupérera automatiquement les EXTRAS et présentera une interface utilisateur personnalisée. Il est également possible pour un autre navigateur d’utiliser les extras d’intention pour fournir une interface personnalisée similaire.

Comment puis-je vérifier si Chrome prend en charge les onglets personnalisés Chrome ? #

Toutes les versions de Chrome prenant en charge les onglets personnalisés Chrome exposent un service. Pour vérifier si Chrome prend en charge les onglets personnalisés, essayez de vous lier au service. Si cela réussit, des onglets personnalisés peuvent être utilisés en toute sécurité.

Meilleures pratiques #

Depuis le lancement de Chrome Custom Tabs, nous avons vu diverses implémentations avec différents niveaux de qualité. Cette section décrit un ensemble de bonnes pratiques que nous avons trouvées pour créer une bonne intégration.

Connectez-vous au service Onglets personnalisés et appelez warmup() #

Vous pouvez économiser jusqu’à 700 ms lors de l’ouverture d’un lien avec les onglets personnalisés en vous connectant au service et en préchargeant Chrome.

Connectez-vous au service Onglets personnalisés sur la méthode onStart() des activités à partir desquelles vous prévoyez de lancer un onglet personnalisé. Lors de la connexion, appelez warmup().

Le chargement se fait comme un processus de faible priorité, ce qui signifie qu’il n’aura aucun impact négatif sur les performances de votre application, mais donnera un gros coup de pouce aux performances lors du chargement d’un lien.

Contenu de pré-rendu #

Le pré-rendu ouvrira instantanément le contenu externe. Donc, comme si votre utilisateur avait au moins 50% de chances de cliquer sur le lien, appelez la méthode mayLaunchUrl().

En appelant mayLaunchUrl(), les onglets personnalisés pré-récupéreront la page principale avec le contenu de support et le pré-rendu. Cela donnera la vitesse maximale jusqu’au processus de chargement de la page, mais est livré avec un coût de réseau et de batterie.

Les onglets personnalisés sont intelligents et savent si l’utilisateur utilise le téléphone sur un réseau mesuré ou s’il s’agit d’un périphérique bas de gamme et le pré-rendu aura un effet négatif sur les performances globales de l’appareil et ne sera pas pré-extrait ou pré-rendu sur ces scénarios. Il n’est donc pas nécessaire d’optimiser votre application pour ces cas.

Fournir une solution de secours lorsque les Onglets personnalisés ne sont pas installés #

Bien que les onglets personnalisés soient disponibles pour la grande majorité des utilisateurs, il existe certains scénarios où un navigateur prenant en charge les onglets personnalisés n’est pas installé sur l’appareil ou que l’appareil ne prend pas en charge une version de navigateur dont les onglets personnalisés sont activés.

Assurez-vous de fournir une solution de secours offrant une bonne expérience utilisateur en ouvrant le navigateur par défaut ou en utilisant votre propre implémentation WebView.

Ajoutez votre application comme référence #

Il est généralement très important pour les sites Web de suivre d’où vient leur trafic. Assurez-vous de leur faire savoir que vous leur envoyez des utilisateurs en définissant le référent lors du lancement de votre Onglet personnalisé 

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

Ajouter des animations personnalisées #

Les animations personnalisées faciliteront la transition de votre application vers le contenu Web. Assurez-vous que l’animation de fin est l’inverse de l’animation de début, car elle aidera l’utilisateur à comprendre qu’elle revient au contenu où la navigation a commencé.

Choisir une icône pour le bouton d’action #

L’ajout d’un bouton d’action permettra aux utilisateurs d’interagir davantage avec les fonctionnalités de votre application. Mais, s’il n’y a pas une bonne icône pour représenter l’action que votre bouton d’action effectuera, créez un bitmap avec un texte décrivant l’action.

Rappelez-vous que la taille maximale du bitmap est de 24dp de hauteur x 48dp de largeur.

Préparation pour d’autres navigateurs #

Rappelez-vous que l’utilisateur peut avoir installé plus d’un navigateur prenant en charge les onglets personnalisés. S’il y a plus d’un navigateur qui prend en charge les onglets personnalisés et aucun s’il s’agit du navigateur préféré, demandez à l’utilisateur comment elle souhaite ouvrir le lien

Permettre à l’utilisateur de se désinscrire des onglets personnalisés #

Ajouter une option dans l’application pour que l’utilisateur ouvre des liens dans le navigateur par défaut au lieu d’utiliser un onglet personnalisé. Ceci est particulièrement important si l’application a ouvert le lien à l’aide du navigateur avant d’ajouter la prise en charge des onglets personnalisés.

Laissez les applications natives gérer le contenu #

Certaines URL peuvent être gérées par des applications natives. Si l’utilisateur a installé l’application Twitter et clique sur un lien vers un tweet. Elle s’attend à ce que l’application Twitter le gère.

Avant d’ouvrir une URL à partir de votre application, vérifiez si une alternative native est disponible et utilisez-la.

Personnalisez la couleur de la barre d’outils #

Personnalisez avec la couleur principale de votre application si vous souhaitez que l’utilisateur sente que le contenu fait partie de votre application.

Si vous souhaitez indiquer clairement à l’utilisateur qu’elle a quitté votre application, ne personnalisez pas du tout la couleur.

Ajouter une action de partage #

Assurez-vous d’ajouter l’action de partage au menu de débordement, car les utilisateurs s’attendent à pouvoir partager le lien vers le contenu qu’ils voient dans la plupart des cas d’utilisation, et les onglets personnalisés n’en ajoutent pas par défaut.

Personnalisez le bouton de fermeture #

Personnalisez le bouton de fermeture pour donner à l’onglet personnalisé l’impression qu’il fait partie de votre application.

Si vous souhaitez que l’utilisateur ait l’impression que les onglets personnalisés sont une boîte de dialogue modale, utilisez le bouton « X » par défaut. Si vous souhaitez que l’utilisateur pense que l’onglet personnalisé fait partie du flux d’application, utilisez la flèche retour.

Gérer les liens internes #

Lors de l’interception des clics sur les liens générés par Android: Lien automatique ou en remplaçant les clics sur les liens sur les WebViews, assurez-vous que votre application gère les liens internes et que les onglets personnalisés gèrent les liens externes.

Gérer plusieurs clics #

Si vous devez effectuer un traitement entre le clic de l’utilisateur sur un lien et l’ouverture de l’onglet personnalisé, assurez-vous qu’il s’exécute en moins de 100 ms. Sinon, les gens verront l’absence de réponse et essaieront de cliquer plusieurs fois sur le lien.

S’il n’est pas possible d’éviter le retard, assurez-vous que votre application est préparée pour qu’un utilisateur clique plusieurs fois sur le même lien et n’ouvre pas plusieurs fois un onglet personnalisé.

API de bas niveau #

Bien que la méthode recommandée pour intégrer votre application avec des onglets personnalisés utilise la bibliothèque de prise en charge des onglets personnalisés, une implémentation de bas niveau est également disponible.

L’implémentation complète de la bibliothèque de support est disponible sur Github et peut être utilisée comme point de départ. Il contient également les fichiers AIDL nécessaires pour se connecter au service, car ceux contenus dans le référentiel Chromium ne sont pas directement utilisables avec Android Studio.

Bases pour lancer des Onglets personnalisés à l’aide de l’API de bas niveau #

Ajout de personnalisations d’interface utilisateur #

Les personnalisations d’interface utilisateur sont incluses en ajoutant des extras à l’intention ACTION_VIEW. Une liste complète des touches extras utilisées pour personnaliser l’interface utilisateur se trouve dans la documentation CustomTabsIntent. Voici un exemple d’ajout d’une couleur de barre d’outils personnalisée:

Connexion au service Onglets personnalisés #

Le service Onglets personnalisés peut être utilisé de la même manière que les autres Services Android. L’interface est créée avec AIDL et crée automatiquement une classe de service proxy pour vous.

Utilisez les méthodes du service proxy pour vous échauffer, créer des sessions et pré-récupérer

Liens utiles #

  • Démo Github
  • Onglets personnalisés Chrome sur StackOverflow

FAQ #

  • Quand cela sera-t-il disponible sur le canal stable?
    • Les onglets personnalisés Chrome sont disponibles à partir de Chrome 45.
  • Où puis-je poser des questions?
    • Balise Stackoverflow: chrome-custom-tabs