Nouveautés pour le Web sur Android 2023

Les développeurs peuvent avoir de nombreuses raisons de transférer le Web vers Android : réutiliser un widget Web dans une application Android, intégrer du contenu propriétaire ou tiers, ou même transférer l'intégralité de leur application Web vers la plate-forme. Quel que soit le cas d'utilisation, Android dispose de nombreux outils pour le rendre possible.

Voici les dernières nouveautés de ces outils. Exemple :

  • Améliorations de la confidentialité et meilleure compatibilité avec les grands écrans, comme la prise en charge du glisser-déposer d'images dans WebView.
  • Les onglets personnalisés sont désormais compatibles avec les onglets personnalisés partiels.
  • Fonctionnalités intégrées pour les PWA, comme l'interface utilisateur d'installation enrichie et l'API Play Billing dans les activités Web fiables.

Voyons cela en détail.

WebView

WebView est le moyen le plus couramment utilisé pour intégrer du contenu Web dans des applications Android, car la grande majorité d'applications Android utilisent WebView. C'est un excellent moyen d'intégrer l'UI Web dans les expériences d'application Android natives. Par exemple, vous pouvez intégrer différentes interfaces utilisateur Web à votre application, comme des annonces, des widgets ou même des navigateurs intégrés. L'une des principales forces de WebView est sa puissante API permettant de contrôler et de modifier le contenu Web en cours de chargement. Alors, qu'est-ce qui a changé 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 composant WebView pour intégrer du contenu Web, celui-ci 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 consomme 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 test d'abandon qui supprime cet en-tête de toutes les requêtes WebView.

Mais que se passe-t-il si votre application s'appuie sur l'en-tête X-Requested-With ? Nous vous recommandons d'utiliser la nouvelle API nécessitant une activation, qui vous permet d'envoyer sélectivement 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 de l'abandon de l'en-tête X-Requested-With.

WebSettingsCompat.setRequestedWithHeaderOriginAllowList(
    demoWebview.getSettings(), Collections.singleton("https://example.com")
);

Test WebView

Le sujet suivant concerne les tests. Si vous êtes développeur Web et que vos sites Web reçoivent beaucoup de trafic provenant de WebViews, voici deux informations importantes :

  1. WebView est désormais compatible avec les tests d'origine Chrome. Les phases d'évaluation vous donnent 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 des origines n'étaient disponibles que dans Chrome pour ordinateur et mobile. À partir de Chrome M110, elles fonctionnent également dans WebView.

  2. Il est désormais beaucoup plus facile d'installer WebView Bêta. Nous vous recommandons vivement de tester votre site Web avec le canal bêta de WebView pour 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 et votre appareil sera automatiquement enregistré.

Capture d'écran du site Web permettant de rejoindre le programme bêta WebView.

Compatibilité avec les appareils à grand écran

Notre objectif est de faire en sorte que WebView fonctionne bien sur les appareils à grand écran. WebView est désormais compatible avec le glisser-déposer d'images. Par exemple, en mode Écran partagé, vous pouvez faire glisser une image depuis une WebView vers une autre application.

Il est très facile d'ajouter le 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>

En ce qui concerne 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, ainsi que des gestes de saisie pour supprimer du texte ou ajouter des espaces. La prise en charge de l'écriture manuscrite est déjà disponible pour 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".

Moteur JavaScript Jetpack

Parfois, vous devrez peut-être exécuter JavaScript dans votre application sans 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'version alpha du nouveau moteur JavaScript Jetpack l'année dernière. Cette bibliothèque utilise V8, le moteur JavaScript de Chrome, et permet à votre application d'évaluer le code JavaScript ou WebAssembly sans créer d'instance WebView. L'avantage du nouveau moteur JavaScript est qu'il exécute votre code JavaScript dans un processus différent, ce qui constitue un moyen sécurisé et stable d'exécuter JavaScript dans votre application. Il nécessite également 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

Onglet personnalisé Android avec le style par défaut.

