Trusted Web Activity の設定は、特にウェブサイトを表示したいだけの場合には、難しいことがあります。このガイドでは、Trusted Web Activity を使用する小規模なプロジェクトを作成する方法について説明します。
このガイドを修了すると、次のことができるようになります。
- Bubblewrap を使用して、Trusted Web Activity を使用し、検証に合格するアプリケーションをビルドした。
- 署名鍵が使用されるタイミングを把握します。
- Android アプリケーションのビルドに使用されている署名を特定できること。
- 基本的な Digital Asset Links ファイルを作成する方法を理解している。
このガイドに沿って作業を進めるには、次のものが必要です。
- Node.js 10 以降。
- 接続され、開発用に設定された Android スマートフォンまたはエミュレータ。実機を使用している場合は、USB デバッグを有効にします。
- Trusted Web Activity をサポートするモバイル ブラウザ。
- Trusted Web Activity で表示するウェブサイト。
Android アプリで Trusted Web Activity を使用すると、ブラウザ UI なしで全画面表示のブラウザタブを起動できます。この機能は、所有しているウェブサイトに限定されます。所有権を証明するには、Digital Asset Links を設定します。
Trusted Web Activity を起動すると、ブラウザは Digital Asset Links を検証します。検証に失敗すると、ブラウザはウェブサイトを カスタムタブとして表示します。
Bubblewrap をインストールして構成する
Bubblewrap は、Trusted Web Activity を使用して、デベロッパーが Android アプリケーション内でプログレッシブ ウェブアプリを生成、ビルド、実行できるようにする、Node.js 用のライブラリとコマンドライン ツール(CLI)のセットです。
次のコマンドを実行して CLI をインストールします。
npm i -g @bubblewrap/cli
環境を設定する
Bubblewrap を初めて実行すると、必要な外部依存関係を自動的にダウンロードしてインストールするかどうかを尋ねられます。依存関係が正しく構成されるように、自動ダウンロードを許可することをおすすめします。既存の Java Development Kit(JDK)または Android コマンドライン ツールのインストールを使用するには、Bubblewrap のドキュメントをご覧ください。
プロジェクトを初期化してビルドする
PWA をラップする Android プロジェクトを初期化します。
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
これで、デバイスのランチャーでアプリを使用できるようになります。
アプリを開くと、ウェブサイトが Trusted Web Activity ではなく、カスタムタブとして起動していることがわかります。これは、デジタル アセット リンクの検証をまだ設定していないためです。
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(ルートからの相対パス)にアップロードします。署名鍵との関連性について詳しくは、Digital Asset Links の詳細をご覧ください。
ブラウザの確認
Trusted Web Activity は、ユーザーがデフォルトで選択したブラウザに準拠しようとします。ユーザーのデフォルト ブラウザが Trusted Web Activity をサポートしている場合は、それが起動します。インストールされているブラウザで Trusted Web Activities がサポートされている場合は、そのブラウザが選択されます。最後に、デフォルトの動作はカスタムタブ モードにフォールバックすることです。
つまり、Trusted Web Activity に関連するものをデバッグする場合は、想定しているブラウザを使用していることを確認する必要があります。使用されているブラウザを確認するには、次のコマンドを使用します。
> adb logcat -v brief | grep -e TWAProviderPicker
D/TWAProviderPicker(17168): Found TWA provider, finishing search: com.google.android.apps.chrome
次のステップ
このガイドに沿って作業を進めていれば、Trusted Web Activity が機能し、検証に失敗した場合にデバッグできるだけの知識が身についているはずです。まだの場合は、ウェブ デベロッパー向けの Android のコンセプトをご覧ください。
次のステップとして、アプリのアイコンを作成します。完了したら、Google Play ストアへのアプリのデプロイを検討できます。