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

アプリ内ブラウザを使用すると、ユーザーはアプリを離れることなくウェブ エクスペリエンスをフルに体験できます。Android には、アプリ内ブラウザを実装するための 2 つの主要な API（カスタムタブと WebView）が用意されています。ウェブページにリンクするリンクや広告がある場合は、アプリ内ブラウザを使用します。図 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（アプリが応答しないエラー）が発生する可能性があります。
  • セキュリティとメンテナンス: セキュリティの強化とライフサイクルの管理は、ユーザーの責任となります。ただし、WebView のアップデートは Google Play を通じてグローバルにロールアウトされるため、基盤となるエンジンが古くなる心配はありません。

カスタム タブ

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

カスタムタブを選ぶ理由

カスタムタブが適しているシナリオを以下に示します。

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

ほとんどのブラウザはカスタムタブをサポートしていますが、カスタマイズの幅はブラウザによって異なります。詳細については、ブラウザのサポートをご覧ください。

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

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

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

参考情報

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