Activités Web fiables multi-origines

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

Navigation ff-origin

Pour afficher le contenu en plein écran, une activité Web fiable doit valider les origines ouvertes à l'aide de liens de ressources numériques.

Lorsqu'un utilisateur quitte l'origine validée, l'interface utilisateur de l'onglet personnalisé s'affiche. La barre d'URL de l'onglet "Personnalisé" indique aux utilisateurs qu'ils naviguent désormais dans un domaine en dehors de l'application, tout en leur fournissant un bouton X qui leur permet de revenir rapidement à l'origine validée.

Il est toutefois courant que les applications Web créent des expériences couvrant plusieurs origines. Par exemple, une application d'achat dont l'expérience principale se trouve sur www.example.com, tandis que le parcours de paiement est hébergé sur checkout.example.com.

Dans ce cas, l'affichage des onglets personnalisés n'est pas souhaitable, non seulement parce que l'utilisateur se trouve dans la même application, mais aussi parce que la barre supérieure pourrait lui donner l'impression d'avoir quitté l'application et abandonné le paiement.

Les activités Web fiables permettent aux développeurs de valider plusieurs origines. L'utilisateur reste en plein écran lorsqu'il navigue entre ces origines. Comme pour le domaine principal, le développeur doit pouvoir 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 à valider doit disposer de son propre fichier assetlinks.json.

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

  • 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 se ressemblent exactement.

En supposant que le nom du package de l'application Android soit com.example.twa, les deux fichiers assetlink.json contiennent quelque chose de semblable à ce qui suit:

[{
  "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 toutes les origines qui doivent être validées:

<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 LauncherActivity par défaut

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

Commencez par ajouter un élément string-array au fichier res/values/strings.xml. Chaque URL supplémentaire à valider se trouve dans un sous-élément item:

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

Ajoutez ensuite 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 appelant 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 fiable est prête à prendre en charge plusieurs origines. android-browser-helper propose un exemple d'application pour les activités Web fiables multi-origines. Veillez à le vérifier.

Dépannage

La configuration de Digital Asset Links comporte plusieurs éléments. Si l'application affiche toujours la barre des onglets personnalisés en haut, il est probable que la configuration soit incorrecte.

Le guide de démarrage rapide des activités Web fiables contient une excellente section de dépannage sur la façon de déboguer les problèmes liés à l'association d'assets numériques.

Il existe également l'excellent outil de liaison d'assets de Peter, qui permet de déboguer les liens d'assets numériques sur les applications installées sur l'appareil.