マルチオリジンの信頼できるウェブ アクティビティ

André Cipriani Bandarra

Trusted Web Activity は、カスタムタブに基づくプロトコルを使用して、PWA などのウェブアプリ コンテンツを Android アプリと統合する新しい方法です。

ff-origin ナビゲーション

Trusted Web Activity でコンテンツを全画面で表示するには、デジタル アセット リンクを使用して、開かれているオリジンを検証する必要があります。

検証済みのオリジンからユーザーが移動すると、カスタムタブの UI が表示されます。カスタムタブの URL バーは、ユーザーがアプリケーション外のドメイン内を移動していることをユーザーに示し、検証済みのオリジンにすばやく戻ることができる X ボタンを表示します。

しかし、ウェブアプリでは、複数のオリジンにまたがるエクスペリエンスを作成することも一般的です。たとえば、www.example.com でメイン エクスペリエンスを提供するショッピング アプリケーションがあり、購入手続きフローは checkout.example.com でホストされます。

そのような場合、カスタムタブを表示するのは望ましくありません。ユーザーが同じアプリケーションを使用しているだけでなく、上部のバーが表示されると、ユーザーがアプリを離れて購入手続きをやめたと思わせる可能性があるためです。

Trusted Web Activity を使用すると、デベロッパーは複数のオリジンを検証できます。ユーザーはこれらのオリジン間を移動しても全画面表示のままになります。メインドメインと同様に、デベロッパーは検証された各送信元を制御できる必要があります。

複数のオリジンの検証の設定

メインのオリジンと同様に、検証はデジタル アセット リンクを介して行われ、検証する各ドメインには独自の assetlinks.json ファイルが必要です。

たとえば、www.example.com と checkout.example.com の場合は、次のようになります。

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

各ドメインは同じ Android アプリに接続されるため、assetlinks.json ファイルはまったく同じように見えます。

Android アプリのパッケージ名が com.example.twa の場合、両方の assetlink.json ファイルは次のようになります。

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

Android アプリに複数のオリジンを追加する

Android アプリでは、検証が必要なすべてのオリジンが含まれるように asset_statements 宣言を更新する必要があります。

<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>

LauncherActivity にオリジンを追加する

デフォルトの LauncherActivity を使用する

android-browser-helper サポート ライブラリの一部である LauncherActivity を使用すると、Android プロジェクトを構成することで、検証するオリジンを複数追加できます。

まず、res/values/strings.xml ファイルに string-array 要素を追加します。検証する各 URL は、item サブ要素内に指定します。

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

次に、LauncherActivity を参照する既存のアクティビティ要素内に、AndroidManifest.xml 内で新しい meta-data タグを追加します。

...
<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>
...

カスタム LauncherActivity を使用する

カスタムコードを使用して Trusted Web Activity を起動する場合、Trusted Web Activity を起動するインテントのビルド時に setAdditionalTrustedOrigins を呼び出すと、オリジンを追加できます。

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);
}

おわりに

これで、Trusted Web Activity で複数のオリジンをサポートできるようになりました。android-browser-helper には、複数のオリジンの Trusted Web Activity のサンプル アプリケーションが用意されています。必ず確認してください。

トラブルシューティング

デジタル アセット リンクの設定は、段階的に行う必要があります。引き続きアプリケーションの上部にカスタムタブバーが表示される場合は、設定に問題がある可能性があります。

Trusted Web Activity クイック スタートガイドには、デジタル アセット リンクの問題をデバッグする方法に関する優れたトラブルシューティング セクションがあります。

また、Peter's Asset Link Tool もあります。これは、デバイスにインストールされているアプリでのデジタル アセット リンクのデバッグに役立ちます。