Présentation des onglets personnalisés Android

Les onglets personnalisés sont une fonctionnalité des navigateurs Android qui permet aux développeurs d'applications d'ajouter une expérience de navigation personnalisée directement dans leur application.

Le chargement de contenu Web fait partie des applications mobiles depuis les débuts des smartphones, mais les options plus anciennes peuvent présenter des défis pour les développeurs. Le lancement du navigateur réel est un changement de contexte lourd pour les utilisateurs qui n'est pas personnalisable. Bien que les classes WebView ne soient pas compatibles avec toutes les fonctionnalités de la plate-forme Web, elles ne partagent pas d'état avec le navigateur et n'entraînent pas de coûts de maintenance supplémentaires.

Les onglets personnalisés offrent une meilleure expérience utilisateur que l'ouverture d'un navigateur externe. Elles permettent aux utilisateurs de rester dans l'application tout en parcourant l'application, ce qui augmente l'engagement et réduit le risque qu'ils l'abandonnent. Elles sont alimentées directement par le navigateur préféré de l'utilisateur et partagent automatiquement l'état et les fonctionnalités qu'il offre. Vous n'avez pas besoin d'écrire de code personnalisé pour gérer les requêtes, les autorisations ou les magasins de cookies.

À quoi servent les onglets personnalisés ?

Si vous utilisez un onglet personnalisé, votre contenu Web se chargera dans le moteur de rendu utilisé par le navigateur préféré de l'utilisateur. Toutes les fonctionnalités d'API ou de plate-forme Web y sont disponibles et le seront dans votre onglet personnalisé. Sa session de navigation, ses mots de passe, ses modes de paiement et ses adresses enregistrés s'affichent tous comme à l'accoutumée.

Que puis-je personnaliser dans un onglet personnalisé ?

Pas mal du tout ! Les onglets personnalisés vous permettent de contrôler précisément une grande partie du navigateur Chrome et de l'expérience utilisateur. Dans votre application, vous lancez un onglet personnalisé à l'aide d'un intent. Lorsque cet intent est appelé, vous pouvez ajouter un certain nombre d'attributs à l'CustomTabIntent pour obtenir l'expérience exacte que vous souhaitez. Certaines personnalisations que vous pouvez ajouter sont listées ici.

Des animations d'entrée et de sortie personnalisées adaptées au reste de votre application

Un navigateur mobile qui passe d'un écran à l'autre et se termine par un site Web chargé dans un onglet personnalisé

Modifier la couleur de la barre d'outils pour qu'elle corresponde au branding de votre application

Un navigateur mobile, passant à un onglet personnalisé dont les couleurs correspondent à celles d'un site Web

Une cohérence des couleurs qui reste dans votre application, même s'ils alternent entre thème clair et thème sombre.

Et cette cohérence des couleurs peut rester dans votre application, même si elle alterne entre le thème clair et le thème sombre.

Actions et entrées personnalisées de la barre d'outils et des menus du navigateur.

Onglet personnalisé affichant son menu, avec des entrées personnalisées

Contrôlez la hauteur de lancement de l'onglet personnalisé pour permettre, par exemple, de lire vos vidéos en streaming tout en interagissant avec votre boutique en ligne.

Onglet personnalisé s'ouvrant partiellement avec une hauteur définie

Les utilisateurs peuvent réduire un onglet personnalisé pour interagir avec l'application sous-jacente et la restaurer à tout moment sans perdre leur progression pour reprendre leur parcours. Cela offre aux utilisateurs une alternative à la fermeture de l'onglet personnalisé, et ils peuvent facilement effectuer plusieurs tâches à la fois entre le Web et l'application native. Cette fonctionnalité est activée par défaut pour les onglets personnalisés à partir de la version bêta de Chrome 122.

Réduire un onglet personnalisé pour interagir avec l'application en arrière-plan

C'est loin de tout. Les onglets personnalisés sont très puissants et en cours de développement. Chaque navigateur doit être compatible avec ces fonctionnalités dès qu'elles sont disponibles. Bien que presque toutes bénéficient d'un certain niveau de compatibilité, il est important de savoir ce qui est disponible ou non dans les navigateurs de vos utilisateurs. Reportez-vous au tableau comparatif des fonctionnalités pour vérifier rapidement la disponibilité des différentes fonctionnalités sur les navigateurs Android les plus courants.

Vous pouvez maintenant effectuer un test à l'aide de notre exemple sur GitHub.

Quand dois-je utiliser les onglets personnalisés ?

Il n'existe pas une seule méthode "correcte" pour charger du contenu Web. Dans certains cas, WebView sera la technologie appropriée à utiliser. Par exemple, si vous hébergez exclusivement votre propre contenu dans votre application ou si vous devez injecter du code JavaScript directement depuis votre application. Si votre application redirige les utilisateurs vers des URL externes à des domaines, l'état partagé intégré dans les onglets personnalisés signifie probablement qu'ils constituent un meilleur choix. Les onglets personnalisés offrent également d'autres avantages:

  1. Sécurité: les onglets personnalisés utilisent la navigation sécurisée de Google pour protéger l'utilisateur et l'appareil contre les sites dangereux.
  2. Optimisation des performances :
    1. Préparation du navigateur en arrière-plan, tout en évitant de voler les ressources de l'application.
    2. Accélérez le temps de chargement des pages en chargeant des URL à l'avance de manière spéculative.
  3. Gestion du cycle de vie: les applications qui lancent un onglet personnalisé ne seront pas supprimées par le système lors de l'utilisation des onglets. Son importance est élevée au "premier plan".
  4. Le fichier de cookie partagé et le modèle d'autorisations permettent aux utilisateurs de ne pas avoir à se connecter aux sites auxquels ils sont déjà connectés ni à accorder à nouveau les autorisations qu'ils ont déjà accordées.
  5. Les fonctionnalités du navigateur telles que l'économiseur de données sont partagées, si elles sont activées, ce qui permet de charger le contenu plus rapidement et à moindre coût.
  6. Synchronisation de la saisie semi-automatique sur tous les appareils pour un meilleur remplissage des formulaires.
  7. Les utilisateurs peuvent revenir à l'application grâce au bouton "Retour" intégré.

Onglets personnalisés et activité Web fiable

Les activités Web fiables étendent le protocole des onglets personnalisés et partagent la plupart de ses avantages. Toutefois, au lieu de fournir une UI personnalisée, elle permet aux développeurs d'ouvrir un onglet de navigateur sans aucune UI. Elle est recommandée aux développeurs qui souhaitent ouvrir leur propre progressive web app, en plein écran, dans leur propre application Android.

Où les onglets personnalisés sont-ils disponibles ?

La fonctionnalité Onglets personnalisés est compatible avec les navigateurs sur la plate-forme Android. Elle a été initialement introduite par Chrome dans la version 45. Le protocole est compatible avec la plupart des navigateurs Android.

Nous souhaitons recueillir vos commentaires, questions et suggestions concernant ce projet. Nous vous invitons donc à signaler les problèmes rencontrés sur crbug.com et à poser vos questions sur Twitter (@ChromiumDev).

Premiers pas

En plus de la démonstration GitHub, vous trouverez un certain nombre de guides pour vous aider à vous familiariser avec les onglets personnalisés.

Pour toute question, consultez la balise chrome-custom-tabs sur StackOverflow.