Activités Web fiables multi-origines

André Cipriani Bandarra

Les activités Web fiables constituent un nouveau moyen d'intégrer le contenu de vos applications Web, comme votre PWA, à votre application Android à l'aide d'un protocole basé sur les onglets personnalisés.

navigation ff-origin

Une activité Web fiable nécessite que les origines en cours d'ouverture soient validées à l'aide de Digital Asset Links, afin d'afficher le contenu en plein écran.

Lorsqu'un utilisateur quitte l'origine validée, l'interface utilisateur de l'onglet personnalisé s'affiche. Dans la barre d'adresse L'onglet indique aux utilisateurs qu'ils naviguent maintenant dans un domaine en dehors de l'application, en fournissant à l'utilisateur un bouton X qui lui permet de revenir rapidement à l'origine validée.

Mais il est aussi courant que les applications Web créent des expériences aux origines multiples. Voici un exemple : il s'agit d'une application d'achat avec l'expérience principale sur www.example.com, alors que l'interface de paiement flux est hébergé sur checkout.example.com.

Dans ce cas, il n'est pas souhaitable d'afficher les onglets personnalisés, non seulement parce que l'utilisateur se trouve dans la même application, mais aussi parce que la barre supérieure pourrait donner l'impression à l'utilisateur qu'il a quitté l'application et abandonnent le processus de paiement.

Les activités Web fiables permettent aux développeurs de valider plusieurs origines, et l'utilisateur restera dans en plein écran lors de la navigation entre ces origines. Comme pour le domaine principal, le développeur doit de contrôler chaque origine validée.

Configurer la validation pour plusieurs origines

Comme pour l'origine principale, la validation est effectuée via Digital Asset Links et chaque domaine à être validé doit disposer de son propre fichier assetlinks.json.

Dans notre exemple avec www.example.com et checkout.example.com, nous aurions ceci:

  • https://www.example.com/.well-known/assetlinks.json
  • https://checkout.example.com/.well-known/assetlinks.json

Étant donné que chaque domaine est connecté à la même application Android, les fichiers assetlinks.json sont exactement identiques.

En supposant que le nom du package de l'application Android est com.example.twa, les deux sont assetlink.json. contiennent des éléments de ce type:

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
  "namespace": "android_app",
  "package_name": "com.example",
   "sha256_cert_fingerprints": ["..."]}
}]

Ajouter plusieurs origines à l'application Android

Dans l'application Android, la déclaration asset_statements doit être mise à jour pour contenir tous origines à valider:

<string name="asset_statements">
[{
    \"relation\": [\"delegate_permission/common.handle_all_urls\"],
    \"target\": {
        \"namespace\": \"web\",
        \"site\": \"https://www.example.com\"
    }
}],
[{
    \"relation\": [\"delegate_permission/common.handle_all_urls\"],
    \"target\": {
        \"namespace\": \"web\",
        \"site\": \"https://checkout.example.com\"
    }
}],
</string>

Ajouter des origines supplémentaires à LauncherActivity

Utiliser l'élément "Launcher" par défaut

Le LauncherActivity qui fait partie de la bibliothèque Support android-browser-helper permet d'ajouter plusieurs origines à valider en configurant le projet Android.

Tout d'abord, ajoutez un élément string-array au fichier res/values/strings.xml. Chaque URL supplémentaire à validé se trouvera dans un sous-élément item:

...
<string-array name="additional_trusted_origins">
    <item>https://www.google.com</item>
</string-array>
...

Ensuite, ajoutez une nouvelle balise meta-data dans l'élément d'activité existant qui fait référence à LauncherActivity, dans AndroidManifest.xml:

...
<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
    android:label="@string/app_name">


    <meta-data
        android:name="android.support.customtabs.trusted.ADDITIONAL_TRUSTED_ORIGINS"
        android:resource="@array/additional_trusted_origins" />


    ...
</activity>
...

Utiliser une "LauncherActivity" personnalisée

Lorsque vous utilisez du code personnalisé pour lancer une activité Web fiable, vous pouvez ajouter des origines supplémentaires en Vous appelez setAdditionalTrustedOrigins lors de la création de l'intent pour lancer l'activité Web fiable:

public void launcherWithMultipleOrigins(View view) {
  List<String> origins = Arrays.asList(
      "https://checkout.example.com/"
  );


  TrustedWebActivityIntentBuilder builder = new TrustedWebActivityIntentBuilder(LAUNCH_URI)
      .setAdditionalTrustedOrigins(origins);


  new TwaLauncher(this).launch(builder, null, null);
}

Conclusion

Une fois ces étapes effectuées, l'activité Web de confiance est désormais compatible avec plusieurs origines. android-browser-helper propose un exemple d'application pour les activités Web fiables multi-origines. Marque assurez-vous de le vérifier.

Dépannage

La configuration de Digital Asset Links repose sur plusieurs éléments mobiles. Si l'application affiche toujours dans la barre d'onglets personnalisées située en haut, il est probable que la configuration pose problème.

Le Guide de démarrage rapide pour les activités sur le Web fiables comporte une excellente section de dépannage sur la façon de résoudre les problèmes liés à Digital Asset Links.

L'outil Asset Links de Peter, très pratique, permet de déboguer Digital Asset Links sur les applications installées sur l'appareil.