Utiliser des onglets Chrome personnalisés dans votre application Android – Joseph Muller

Pendant longtemps, les développeurs d’applications Android n’avaient que deux options pour accéder au contenu Web dans leurs applications mobiles. Utiliser une application tierce ou implémenter un natif Webview. Ces deux solutions étaient imparfaites et ont obligé les développeurs à faire des sacrifices dans les domaines de la performance ou de l’expérience de navigation.

Dans 2015 cependant, Onglets Chrome personnalisés ont été introduits comme une troisième option qui n’impliquait aucun sacrifice. En bref, les onglets personnalisés (Chrome) sont un composant léger que vous pouvez utiliser pour naviguer sur Internet dans ton application. Ils nécessitent moins de frais techniques, permettent des personnalisations visuelles et sont presque deux fois plus rapides que les deux anciennes options.

Lorsqu’un utilisateur doit ouvrir une URL, la solution la plus évidente consiste à ouvrir une application tierce capable de gérer la demande. Cela impliquerait de créer un intention qui transporte l’URL et l’envoie au système Android où il peut être associé à un filtre d’intention dans l’une des applications de l’appareil.

Les avantages

• Rapide et facile. Si vous avez une URL, vous pouvez la renvoyer rapidement vers le système Android et en finir avec elle.
• Respecte les préférences du navigateur de l’utilisateur. Si l’utilisateur a un navigateur préféré dans lequel il ouvre des liens URL, il y sera redirigé.
• Cookies utilisateur. Étant donné que l’utilisateur utilisera directement le navigateur dans lequel les cookies sont stockés, il bénéficiera de connexions plus rapides et de suggestions d’entrée.
• Fonctionnalités du navigateur. Des fonctionnalités telles que le partage de contenu, la recherche de mots dans une page Web et l’ouverture de plusieurs onglets seront disponibles.

Les inconvénients

• Transitions lourdes. Passer de l’interface de l’application mobile à une activité entièrement distincte peut être choquant.
• Aucune personnalisation de l’interface utilisateur. L’image de marque est impossible.
• Contrôle. Une fois que vous quittez votre application, vous n’avez plus le contrôle sur ce que voit l’utilisateur.

Les WebViews sont une vue qui peut afficher le contenu d’une page Web directement dans votre application.

Les avantages

• Transitions légères. Étant donné que WebView est intégré dans la mise en page de votre application, l’utilisateur ne remarquera aucun changement radical lors de la navigation entre les activités ou les fragments.
• Personnalisations de l’interface utilisateur. Le WebView est un objet View et peut donc être personnalisé comme tel.
• Contrôle. Si vous souhaitez modifier l’UX ou ajuster la façon dont l’utilisateur interagit avec, vous pouvez.

Les inconvénients

• Pas de cookies partagés. Sans accès aux données enregistrées de l’utilisateur, la navigation sera plus lente
• Aucune fonctionnalité de navigateur. Les applications de navigateur comme Chrome bénéficient de toutes les nouvelles fonctionnalités et mises à jour. Si vous utilisez une WebView, les améliorations et la maintenance deviennent votre responsabilité.
• Pas de sécurité. Dans une vue Web, « tout code malveillant a les mêmes droits que l’application« Vous devez donc vous assurer que les utilisateurs ne chargent aucune URL nuisible.
• Plus d’exigences techniques. Le chargement de HTML, CSS et JavaScript peut avoir des effets étranges et vous devrez peut-être traiter différemment différentes pages Web.
• Aucun entretien. Si vous créez une WebView, il est probable que vous serez le seul à la maintenir et parce que le Web est en constante évolution, vous risquez d’être dépassé à l’avenir.

Les onglets personnalisés sont pris en charge à partir de la version 45 de Chrome et offrent un moyen presque transparent de passer de votre application au Web. Ils sont rapides et personnalisables et vous devriez probablement passer à eux dès que possible. Si vous ne savez pas si vous devez les utiliser, consultez « Quand dois-je utiliser les onglets personnalisés Chrome par rapport aux vues Web« .

Les avantages

• Implémentation simple. Vous n’avez pas à vous soucier de la gestion des demandes de pages ou de l’octroi d’autorisations aux sites Web.
• Meilleure performance. En préchauffant le navigateur et en chargeant de manière préventive les URL, la navigation est extrêmement rapide.
• Transitions légères. Des onglets personnalisés s’ouvrent sur votre activité existante. La sélection de l’icône de fermeture dans le coin supérieur gauche de l’onglet vous ramène immédiatement à l’endroit où vous vous étiez arrêté.
• Personnalisations de l’interface utilisateur. Les onglets personnalisés vous permettent de modifier presque tout sur l’apparence de l’onglet. Les couleurs de la barre d’outils, les icônes d’action, les options de menu et le titre de la page Web peuvent tous être modifiés.
• Sensibilisation à la navigation. Les rappels reçus de l’onglet personnalisé peuvent être utilisés pour surveiller les mouvements de l’utilisateur dans l’onglet.
• Biscuits. Les onglets Chrome partagent des cookies avec le navigateur Chrome réel afin que les utilisateurs restent connectés à leurs sites Web préférés.
• Navigation sûre. Les onglets personnalisés de Chrome utilisent spécifiquement Navigation sécurisée de Google pour avertir les utilisateurs lorsqu’ils sont sur le point de naviguer vers un site potentiellement dangereux.

