De nombreuses raisons peuvent inciter les développeurs à utiliser Android sur le Web: par exemple, ils peuvent réutiliser un widget Web dans une application Android, intégrer du contenu propriétaire ou tiers, voire intégrer l'intégralité de leur application Web sur la plate-forme. Quel que soit le cas d'utilisation, Android dispose de nombreux outils pour le rendre possible.
Voici les dernières mises à jour apportées à ces outils. Exemple :
- Amélioration de la confidentialité et meilleure compatibilité avec les grands écrans, avec par exemple la possibilité de glisser-déposer des images dans WebView.
- Les onglets personnalisés sont désormais partiellement compatibles avec les onglets personnalisés.
- Fonctionnalités intégrées pour les PWA, telles que l'UI d'installation enrichie et l'API Play Billing dans les activités Web fiables
C'est parti !
WebView
WebView est la méthode la plus couramment utilisée pour intégrer du contenu Web dans des applications Android, car la grande majorité de ces applications utilisent WebView. C'est un excellent moyen d'intégrer parfaitement l'interface utilisateur Web dans les applications Android natives. Par exemple, vous pouvez intégrer différentes UI Web dans votre application, telles que des annonces, des widgets ou même des navigateurs intégrés à l'application. L'un des points forts de WebView est sa puissante API, qui permet de contrôler et de modifier le contenu Web en cours de chargement. Quoi de neuf dans WebView ?
En-tête X-Requested-With
Commençons par la confidentialité et l'abandon de l'en-tête X-Requested-With. Lorsqu'un utilisateur installe et exécute une application qui utilise un WebView pour intégrer du contenu Web, WebView ajoute l'en-tête X-Requested-With à chaque requête envoyée aux serveurs. La valeur de cet en-tête correspond au nom de l'APK de l'application. Cela signifie que chaque requête inclut des informations spécifiques sur le contexte dans lequel l'utilisateur consulte du contenu Web et divulgue l'identité de l'application au service en ligne. Pour protéger la confidentialité des utilisateurs, l'équipe WebView a lancé un essai d'abandon qui supprime cet en-tête de toutes les requêtes WebView.
Mais que se passe-t-il si votre application repose sur l'en-tête X-Requested-With ? Nous vous recommandons d'utiliser la nouvelle API d'activation qui vous permet d'envoyer de manière sélective l'en-tête de requête à des origines spécifiques. Vous bénéficiez ainsi du meilleur des deux mondes: vous pouvez continuer à prendre en charge les fonctionnalités existantes basées sur cet en-tête, tout en vous assurant que la confidentialité de l'utilisateur est préservée dans tous les autres cas. Si vous souhaitez conserver le comportement existant, vous pouvez également vous inscrire à la phase d'évaluation X-Requested-With Deprecation.
WebSettingsCompat.setRequestedWithHeaderOriginAllowList(
demoWebview.getSettings(), Collections.singleton("https://example.com")
);
Test WebView
Le prochain sujet est le test. Si vous êtes développeur Web et que vos sites Web reçoivent un trafic important en provenance de WebViews, deux mises à jour s'offrent à vous:
WebView est désormais compatible avec les phases d'évaluation de Chrome. La phase d'évaluation vous donne accès à des fonctionnalités nouvelles ou expérimentales dans Chrome. Vous pouvez les utiliser pour tester une nouvelle fonctionnalité avant qu'elle ne soit accessible à tous. Jusqu'à présent, les phases d'évaluation n'étaient disponibles que dans Chrome pour ordinateur et mobile, mais à partir de Chrome M110, elles fonctionnent également dans WebView.
Il est désormais beaucoup plus facile d'installer WebView Bêta. Nous vous recommandons vivement de tester votre site Web à l'aide de la version bêta de WebView afin de vous assurer qu'il fonctionne correctement dans les prochaines versions de WebView. Pour ce faire, rejoignez le programme de test bêta de WebView sur le Google Play Store. Votre appareil sera alors automatiquement enregistré.
Compatibilité avec les appareils à grand écran
Notre objectif est de faire fonctionner WebView correctement sur les appareils à grand écran. Dans cette direction, WebView est désormais compatible avec le glisser-déposer d'images. Par exemple, en mode Écran partagé, vous pouvez faire glisser une image d'une WebView vers une autre application.
Il est très facile d'ajouter un glisser-déposer à vos WebViews: il vous suffit de déclarer un DropDataProvider dans votre fichier AndroidManifest.
<application...>
...
<provider
android:authorities="com.example.webviewdemo.DropDataProvider"
android:name="androidx.webkit.DropDataContentProvider"
android:exported="false"
android:grantUriPermissions="true"/>
</application>
Pour les appareils à grand écran, Chrome et WebView sur Android U seront entièrement compatibles avec l'écriture manuscrite dans les champs de saisie de texte HTML, et avec des gestes de saisie permettant de supprimer du texte ou d'ajouter des espaces. L'écriture manuscrite est déjà disponible sur tous les appareils Samsung équipés de One UI 5.1, comme le S23 Ultra. Pour les autres appareils équipés d'Android T, vous pouvez activer l'écriture manuscrite dans les entrées HTML sous "Options pour les développeurs".
Jetpack JavaScript Engine
Parfois, vous devrez peut-être exécuter JavaScript dans votre application sans avoir à afficher de contenu Web, par exemple lorsque vous partagez une logique métier entre des applications Web et mobiles. Pour vous faciliter la tâche, nous avons lancé l'année dernière la version alpha du nouveau moteur JavaScript JetPack. Basée sur le moteur JavaScript V8, cette bibliothèque permet à votre application d'évaluer du code JavaScript ou WebAssembly sans créer d'instance WebView. Le nouveau moteur JavaScript exécute JavaScript dans un processus différent, ce qui en fait un moyen sûr et stable d'exécuter JavaScript dans votre application. De plus, il nécessite moins de ressources qu'une instance WebView.
ListenableFuture<JavaScriptSandbox> jsSandboxFuture =
JavaScriptSandbox.createConnectedInstanceAsync(JavaScriptEngineActivity.this);
JavaScriptIsolate jsIsolate = jsSandboxFuture.get().createIsolate();
final String code =
"function sum(a, b) { let r = a + b; return r.toString(); }; sum(3, 4)";
ListenableFuture<String> resultFuture = jsIsolate.evaluateJavaScriptAsync(code);
…
Onglets de personnalisation
WebView est idéal pour intégrer l'interface utilisateur Web à votre application. Mais qu'en est-il de la possibilité de permettre aux utilisateurs de parcourir du contenu Web dans votre application ?
Il s'agit d'un excellent cas d'utilisation des onglets personnalisés. Il s'agit d'un moyen simple et sécurisé de permettre aux utilisateurs de consulter le contenu Web dans votre application. Leur principal avantage est que les utilisateurs n'ont pas besoin de se reconnecter à leurs sites Web préférés. En effet, il s'agit d'une instance du navigateur par défaut de l'utilisateur et du partage des cookies. De plus, ils offrent toutes les fonctionnalités et API de la plate-forme Web prises en charge par le navigateur qui l'utilise.
Cela signifie également que si votre navigateur par défaut est Chrome, un onglet personnalisé est ouvert dans Chrome. Si le navigateur par défaut est Firefox, un onglet personnalisé s'ouvre dans Firefox. La plupart des principaux navigateurs d'Android sont compatibles avec les onglets personnalisés. Si le navigateur par défaut ne le permet pas, l'application du navigateur s'ouvre à la place.
L'avantage, c'est que vous pouvez adapter leur style à l'apparence de votre application, ajouter une interactivité personnalisée via des actions et utiliser vos propres barres d'outils.
Onglets personnalisés partiels
La personnalisation des onglets personnalisés a fait l'objet d'une amélioration majeure, et est désormais compatible avec les onglets personnalisés partiels. Elles permettent aux utilisateurs d'effectuer plusieurs tâches à la fois entre les applications et le Web. Jusqu'à présent, lorsque vous utilisiez des onglets personnalisés, la superposition des onglets de navigateur couvrait la totalité de l'écran. Vous pouvez désormais contrôler la hauteur de l'onglet personnalisé en superposition. De cette façon, les utilisateurs peuvent interagir avec votre application et son contenu Web en même temps. Si le navigateur de votre utilisateur n'est pas compatible avec les onglets personnalisés partiels, l'utilisateur verra simplement l'onglet personnalisé en plein écran compatible.
Il vous suffit de vous connecter au service d'onglets personnalisés, de transmettre la session à CustomTabsBuilder et d'appeler setActivityHeight.
CustomTabsSession customTabsSession;
// ...
CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder(customTabsSession)
.setInitialActivityHeightPx(500)
.setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
// ...
.build();
customTabsIntent.launchUrl(context, Uri.parse(url))
YouTube a lancé avec succès les onglets personnalisés intégrés redimensionnables pour les annonces à réponse directe. Elle a ainsi pu mettre en place une nouvelle façon d'interagir avec les annonces et le contenu Web sans interrompre l'expérience naturelle dans l'application.
Mais qu'en est-il des tablettes et des autres appareils à grand écran ? L'équipe Chrome travaille actuellement sur un nouvel affichage côte à côte des onglets personnalisés pour le mode Paysage et les appareils à grand écran. Lorsque vous définissez une largeur maximale d'onglet et un point d'arrêt, l'onglet personnalisé bascule automatiquement entre la superposition de la bottom sheet et l'interface côte à côte. Cette fonctionnalité est déjà disponible dans Canary et sera lancée autour du mois de juillet 2003. Si vous voulez l'essayer, consultez le code source de l'exemple d'application Chromium Custom Tabs.
Mesurer les signaux d'engagement
La deuxième mise à jour importante apportée aux onglets personnalisés consiste à mesurer l'engagement utilisateur spécifique à chaque session. Si votre application présente régulièrement du contenu à vos utilisateurs, y compris des liens (dans un flux d'actualités, par exemple), ne serait-il pas idéal de pouvoir identifier les liens qui sont utiles ou non ? Ces informations peuvent s'avérer très utiles lorsqu'il s'agit de hiérarchiser les liens à présenter à vos utilisateurs.
L'équipe Chrome a ajouté des métriques propres aux sessions dans les onglets personnalisés Chrome. En plus de la durée pendant laquelle un utilisateur reste sur une page, vous pouvez désormais obtenir une visibilité sur la distance et la direction de défilement, ainsi que sur l'engagement global avec le contenu Web.
Les signaux d'engagement sont disponibles à partir de Chrome 114 et nécessitent la bibliothèque Support androidx.browser:browser:1.6.0-alpha01 ou version ultérieure. Pour en savoir plus, consultez le guide de démarrage des signaux d'engagement.
PWA
Les PWA, un ensemble de technologies permettant de créer et de déployer sur le Web des expériences semblables à celles des applications, sont également mises à jour.
Si vous utilisez une PWA sur Android, vous pouvez installer votre application Web: elle sera installée avec les autres applications de la plate-forme, sur l'écran d'accueil, dans le lanceur d'applications, dans les paramètres et sur d'autres surfaces.
Les fonctionnalités des PWA sont basées sur des normes Web. Elles se concentrent sur la compatibilité multiplate-forme, ce qui donne aux développeurs les outils nécessaires pour créer une application Web une seule fois et permet aux utilisateurs de l'installer sur l'appareil de leur choix. Concevoir une application Web installable ne signifie pas que vous ne pouvez pas ou ne devriez pas avoir d'application Android native, mais il s'agit d'une autre option pour intégrer le Web sur Android.
Examinons quelques fonctionnalités qui permettent à votre application Web installable de se sentir à l'aise sur Android.
Nous voulions donner aux utilisateurs la possibilité d'installer les sites Web qui les intéressent le plus. La première étape consistait à supprimer le gestionnaire d'extraction du service worker comme exigence pour l'installation sur Android et Chrome. De plus, Chrome ignore le démarrage du service worker si le gestionnaire d'extraction est vide. Chrome effectuera des tests afin d'étendre l'accès à l'installation pour les utilisateurs. Gardez un œil sur celles-ci et n'hésitez pas à nous faire part de vos commentaires.
L'exigence de service worker permettait aux développeurs de créer une expérience utilisateur cohérente avec les autres applications Android. Elle pourrait être utilisée pour créer une page informant l'utilisateur qu'il ne peut pas utiliser l'application hors connexion.
Nous avons réalisé que nous pouvions alléger la charge de travail des développeurs et faire en sorte que ces applications offrent une bonne expérience installée dès le début. C'est pourquoi Chrome a ajouté une expérience hors connexion par défaut qui affiche aux utilisateurs un écran avec l'icône de l'application, leur indiquant qu'ils sont hors connexion, sans que les développeurs n'aient à intervenir.
Bien entendu, l'API Service Worker reste disponible pour créer des expériences hors connexion personnalisées et implémenter d'autres fonctionnalités telles que la mise en cache afin d'améliorer les performances.
Parmi les autres fonctionnalités permettant d'améliorer l'expérience d'application Web sur Android, citons l'interface utilisateur d'installation enrichie. En ajoutant les champs description et screenshots à votre fichier manifeste Web, vos utilisateurs bénéficieront d'une expérience d'installation plus proche de celle présentée sur les plates-formes de téléchargement d'applications pour décrire votre application.
Nous proposons également des raccourcis. En ajoutant un tableau appelé shortcuts qui décrit un ensemble d'actions rapides que vos utilisateurs effectuent fréquemment dans votre application, ils pourront y accéder en appuyant de manière prolongée sur l'icône de l'application.
À l'aide des API Web Share et Web Share Target, votre application peut interagir avec d'autres applications, comme n'importe quelle autre application de plate-forme. Votre application est alors proposée en option dans les feuilles de partage, et peut partager et recevoir des photos, des messages et d'autres fichiers.
Pour en savoir plus sur la façon dont les entreprises exploitent ces technologies, vous pouvez consulter la conférence I/O intitulée "Le Web: votre plate-forme pour la croissance".
Activité Web fiable
Un autre moyen d'importer le Web sur Android consiste à utiliser l'activité Web fiable (TWA).
Une application Web mobile est le meilleur moyen d'afficher du contenu Web propriétaire en plein écran dans votre application. C'est la solution idéale pour les développeurs qui souhaitent envelopper leur application Web comme une application Android ou utiliser leur site Web dans une seule application.
Sachez que la technologie TWA semble étroitement liée à une PWA, mais ce n'est pas le cas. Oui. Avec une activité Web fiable, vous pouvez publier votre application Web installable sur Google Play, mais vous pouvez également créer une seule activité sur le Web et l'inclure dans votre application Android.
Les activités Web fiables sont affichées dans le navigateur de l'utilisateur exactement de la même manière que pour celui-ci, sauf qu'elles s'exécutent en plein écran et qu'elles n'affichent pas de barre d'adresse. Cela signifie qu'elles sont compatibles avec toutes les fonctionnalités et API de la plate-forme Web compatibles avec le navigateur sur lequel elle est exécutée.
Voici quelques avantages liés à l'encapsulation d'une application Web à l'aide d'une technologie Web fiable:
Publier sur Google Play, ce qui permet à votre application d'être visible et distribuée sur Google Play Avoir accès à l'API Play Billing, qui permet aux développeurs de gérer les ventes de produits numériques dans leurs applications et de configurer plus facilement les produits, les ventes, les abonnements, etc. Déléguer les notifications et les autorisations de géolocalisation à l'application Android plutôt qu'au site Web
Consultez cet article pour découvrir comment ContactsDirect a utilisé la technologie TWA pour offrir des avantages à ses utilisateurs et tripler ses taux de conversion.
Conclusion
Comme vous l'avez vu, il existe de nombreuses options différentes pour intégrer du contenu Web dans votre application, et toutes ces options sont constamment améliorées.