Android アプリで PWA を使用する

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 環境に限定されます。つまり、オープンウェブの PWA とは別に、Android アプリで Cordova API を使用するための追加のコードベースを維持する必要があります。

また、機能の検出が想定どおりに機能しないことも多く、Android のバージョンと OEM 間の互換性の問題も問題になる可能性があります。これらのソリューションのいずれかを使用する場合、開発者は追加の品質保証プロセスが必要になり、回避策を検出して作成するために追加の開発費用が発生します。

Trusted Web Activity は、Android のウェブアプリ用の新しいコンテナです

デベロッパーは、Trusted Web Activity をコンテナとして使用し、Android アプリの起動アクティビティとして PWA を含めることができるようになりました。このテクノロジーはブラウザを活用して PWA を全画面表示でレンダリングし、Trusted Web Activity が基盤となるブラウザと同じようにウェブ プラットフォームの機能と API と互換性を持つようにします。また、Trusted Web Activity を使用して Android アプリを実装しやすくするオープンソース ユーティリティもあります。

他のソリューションでは利用できないもう 1 つの利点は、コンテナがブラウザとストレージを共有することです。ログイン状態とユーザー設定は、エクスペリエンス間でシームレスに共有されます。

ブラウザの互換性

この機能は Chrome ではバージョン 75 以降、Firefox ではナイトリー バージョンで利用できます。

品質基準

ウェブ デベロッパーは、Android アプリにウェブ コンテンツを含める場合は Trusted Web Activity を使用する必要があります。

Trusted Web Activity のウェブ コンテンツは、PWA のインストール基準を満たしている必要があります。

また、ユーザーが Android アプリに期待する動作に合わせて、Chrome 86 で変更が導入され、次のシナリオを処理できなかった場合、クラッシュと見なされるようになりました。

  • アプリの起動時にデジタル アセットリンクを検証できない。
  • オフライン ネットワーク リソース リクエストに対して HTTP 200 が返されない。
  • HTTP 404 または 5xx エラーを返すナビゲーション リクエスト」

Trusted Web Activity でこれらのシナリオのいずれかが発生すると、Android アプリがユーザーに見える形でクラッシュします。サービス ワーカーでこのようなシナリオを処理する方法については、ガイダンスをご覧ください。

また、ポリシーへの準拠など、Android 固有の追加の基準も満たしている必要があります。

AirHorn の Lighthouse スコア(PWA バッジとパフォーマンス スコア 100)を示すスクリーンショット。
Lighthouse の PWA バッジは、PWA がインストール要件を満たしているかどうかを示します。

ツール

Trusted Web Activity を利用するウェブ デベロッパーは、PWA を Android アプリに変換するために新しいテクノロジーや API を学ぶ必要はありません。Bubblewrap と PWABuilder を併用すると、ライブラリ、コマンドライン インターフェース(CLI)、グラフィカル ユーザー インターフェース(GUI)の形でデベロッパー ツールを利用できます。

エアキャップ

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 の所有権を確認する

優れた Progressive Web App を構築しているデベロッパーは、他のデベロッパーが許可なくそのアプリを使用して Android アプリを構築することを望んでいません。これを回避するには、Digital Asset Links というツールを使用して、Android アプリをプログレッシブ ウェブアプリとペア設定する必要があります。

Bubblewrap と PWABuilder は Android アプリに必要な構成を行いますが、最後のステップとして、assetlinks.json ファイルを PWA に追加する必要があります。

このファイルを生成するには、ユーザーがダウンロードする APK の署名に使用された鍵の SHA-256 署名が必要です。

鍵は複数の方法で生成できます。エンドユーザーに提供される APK に署名した鍵を確認する最も簡単な方法は、Play ストアから APK をダウンロードすることです。

不具合のあるアプリをユーザーに表示しないようにするには、アプリをクローズド テスト チャンネルにデプロイし、テストデバイスにインストールしてから、Peter のアセットリンク ツールを使用して、アプリの正しい assetlinks.json ファイルを生成します。生成された assetlinks.json ファイルを、検証対象のドメインの /.well-known/assetlinks.json で利用できるようにします。

次のステップ

Progressive Web App は、高品質のウェブ エクスペリエンスを提供します。Trusted Web Activity は、最低限の品質基準を満たしている場合に、Android アプリから高品質なエクスペリエンスを開く新しい方法です。

プログレッシブ ウェブアプリの使用を開始する場合は、優れた PWA を構築する方法に関するガイダンスをご覧ください。すでに PWA をお持ちのデベロッパーは、Lighthouse を使用して、品質基準を満たしているかどうかを確認します。

次に、Bubblewrap または PWABuilder を使用して Android アプリを生成し、Google Play ストアのクローズド テスト チャンネルにアプリをアップロードし、Peter のアセットリンク ツールを使用して PWA とペア設定します。

最後に、クローズド テスト チャネルから製品版にアプリを移動します。