Activités Web fiables multi-origines

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

Navigation ff-origin

Pour afficher le contenu en plein écran, les origines d'une activité Web fiable doivent être validées à l'aide de Digital Asset Links.

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 fournissant à l'utilisateur un bouton X qui leur permet de revenir rapidement à l'origine validée.

Toutefois, les applications Web créent souvent des expériences couvrant plusieurs origines. Par exemple, il peut s'agir d'une application d'achat dont l'expérience principale est sur www.example.com, tandis que le processus de paiement 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 peut lui faire croire qu'il a quitté l'application et abandonne le processus de règlement.

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 être en mesure 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 à valider doit disposer de son propre fichier assetlinks.json.

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

  • 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 fichiers assetlink.json contiennent un élément 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 à 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 "LauncherActivity" 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 à 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 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 uneLaunchActivity personnalisée

Lorsque vous utilisez du code personnalisé pour lancer une activité Web sécurisée, vous pouvez ajouter des origines en appelant setAdditionalTrustedOrigins lors de la création de l'intent pour lancer l'activité Web sécurisée:

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 sécurisée est compatible avec plusieurs origines. android-browser-helper propose un exemple d'application pour les activités Web fiables multi-origines. N'oubliez pas de la vérifier.

Dépannage

La configuration de Digital Asset Links comporte quelques variables. Si l'application affiche toujours la barre des onglets personnalisés en haut de l'écran, il est probable qu'un problème de configuration soit survenu.

Le Guide de démarrage rapide pour l'activité Web fiable propose une section de dépannage très utile pour déboguer les problèmes liés à Digital Asset Link.

Il existe également l'incroyable outil Asset Link de Peter, qui permet de déboguer Digital Asset Links dans les applications installées sur l'appareil.