WebView est idéal pour intégrer une UI Web à votre application. Mais que faire pour permettre aux utilisateurs de parcourir du contenu Web dans votre application ?

Il s'agit d'un excellent cas d'utilisation pour les onglets personnalisés. Il s'agit d'un moyen sûr et convivial de permettre aux utilisateurs d'afficher du contenu Web dans votre application. Leur principal avantage est qu'ils 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 des cookies qu'il partage. Elles offrent toutes les fonctionnalités et API de la plate-forme Web compatibles avec le navigateur qui les alimente.

Cela signifie également que si votre navigateur par défaut est Chrome, un onglet personnalisé s'ouvre dans Chrome. Si votre navigateur par défaut est Firefox, un onglet personnalisé s'ouvre dans Firefox. La plupart des principaux navigateurs sur Android sont compatibles avec les onglets personnalisés. Si le navigateur par défaut ne l'est pas, l'application du navigateur s'ouvre à la place.

L'avantage des onglets personnalisés, c'est que vous pouvez les adapter au style de votre application, ajouter une interactivité personnalisée via les actions et créer vos propres barres d'outils.

Onglet personnalisé Android avec un thème de couleur et des barres d&#39;outils personnalisés.

Onglets personnalisés partiels

La personnalisation des onglets personnalisés a fait l'objet d'une mise à niveau majeure avec la prise en charge des onglets personnalisés partiels. Ils permettent aux utilisateurs de passer d'une application à une autre et d'utiliser le Web. Jusqu'à présent, lorsque vous utilisiez les onglets personnalisés, la superposition des onglets du navigateur couvrait la totalité de l'écran. Vous pouvez désormais contrôler la hauteur de la superposition de l'onglet personnalisé. De cette façon, les utilisateurs peuvent interagir en même temps avec votre application et votre contenu Web. Si le navigateur de l'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 Custom Tabs, 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 de réponse directe. Ils ont ainsi pu mettre en place une nouvelle façon d'interagir avec les annonces et les contenus Web sans interrompre l'expérience naturelle dans l'application.

Expérience publicitaire avec réponse directe sur YouTube avec des onglets personnalisés partiels

Mais qu'en est-il des tablettes et des autres appareils à grand écran ? L'équipe Chrome travaille actuellement sur une nouvelle expérience côte à côte des onglets personnalisés pour les appareils en mode Paysage et les appareils à grand écran. En définissant une largeur maximale d'onglet, ainsi qu'un point d'inflexion, l'expérience d'onglet personnalisé bascule automatiquement entre la superposition de la bottom sheet et l'expérience côte à côte. Cette fonctionnalité est déjà disponible dans Canary et sera lancée vers juillet 2003. Si vous souhaitez essayer, consultez le code source de l'exemple d'application Chromium pour les onglets personnalisés.

Onglets personnalisés affichés côte à côte avec le contenu principal de l&#39;application.

Mesurer les signaux d'engagement

La deuxième grande nouveauté des onglets personnalisés consiste à mesurer l'engagement des utilisateurs en fonction de la session. Si votre application affiche régulièrement des contenus incluant des liens, par exemple dans un flux d'actualités, ne serait-il pas utile de savoir quels liens un utilisateur trouve utiles et lesquels non ? Ces informations peuvent être très utiles pour déterminer les liens à afficher en priorité pour vos utilisateurs.

L'équipe Chrome a ajouté la visibilité des métriques spécifiques à la session aux onglets personnalisés Chrome. En plus de la durée de la visite d'un utilisateur sur une page, vous pouvez désormais également connaître la distance de défilement, la direction de défilement et l'engagement global avec le contenu Web.

Les signaux d'engagement sont disponibles à partir de Chrome 114 et nécessitent la bibliothèque d'assistance androidx.browser:browser:1.6.0-alpha01 ou une version ultérieure. Pour en savoir plus, consultez le guide de démarrage des signaux d'engagement.

PWA

Des mises à jour sont également apportées aux PWA, un ensemble de technologies qui permettent de créer des expériences dignes d'une application, conçues et déployées sur le Web.

