埋め込みウェブを使用したアプリ内ブラウジング

アプリ内ブラウザを使用すると、ユーザーはアプリを離れることなく、完全なウェブ エクスペリエンスを利用できます。Android には、アプリ内ブラウザを実装するための主な API として、カスタムタブと WebView の 2 つが用意されています。ウェブページに誘導するリンクや広告がある場合は、アプリ内ブラウザを使用します。図 1 に示すように、アプリ内でそのページを開くことができます。

赤いボックス内のアプリ内リンクと、カスタムタブで開いたリンクを示す別の画面を指す矢印。
図 1. アプリ内リンクをクリック（左）し、カスタムタブを使用してアプリ内ブラウザを開く（右）。

カスタムタブと WebView のどちらを選択するかは、開発スピード、ユーザー エクスペリエンス、UI の制御性に影響する大きなアーキテクチャ上の決定です。

比較早見表

次の表を参考にして、ニーズに合ったツールを決定してください。

機能 WebView カスタム タブ
主なユースケース ウェブをメインまたは補助コンテンツとして使用するハイブリッド アプリの構築、ディスプレイ広告、アプリ キャンペーン、利用規約ページの表示。 外部ウェブサイトのコンテンツ（ニュース記事や商品ページなど）を表示する。
UI コントロール フル。これは、どこにでも配置できる View コンポーネントです。周囲の UI はすべてデベロッパーが管理します。 制限あり。ツールバーの色をテーマに設定し、いくつかのカスタム アクションを追加できます。
データとセッション サンドボックス化。Cookie やログイン情報は、ユーザーのメインのブラウザと共有されません。 共有。Cookie や保存されたパスワードなど、ユーザーのデフォルトのブラウザ セッションを使用します。
ネイティブ <-> ウェブブリッジ はい。JavaScript ブリッジを使用すると、ウェブ コンテンツとネイティブ アプリコードの間で、双方向の深い通信を行うことができます。 制限あり。基本的な文字列の受け渡しには、window.postMessage() メソッドを使用できます。
デベロッパーの作業 高。ライフサイクル、ナビゲーション、パフォーマンスを自分で管理する必要があります。 低。わずか数行のコードで実装できます。

WebView

WebView は、ウェブページをアプリのレイアウトに組み込むためのビューです。強力ですが、カスタムタブに比べて処理が少し複雑です。

WebView は、リモートまたはローカルのウェブ コンテンツを読み込み、JavaScript を実行し、ウェブ コンテンツとネイティブ アプリコード間の双方向通信を可能にします。機能の詳細については、WebView でできることをご覧ください。

WebView を使用して、ウェブ アプリケーションを配信したり、アプリの一部としてオンライン ウェブページを表示したりすることもできます。たとえば、定期的に更新する必要があるエンドユーザー契約などです。詳しくは、WebView でウェブアプリを作成するをご覧ください。

WebView を選択する理由

WebView が適しているシナリオをいくつか紹介します。

  • ハイブリッド アプリ: ウェブ コンテンツとネイティブ コンポーネント（ナビゲーション バーやフローティング アクション ボタンなど）が並存するアプリを構築している。
  • ファーストパーティ コンテンツ: ウェブ コンテンツが、ドキュメント エディタやデザイン キャンバスなど、アプリ エクスペリエンスの中核となるインタラクティブな部分である。
  • 完全な UI コントロール: ウェブページ自体のコンテンツを変更するか、ネイティブ UI 要素をウェブページの上に重ねる必要があります。
  • 詳細な分析: ウェブビュー内のユーザー エンゲージメントとアクティビティに関する詳細な分析情報が必要な場合。

主なトレードオフ

WebView を使用する際に考慮すべき主なトレードオフは次のとおりです。

  • パフォーマンス: WebView はメモリを大量に消費する可能性があります。慎重に管理しないと、パフォーマンスの問題や ANR（アプリケーション応答なしエラー）が発生する可能性があります。
  • セキュリティとメンテナンス: セキュリティの強化とライフサイクルの管理は、お客様の責任となります。これには、WebViewCompat.saveState() を使用してプロセスの再作成全体で状態の保持を管理することや、Android の 1 MB の保存済み状態トランザクションの上限内に収めることが含まれます。ただし、WebView のアップデートは Google Play を通じてグローバルにリリースされるため、基盤となるエンジンが古くなることを心配する必要はありません。

カスタム タブ

カスタムタブは、アプリ上にスライドして表示される高速で安全、かつユーザー フレンドリーなブラウザ ウィンドウを提供するため、ユーザーを外部 URL に誘導するのに最適です。

カスタムタブを選択する理由

カスタムタブが適しているシナリオをいくつか紹介します。

  • 外部リンク: ユーザーが所有していないウェブサイトへのリンクをタップすると、カスタムタブはアプリのコンテキストを維持しながら、完全なブラウザ エクスペリエンスを提供します。
  • 統合の容易さ: 埋め込みウェブ エクスペリエンスを稼働させる最も簡単な方法です。
  • 共有状態: ユーザーのデフォルトのブラウザと Cookie を共有するため、ユーザーはすでにアクセスしたサイトに再度ログインする必要がありません。
  • サードパーティ ログイン: ブラウザが認証情報を安全に処理するため、サードパーティ ログインフロー（「Google でログイン」や「Facebook でログイン」など）に適しています。

ほとんどのブラウザはカスタムタブをサポートしていますが、一部のブラウザは他のブラウザよりもカスタマイズ性に優れています。詳細については、ブラウザのサポートをご覧ください。

Jetpack Compose でウェブ コンテンツを使用する

Jetpack Compose でビルドする場合は、カスタムタブと WebView の両方を使用できます。

  • カスタムタブ: カスタムタブは Intent を使用するため、Compose 関数内の任意の Context から起動でき、シームレスな統合が可能です。
  • WebView: Compose にはネイティブの WebView コンポーザブルがまだないため、AndroidView を使用して標準の WebView をレイアウトに埋め込む必要があります。

参考情報

WebView API またはカスタムタブ API を使用して Android 搭載デバイス向けのウェブページを開発するには、次のドキュメントをご覧ください。