このページは Cloud Translation API によって翻訳されました。

TWA 用の PostMessage

Sayed El-Abady

Chrome 115 以降、Trusted Web Activity（TWA）で postMessage を使用してメッセージを送信できるようになりました。この記事では、アプリとウェブ間の通信に必要な設定について説明します。

このガイドを終えると、次のことができるようになります。 - クライアントとウェブコンテンツ検証の仕組みを理解する。 - クライアントとウェブコンテンツ間の通信チャネルを初期化する方法を理解している。 - ウェブコンテンツとのメッセージの送受信方法を理解する。

このガイドに記載された手順は以下のとおりです。

最新の androidx.browser（最小 v1.6.0-alpha02）ライブラリを build.gradle ファイルに追加する。
TWA の場合は Chrome バージョン 115.0.5790.13 以降。

window.postMessage() メソッドは、Window オブジェクト間のクロスオリジン通信を安全に有効にします。たとえば、ページとそれによって生成されたポップアップの間、ページとページ内に埋め込まれた iframe の間などです。

通常、異なるページのスクリプトが互いにアクセスすることは、ページが同じ生成元で、同じプロトコル、ポート番号、ホストを共有している場合にのみ許可されます（同一生成元ポリシーとも呼ばれます）。window.postMessage() メソッドは、異なるオリジン間で安全に通信するための制御されたメカニズムを提供します。これは、チャットアプリケーションやコラボレーションツールなどの実装に役立ちます。たとえば、チャットアプリケーションで postMessage を使用して、異なるウェブサイト上のユーザー間でメッセージを送信できます。Trusted Web Activity（TWA）で postMessage を使用するのは少し難しいかもしれません。このガイドでは、TWA クライアントの postMessage を使用してウェブページとの間でメッセージを送受信する方法について説明します。

アプリをウェブ検証に追加する

postMessage が機能するには、ウェブサイトと、このサイトで起動する Trusted Web Activity アプリの有効な関係が必要です。そのためには、assetlinks.json ファイルにアプリのパッケージ名を use_as_origin としてリレーションし、デジタルアセットリンク（DAL）で次のように指定します。

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

なお、TWA に関連付けられた送信元でのセットアップでは、MessageEvent.origin フィールドに送信元を指定する必要がありますが、postMessage を使用すると、デジタルアセットリンクを含まない他のサイトと通信できます。たとえば、www.example.com を所有している場合は、DAL を通じて証明する必要がありますが、他のウェブサイト（www.wikipedia.org など）と通信することもできます。

マニフェストに PostMessageService を追加する

postMessage の通信を受信するには、Android マニフェストに PostMessageService を追加してサービスをセットアップする必要があります。

<service android:name="androidx.browser.customtabs.PostMessageService"
android:exported="true"/>

CustomTabsSession インスタンスを取得する

マニフェストにサービスを追加したら、CustomTabsClient クラスを使用してサービスをバインドします。接続したら、次のように、提供されたクライアントを使用して新しいセッションを作成できます。CustomTabsSession は postMessage API を処理するためのコアクラスです。次のコードは、サービスが接続されると、クライアントを使用して新しいセッションを作成し、このセッションを使用して postMessage を行う方法を示しています。

private CustomTabsClient mClient;
private CustomTabsSession mSession;

// We use this helper method to return the preferred package to use for
// Custom Tabs.
String packageName = CustomTabsClient.getPackageName(this, null);

// Binding the service to (packageName).
CustomTabsClient.bindCustomTabsService(this, packageName, new CustomTabsServiceConnection() {
 @Override
 public void onCustomTabsServiceConnected(@NonNull ComponentName name,
     @NonNull CustomTabsClient client) {
   mClient = client;

   // Note: validateRelationship requires warmup to have been called.
   client.warmup(0L);

   mSession = mClient.newSession(customTabsCallback);
 }

 @Override
 public void onServiceDisconnected(ComponentName componentName) {
   mClient = null;
 }
});

この customTabsCallback インスタンスとは何でしょう。これは次のセクションで作成します。

CustomTabsCallback を作成する

CustomTabsCallback は、カスタムタブ内のイベントに関するメッセージを取得するための CustomTabsClient 用のコールバッククラスです。これらのイベントの 1 つが onPostMessage で、アプリがウェブからメッセージを受信すると呼び出されます。次のコードに示すように、クライアントにコールバックを追加して postMessage チャネルを初期化し、通信を開始します。

private final String TAG = "TWA/CCT-PostMessageDemo";
private Uri SOURCE_ORIGIN = Uri.parse("my-app-origin-uri");
private Uri TARGET_ORIGIN = Uri.parse("website-you-are-communicating-with");

// It stores the validation result so you can check on it before requesting postMessage channel, since without successful validation it is not posible to use postMessage.
boolean mValidated;

CustomTabsCallback customTabsCallback = new CustomTabsCallback() {

// Listens for the validation result, you can use this for any kind of
// logging purposes.
 @Override
 public void onRelationshipValidationResult(int relation, @NonNull Uri requestedOrigin,
     boolean result, @Nullable Bundle extras) {
   // If this fails:
   // - Have you called warmup?
   // - Have you set up Digital Asset Links correctly?
   // - Double check what browser you're using.
   Log.d(TAG, "Relationship result: " + result);
   mValidated = result;
 }

// Listens for any navigation happens, it waits until the navigation finishes
// then requests post message channel using
// CustomTabsSession#requestPostMessageChannel(sourceUri, targetUri, extrasBundle)

// The targetOrigin in requestPostMessageChannel means that you can be certain their messages are delivered only to the website you expect.
 @Override
 public void onNavigationEvent(int navigationEvent, @Nullable Bundle extras) {
   if (navigationEvent != NAVIGATION_FINISHED) {
     return;
   }

   if (!mValidated) {
     Log.d(TAG, "Not starting PostMessage as validation didn't succeed.");
   }

   // If this fails:
   // - Have you included PostMessageService in your AndroidManifest.xml ?
boolean result = mSession.requestPostMessageChannel(SOURCE_ORIGIN, TARGET_ORIGIN, new Bundle());
   Log.d(TAG, "Requested Post Message Channel: " + result);
 }

// This gets called when the channel we requested is ready for sending/receiving messages.
 @Override
 public void onMessageChannelReady(@Nullable Bundle extras) {
   Log.d(TAG, "Message channel ready.");

   int result = mSession.postMessage("First message", null);
   Log.d(TAG, "postMessage returned: " + result);
 }

// Listens for upcoming messages from Web.
 @Override
 public void onPostMessage(@NonNull String message, @Nullable Bundle extras) {
   super.onPostMessage(message, extras);
// Handle the received message.

 }
};

ウェブからの情報通信

ホストアプリとメッセージを送受信できるようになりました。ウェブからも同じことをするにはどうすればよいでしょうか。通信はホストアプリから開始する必要があり、ウェブページは最初のメッセージからポートを取得する必要があります。このポートは通信に使用されます。JavaScript ファイルは次の例のようになります。

window.addEventListener("message", function (event) {
  // We are receiveing messages from any origin, you can check of the origin by
  // using event.origin

  // get the port then use it for communication.
  var port = event.ports[0];
  if (typeof port === 'undefined') return;

  // Post message on this port.
  port.postMessage("Test")

  // Receive upcoming messages on this port.
  port.onmessage = function(event) {
    console.log("[PostMessage1] Got message" + event.data);
  };
});

完全なサンプルについては、こちらをご覧ください。

写真撮影: Joanna Kosinska（Unsplash）