クイック スタートガイド

Peter Conn
Peter Conn

Trusted Web Activity の設定は、特にウェブサイトを表示するだけの場合は、設定が少し難しい場合があります。このガイドでは、Trusted Web Activity を使用する基本的なプロジェクトの作成手順について説明し、すべての問題点をカバーします。

このガイドを終えると、次のことができるようになります。

  • Bubblewrap を使用して、信頼できるウェブ アクティビティを使用して検証に合格するアプリケーションをビルドした。
  • 署名鍵がいつ使用されるかを把握します。
  • Android アプリケーションのビルドに使用する署名を特定できるようにする。
  • 基本的なデジタル アセット リンク ファイルの作成方法を理解する。

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

  • Node.js 10 以降が開発用コンピュータにインストールされていること。
  • 接続され、開発用にセットアップされた Android スマートフォンまたはエミュレータ(実機を使用している場合は、USB デバッグを有効にする)。
  • 開発用スマートフォンで Trusted Web Activity をサポートするブラウザ。 Chrome 72 以降が動作します。現在、他のブラウザでもサポートしています。
  • Trusted Web Activity に表示するウェブサイト。

Trusted Web Activity を使用すると、Android アプリはブラウザ UI なしで全画面ブラウザタブを起動できます。この機能の使用は所有するウェブサイトに限定されており、デジタル アセット リンクを設定して証明します。詳しくは後ほど説明します。

信頼できるウェブ アクティビティを起動すると、ブラウザはデジタル アセット リンクのチェックアウトを確認します。これを検証と呼びます。検証で不合格だと、ブラウザは代わりにウェブサイトをカスタムタブとして表示します。

Bubblewrap をインストールして設定する

Bubblewrap は、Node.js 用のライブラリとコマンドライン ツール(CLI)のセットです。デベロッパーは、Trusted Web Activity を使用して、Android アプリ内でプログレッシブ ウェブアプリを生成、ビルド、実行できます。

CLI は次のコマンドを使用してインストールできます。

npm i -g @bubblewrap/cli

環境の設定

Bubblewrap を初めて実行する場合、必要な外部依存関係のダウンロードとインストールが自動的に選択されます。依存関係が正しく構成されることが保証されるため、ツールによるこの処理を許可することをおすすめします。既存の Java 開発キット(JDK)または Android コマンドライン ツールのインストールを使用するには、Bubblewrap のドキュメントを確認してください。

プロジェクトの初期化とビルド

PWA をラップする Android プロジェクトを初期化するには、init コマンドを実行します。

bubblewrap init --manifest=https://my-twa.com/manifest.json

Bubblewrap はウェブ マニフェストを読み取り、Android プロジェクトで使用する値を確認するようデベロッパーに依頼し、それらの値を使用してプロジェクトを生成します。プロジェクトが生成されたら、次のコマンドを実行して APK を生成します。

bubblewrap build

ランニング

ビルドステップにより、app-release-signed.apk というファイルが出力されます。このファイルは、テスト用に開発デバイスにインストールすることも、リリース用に Google Play ストアにアップロードすることもできます。

Bubblewrap には、ローカル デバイスにアプリをインストールしてテストするためのコマンドが用意されています。開発用デバイスをコンピュータに接続して、次のコマンドを実行します。

bubblewrap install

または、adb ツールを使用することもできます。

adb install app-release-signed.apk

アプリがデバイス ランチャーに表示されます。アプリを開くと、ウェブサイトが信頼できるウェブ アクティビティではなくカスタムタブとして起動されていることに気付くでしょう。これは、デジタル アセット リンクの検証がまだ設定されていないためですが、

Bubblewrap のグラフィカル ユーザー インターフェース(GUI)の代替手段

PWA ビルダーは、Bubblewrap ライブラリを使用する GUI インターフェースを提供し、Trusted Web Activity プロジェクトの生成を促進します。PWA ビルダーを使用して PWA を開く Android アプリを作成する方法については、こちらのブログ投稿をご覧ください。

署名鍵に関する注意事項

デジタル アセット リンクでは、APK の署名に使用された鍵が考慮されます。検証が失敗する一般的な原因は、間違った署名を使用することです。(確認に失敗した場合、ブラウザ UI がページの上部に表示されるカスタムタブとしてウェブサイトが起動されます)。Bubblewrap がアプリをビルドすると、init ステップで鍵を設定して APK が作成されます。ただし、Google Play でアプリを公開すると、選択した署名鍵の処理方法によっては、別の鍵が作成されることがあります。詳しくは、署名鍵と、Bubblewrap と Google Play との関係をご覧ください。

デジタル アセット リンクは基本的に、アプリを指すウェブサイト上のファイルと、ウェブサイトを指すアプリ内のメタデータで構成されます。

assetlinks.json ファイルを作成したら、ウェブサイトのルートからの相対パス .well-known/assetlinks.json にアップロードして、ブラウザでアプリを適切に検証できるようにします。署名鍵との関係について詳しくは、デジタル アセット リンクについての説明をご覧ください。

ブラウザを確認しています

Trusted Web Activity は、ユーザーが選択したデフォルトのブラウザに準拠しようとします。 ユーザーのデフォルトのブラウザが Trusted Web Activity をサポートしている場合は、Trusted Web Activity が起動します。 それに失敗し、インストールされているブラウザのいずれかが Trusted Web Activity をサポートしている場合は、Trusted Web Activity が選択されます。 デフォルトの動作では、カスタムタブ モードにフォールバックします。

つまり、Trusted Web Activity に関連する内容をデバッグする場合は、想定しているブラウザを使用していることを確認する必要があります。次のコマンドを使用すると、使用されているブラウザを確認できます。

> adb logcat -v brief | grep -e TWAProviderPicker
D/TWAProviderPicker(17168): Found TWA provider, finishing search: com.google.android.apps.chrome

次のステップ

このガイドの手順に従うことで、信頼できるウェブ アクティビティが機能し、確認が失敗した場合に何が起こっているかをデバッグするための十分な知識が身に付いていることを願っています。そうでない場合は、ウェブ デベロッパー向けの Android のコンセプトをご覧になるか、こちらのドキュメントに対して GitHub の問題を提出してください。

次のステップでは、アプリのアイコンを作成することをおすすめします。完了したら、アプリを Google Play ストアにデプロイすることを検討してください。