Android アプリで PWA を起動する
プログレッシブ ウェブアプリ（PWA）は、アプリのような機能を使用して、高速で信頼性が高く、魅力的な高品質のエクスペリエンスを実現するウェブ アプリケーションです。
ウェブはリーチが非常に広く、ユーザーが新しいエクスペリエンスを発見するための強力な手段を提供します。しかし、ユーザーはオペレーティング システムのストアでアプリケーションを検索することにも慣れています。多くの場合、これらのユーザーは、探しているブランドやサービスをすでに知っており、意図性が高いため、エンゲージメント指標が平均よりも高くなります。
Google Play ストアは Android アプリのストアであり、デベロッパーは Android アプリからプログレッシブ ウェブアプリを開きたいと考えることがよくあります。
Trusted Web Activity は、Android アプリ内で PWA をレンダリングする、ウェブ プラットフォームと完全に互換性のあるコンテナをブラウザが提供できるようにするオープン標準です。この機能は Chrome で利用でき、Firefox Nightly で開発中です。
既存のソリューションには制限があった
Android WebView などのテクノロジーや Cordova などのフレームワークを使用することで、Android アプリにウェブ エクスペリエンスを組み込むことは常に可能でした。
Android WebView の制限は、ブラウザの代替として設計されていないことです。Android WebView は、Android アプリでウェブ UI を使用するためのデベロッパー ツールであり、連絡先選択ツールやファイル システムなど、最新のウェブ プラットフォーム機能への完全なアクセスは提供しません。
Cordova は WebView の欠点を補うように設計されていますが、API は Cordova 環境に限定されています。つまり、Android アプリで Cordova API を使用するには、オープンウェブ上の PWA とは別に、追加のコードベースを維持する必要があります。
また、機能の検出可能性が期待どおりに機能しないことも多く、Android のバージョンと OEM の間の互換性の問題も発生する可能性があります。これらのソリューションを使用する場合、開発者は追加の品質保証プロセスを必要とし、回避策を検出して作成するために追加の開発費用が発生します。
Trusted Web Activity は、Android 上のウェブアプリ用の新しいコンテナです。
デベロッパーは、Trusted Web Activity をコンテナとして使用して、Android アプリの起動アクティビティとして PWA を含めることができるようになりました。このテクノロジーは、ブラウザを活用して PWA を全画面表示でレンダリングし、Trusted Web Activity が、基盤となるブラウザと同じウェブ プラットフォームの機能や API との互換性を確保できるようにします。また、Trusted Web Activity を使用して Android アプリをより簡単に実装できるようにするオープンソース ユーティリティもあります。
他のソリューションにはないもう 1 つの利点は、コンテナがブラウザと共有ストレージを共有することです。ログイン状態とユーザー設定は、エクスペリエンス間でシームレスに共有されます。
ブラウザの互換性
この機能は、Chrome ではバージョン 75 以降で利用可能であり、Firefox では Nightly バージョンで実装されています。
品質基準
ウェブ デベロッパーは、Android アプリにウェブ コンテンツを含める場合に Trusted Web Activity を使用する必要があります。
Trusted Web Activity のウェブ コンテンツは、PWA のインストール要件を満たしている必要があります。
また、Android アプリでユーザーが期待する動作に合わせるため、Chrome 86 で変更が導入され、次のシナリオを処理できない場合はクラッシュと見なされるようになりました。
- アプリの起動時にデジタル アセットリンクを検証できない。
- オフライン ネットワーク リソース リクエストに対して HTTP 200 が返されませんでした。
- ナビゲーション リクエストが HTTP 404 または 5xx エラーを返す」
Trusted Web Activity でこれらのシナリオのいずれかが発生すると、Android アプリケーションがクラッシュし、ユーザーに表示されます。サービス ワーカーでこれらのシナリオを処理する方法については、ガイダンスをご覧ください。
また、アプリはポリシーへの準拠など、Android 固有の追加の条件も満たしている必要があります。
ツール
Trusted Web Activity を利用したいウェブ デベロッパーは、PWA を Android アプリに変換するために新しいテクノロジーや API を学ぶ必要はありません。Bubblewrap と PWABuilder は、ライブラリ、コマンドライン インターフェース（CLI）、グラフィカル ユーザー インターフェース（GUI）の形式でデベロッパー ツールを提供します。
Bubblewrap
Bubblewrap プロジェクトは、NodeJS ライブラリとコマンドライン インターフェース（CLI）の形式で Android アプリを生成します。
新しいプロジェクトをブートストラップするには、ツールを実行してウェブ マニフェストの URL を渡します。
npx @bubblewrap/cli init --manifest=https://pwa-directory.appspot.com/manifest.json
このツールはプロジェクトをビルドすることもできます。次のコマンドを実行すると、Google Play ストアにアップロードできる Android アプリケーションが出力されます。
npx @bubblewrap/cli build
このコマンドを実行すると、プロジェクトのルート ディレクトリに app-release-signed.apk というファイルが作成されます。このファイルが Google Play ストアにアップロードされます。
PWABuilder
PWABuilder は、デベロッパーが既存のウェブサイトをプログレッシブ ウェブアプリに変換するのに役立ちます。また、Bubblewrap と統合して、PWA を Android アプリにラップするための GUI インターフェースを提供します。PWABuilder チームは、このツールを使用して Android アプリケーションを生成する方法について、優れたブログ投稿を公開しています。
Android アプリで PWA の所有権を確認する
優れたプログレッシブ ウェブアプリを構築しているデベロッパーは、別のデベロッパーが許可なくそのアプリを使用して Android アプリを構築することを望まないでしょう。これを防ぐには、Digital Asset Links というツールを使用して、Android アプリをプログレッシブ ウェブアプリとペア設定する必要があります。
Bubblewrap と PWABuilder は、Android アプリケーションで必要な構成を処理しますが、最後のステップとして、assetlinks.json ファイルを PWA に追加する必要があります。
このファイルを生成するには、ユーザーがダウンロードする APK の署名に使用される鍵の SHA-256 署名が必要です。
鍵は複数の方法で生成できます。エンドユーザーに提供される APK に署名した鍵を特定する最も簡単な方法は、Google Play ストアから APK をダウンロードすることです。
ユーザーに不完全なアプリケーションが表示されないようにするには、アプリケーションをクローズド テスト チャンネルにデプロイし、テストデバイスにインストールしてから、Peter's Asset Link Tool を使用してアプリの正しい assetlinks.json ファイルを生成します。生成された assetlinks.json ファイルを、検証対象のドメインの /.well-known/assetlinks.json で利用できるようにします。
次のステップ
プログレッシブ ウェブアプリは、高品質なウェブ エクスペリエンスを提供します。Trusted Web Activity は、最低品質基準を満たしている場合に、Android アプリから高品質なエクスペリエンスを開くための新しい方法です。
プログレッシブ ウェブアプリを初めて使用する場合は、優れた PWA を構築する方法に関するガイダンスをご覧ください。すでに PWA を作成しているデベロッパーは、Lighthouse を使用して、品質基準を満たしているかどうかを確認します。
次に、Bubblewrap または PWABuilder を使用して Android アプリケーションを生成し、Google Play ストアのクローズド テスト チャンネルにアプリケーションをアップロードして、Peter's Asset Link Tool を使用して PWA とペア設定します。
最後に、アプリをクローズド テスト チャンネルから製品版に移行します。