Les inconvénients

Alors que la plupart des gens semblent apprécier la commodité des onglets personnalisés, quelques personnes ont exprimé leurs critiques.

• Un seul onglet. C’est vrai, vous ne pouvez ouvrir qu’un seul onglet dans l’onglet Personnalisé à la fois et la seule façon d’accéder à un navigateur réel est via le menu « plus »
• Pas de barre de recherche. Contrairement à un navigateur réel, les onglets personnalisés ne vous permettent pas de rechercher une URL spécifique (ce n’est pas vraiment un problème si vous utilisez simplement la barre de recherche Google)
• Bugs occasionnels. Parlant à nouveau de la version Chrome des onglets personnalisés, l’onglet est essentiellement le navigateur. Cela signifie que tous les bogues qui se propagent dans Chrome seront également présents dans votre onglet.

Il s’avère qu’une implémentation de base de l’onglet personnalisé est incroyablement simple et directe. Quand je dis «basique», je veux dire que l’utilisateur peut cliquer sur un lien et être redirigé vers un onglet personnalisé Chrome où il peut naviguer à loisir.

Dépendances

Ajouter le dépendance la plus récente dans votre fichier gradle.build

Cela peut provoquer un problème de construction, mais vous pouvez résoudre ce problème en ajoutant cette aussi

la mise en oeuvre

Si vous utilisez un fragment, tout ce dont vous avez besoin est ce morceau de code:

Étapes pertinentes

1. le CustomTabsIntent.Builder est déclaré comme une variable de classe
2. le CutomTabsIntent est créé par le constructeur
3. L’intention est utilisée pour lancer l’URL spécifiée

Félicitations, votre application utilise maintenant des onglets personnalisés!

Bien que les onglets personnalisés en eux-mêmes soient cool, le code ci-dessus ne donne pas à votre application beaucoup de contrôle ou de compréhension de ce qui se passe dans le navigateur d’onglets. Plus important encore, vous ne saurez pas quand une nouvelle URL est chargée. Pour résoudre ce problème, nous devons utiliser le CustomTabsService.

Dépendances

Les dépendances pour cela sont les mêmes qu’avant.

la mise en oeuvre

C’est un peu plus compliqué et il y a encore quelques pièces en mouvement.

Étapes pertinentes

1. le CustomTabsServiceConnection, CustomTabsClient, CustomTabsSession, et CustomTabsIntent.Builder sont déclarés comme des variables
2. (onCreate) L’objet serviceConnection est créé. Notez que le nom du package stable est com.android.chrome
3. (onCreate) Le CustomTabsClient utilise le serviceConnection pour se lier au CustomTabsService
4. (onCreate) Lorsque le CustomTabsService est connecté, on récupère le client et on chauffe le navigateur
5. (onCreate) Un objet CustomTabsCallback personnalisé est créé
6. (onCreate) Le nouvel objet de rappel est attaché à une CustomTabsSession
7. (onCreate) La session est attachée au générateur d’intention
8. (onClick) Le CutomTabsIntent est créé par le constructeur
9. (onClick) L’intention est utilisée pour lancer l’URL spécifiée

Pour les apprenants visuels comme moi:

Cette version présente plusieurs avantages par rapport à l’alternative plus simple. Pour commencer, vous pouvez utiliser le onNavigationEvent() dans la classe CustomTabsCallback pour effectuer des actions en fonction du statut de l’onglet personnalisé (par exemple, s’il a commencé ou terminé le chargement d’une nouvelle page).

Vous pouvez également utiliser CustomTabsServiceClient pour réchauffer() Chrome et CustomTabsSession pour deviner quels liens peuvent être ouverts par l’utilisateur avec mayLaunchUrl().

Vous pouvez ajouter plusieurs URL à l’aide d’un paquet et la clé KEY_URL comme ça:

Comme indiqué ci-dessus, les onglets personnalisés bénéficient d’un large éventail de personnalisations possibles (cet exemple de Google couvre beaucoup):

• Changer les couleurs de la barre d’outils
• Basculer le titre de la barre d’outils
• Ajoutez l’option de partage au menu «plus»
• Changer l’icône de fermeture (il semble y avoir des problèmes avec la mise à jour de l’icône de fermeture comme indiqué ici. Notamment, la taille doit être 24dp x 24dp)
• Masquer la barre d’URL lors du défilement
• Modifier les animations d’entrée et de sortie (doit être une ressource R.anim – Découvrez tout cela sur le site Android Open Source!)