クイック スタートガイド

Peter Conn
Peter Conn

Trusted Web Activity は、設定に少し手間がかかります。特に、 ウェブサイトを表示します。 このガイドでは、Trusted Web Activity を使用する基本的なプロジェクトの作成、 網羅しているわけではありません

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

  • Bubblewrap を使用してアプリを構築している 信頼できるウェブ アクティビティを使用し、確認に合格するアプリです。
  • 署名鍵が使用されるタイミングを把握する。
  • Android アプリのビルドに使用されている署名を特定できるようにする。
  • 基本的なデジタル アセット リンク ファイルの作成方法を確認します。

このガイドの手順を進めるには、以下が必要です。

  • 開発用コンピュータに Node.js 10 以降がインストールされていること。
  • 開発用にセットアップされた Android スマートフォンまたはエミュレータ (USB デバッグを有効にする: 使用している場合)。
  • 開発用スマートフォンで信頼できるウェブ アクティビティをサポートするブラウザ。 Chrome 72 以降で動作します。他のブラウザでも近日中にサポートされる予定です。
  • 信頼できるウェブ アクティビティに表示するウェブサイト

信頼できるウェブ アクティビティを使用すると、Android アプリから全画面表示のブラウザタブを起動できます。 使用できます。 この機能は、所有するウェブサイトに限定されており、 デジタルアセットリンクを設定します詳細については、後ほど説明します。

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

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

Bubblewrap は、ライブラリとコマンドのセットです。 デベロッパーがプログレッシブ ウェブアプリを生成、構築、実行できるようにする Node.js 用 Line Tool(CLI) 使用して、信頼できるウェブ アクティビティを作成できます。

CLI は次のコマンドでインストールできます。

npm i -g @bubblewrap/cli

環境の設定

Bubblewrap を初めて実行すると、自動的にダウンロードとインストールの 依存関係が存在します。確実に保存されるように、ツールにこの操作を許可することをおすすめします。 依存関係が正しく構成されています。バブルラップのドキュメントを参照して、 既存の Java 開発キット(JDK)または Android コマンドライン ツールのインストール。

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

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

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

バブルラップはウェブ マニフェストを読み取り、 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 ビルダーには、バブルラップを使用する GUI インターフェースが用意されています。 ライブラリを使用して信頼できるウェブ アクティビティ プロジェクトを作成できます。手順について詳しくは、 PWA ビルダーを使用して、PWA を開く Android アプリを作成する こちらのブログ投稿をご覧ください。

署名鍵に関する注意事項

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