Avec les PWA sur Android, votre application Web peut être installable : elle s'affichera 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 conçues sur la base de normes Web. Elles se concentrent sur la compatibilité multiplate-forme, ce qui permet aux développeurs de créer une application Web une seule fois et aux utilisateurs de l'installer sur l'appareil de leur choix. Créer une application Web installable ne signifie pas que vous ne pouvez ou ne devez pas avoir une application Android native, mais il s'agit d'une autre option pour rendre le Web sur Android.

Passons en revue quelques fonctionnalités qui font de votre application Web installable comme à l'aise sur Android.

Nous voulons permettre aux utilisateurs d'installer les sites Web qui les intéressent le plus. La première étape a consisté à supprimer le gestionnaire d'extraction du service worker, qui n'est désormais plus obligatoire pour l'installation sur Android et Chrome. De plus, Chrome ne démarrera pas le service worker si le gestionnaire de récupération est vide. Chrome va lancer des tests pour étendre l'accès à l'installation pour les utilisateurs. Tenez-en compte 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. Vous pouvez l'utiliser pour créer une page informant l'utilisateur qu'il ne peut pas utiliser l'application lorsqu'il est hors connexion.

Nous avons réalisé que nous pouvions alléger la charge de travail des développeurs et nous assurer que ces applications offrent une bonne expérience d'installation dès le départ. C'est pourquoi Chrome a ajouté une expérience hors connexion par défaut qui affiche un écran avec l'icône de l'application pour indiquer aux utilisateurs qu'ils sont hors connexion, sans que les développeurs aient à effectuer de travail supplémentaire.

Bien entendu, l'API service worker est toujours disponible pour créer des expériences hors connexion personnalisées et implémenter d'autres fonctionnalités telles que la mise en cache pour améliorer les performances.

L'interface utilisateur d'installation améliorée est une autre fonctionnalité qui peut offrir une expérience d'application Web optimisée sur Android. 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 que les plates-formes de téléchargement d'applications affichent pour décrire votre application.

Nous avons aussi 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.

Grâce aux 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 sera proposée dans les feuilles de partage et pourra partager et recevoir des photos, des textes et d'autres fichiers.

Pour en savoir plus sur la façon dont les entreprises exploitent ces technologies, regardez la conférence I/O "Le Web : votre plate-forme de croissance".

Activité Web fiable

Un autre moyen d'amener le Web à Android consiste à utiliser l'activité Web fiable.

Les TWA sont le meilleur moyen d'afficher du contenu Web propriétaire en plein écran dans votre application. Il s'agit de la solution idéale pour les développeurs qui souhaitent encapsuler leur application Web en tant qu'application Android ou utiliser leur site Web dans une application.

Notez que TWA semble être strictement lié aux PWA, mais ce n'est pas le cas. Oui, en utilisant une activité Web fiable, vous pouvez publier votre application Web installable sur Google Play. Vous pouvez également créer une seule activité sur le Web et l'inclure dans votre application Android.

Une activité Web fiable est affichée par le navigateur de l'utilisateur exactement comme un utilisateur le verrait dans son navigateur, sauf qu'elle s'exécute en plein écran et qu'elle n'affiche pas de barre d'adresse. Cela signifie qu'ils sont compatibles avec toutes les fonctionnalités et API de la plate-forme Web prises en charge par le navigateur qui les alimente.

Voici quelques-uns des avantages qu'offre l'encapsulation de votre application Web à l'aide d'une TWA:

Publier votre application sur Google Play, ce qui lui permet d'accéder à la visibilité et à la distribution de 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, ce qui facilite la configuration des produits, des ventes, des abonnements, etc. Déléguer les autorisations de notification et de géolocalisation à l'application Android plutôt qu'au site Web

Consultez cet article pour découvrir comment ContactsDirect a utilisé TWA pour le bénéfice de ses utilisateurs et a triplé ses taux de conversion.

Conclusion

Comme vous l'avez vu, il existe de nombreuses options pour intégrer du contenu Web dans votre application. Toutes ces options sont en constante amélioration.