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 をコンテナとして使用して、PWA を Android アプリの起動 アクティビティとして含めることができます。このテクノロジーはブラウザを活用して 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 アプリケーションのクラッシュが発生します。Service Worker でこれらのシナリオを処理する方法については、こちらのガイダンスをご覧ください。

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

AirHorn の Lighthouse スコアを示すスクリーンショット。PWA バッジとパフォーマンス スコア 100 が表示されています。
Lighthouse の PWA バッジは、PWA がインストール可能性の基準を満たしているかどうかを示します。

ツール

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 アプリを構築することを望まないでしょう。これを防ぐため、Android アプリケーションは Digital Asset Linksというツールを使用してプログレッシブ ウェブアプリとペア設定する必要があります。

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

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

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

破損したアプリケーションがユーザーに表示されないようにするには、アプリケーションを クローズド テスト チャネルにデプロイし、テストデバイスにインストールしてから、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 とペア設定します。

最後に、アプリケーションをクローズド テスト チャネルから本番環境に移行します。