Trusted Web Activity の設定は、特にウェブサイトを表示するだけの場合は少し複雑です。このガイドでは、信頼できるウェブ アクティビティを使用する基本的なプロジェクトを作成する方法について説明します。
このガイドを終えると、次のことができるようになります。
- Bubblewrap を使用して、Trusted Web Activity を使用し、検証に合格するアプリケーションを作成した。
- 署名鍵が使用されるタイミングを理解する。
- Android アプリがビルドされている署名を特定できる。
- 基本的な Digital Asset Links ファイルを作成する方法を理解する。
このガイドに沿って操作するには、次のものが必要です。
- 開発用パソコンに 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 Development Kit（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 Builder は、Bubblewrap ライブラリを使用して Trusted Web Activity プロジェクトの生成を可能にする GUI インターフェースを提供します。PWA Builder を使用して PWA を開く Android アプリを作成する方法については、こちらのブログ投稿をご覧ください。
署名鍵に関する注意事項
デジタル アセットリンクでは、APK が署名された鍵が考慮されます。検証が失敗する一般的な原因は、間違った署名を使用していることです。（確認に失敗すると、ウェブサイトはページ上部のブラウザ UI でカスタムタブとして起動されます）。Bubblewrap がアプリをビルドすると、init ステップで鍵が設定された APK が作成されます。ただし、Google Play でアプリを公開する際に、署名鍵の処理方法によっては、別の鍵が作成される場合があります。詳しくは、署名鍵と Bubblewrap と Google Play との関係をご覧ください。
アセットリンク ファイルの設定
デジタル アセット リンクは、基本的に、アプリを参照するウェブサイト上のファイルと、ウェブサイトを参照するアプリ内のメタデータで構成されます。
assetlinks.json ファイルを作成したら、ブラウザでアプリを適切に検証できるように、ルートからの相対パス .well-known/assetlinks.json でウェブサイトにアップロードします。デジタル アセットリンクと署名鍵の関係について詳しくは、デジタル アセットリンクの詳細をご覧ください。
ブラウザの確認
信頼できるウェブ アクティビティは、ユーザーがデフォルトで選択したブラウザに準拠しようとします。ユーザーのデフォルト ブラウザが 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 ストアにデプロイすることを検討できます。