Android カスタムタブの概要

カスタムタブは Android ブラウザの機能です。この機能を使用すると、アプリ デベロッパーは、カスタマイズされたブラウザ エクスペリエンスをアプリ内に直接追加できます。

ウェブ コンテンツの読み込みは、スマートフォンの登場当初からモバイルアプリに組み込まれていましたが、古いオプションではデベロッパーにとって課題となる場合があります。実際のブラウザを起動すると、ユーザーにとってカスタマイズできないコンテキスト スイッチになります。一方、WebView はウェブ プラットフォームのすべての機能をサポートしているわけではなく、ブラウザと状態を共有せず、メンテナンスのオーバーヘッドを増加させることもありません。

カスタムタブは、外部ブラウザを開くよりも優れたユーザー エクスペリエンスを提供します。ユーザーはブラウジング中にアプリ内に留まることができるため、エンゲージメントを高め、ユーザーがアプリの使用をやめるリスクを低減できます。この目的は、ユーザーが使用するブラウザから直接動作し、そのブラウザの状態と機能を自動的に共有することで実現されます。リクエスト、権限の付与、Cookie ストアを管理するためにカスタムコードを記述する必要はありません。

カスタムタブでできること

カスタムタブを使用すると、ウェブ コンテンツは、ユーザーが使用するブラウザのレンダリング エンジンで読み込まれます。API やウェブ プラットフォームのどの機能もすべて利用可能で、カスタムタブで利用できます。閲覧セッション、保存したパスワード、お支払い方法、住所はすべて、これまでと同じように表示されます。

カスタムタブでは何をカスタマイズできますか？

そのとおり！カスタムタブを使用すると、ブラウザの Chrome とユーザー エクスペリエンスをきめ細かく制御できます。アプリ内で、インテントを使用してカスタムタブを起動します。このインテントが呼び出されたときに、CustomTabIntent にさまざまな属性を追加することで、望みどおりのエクスペリエンスを実現できます。追加できるカスタマイズの一覧がここに表示されます。

アプリの他の部分に合わせたカスタムの開始 / 終了アニメーション

モバイル ブラウザ、画面間を移動して、最後にウェブサイトがカスタムタブに読み込まれます。

アプリのブランディングに合わせてツールバーの色を変更する。

ウェブサイトと同じ色でカスタムタブに移行するモバイル ブラウザ

ライトモードとダークモードを切り替えても、アプリに溶け込む色の一貫性。

ライトモードとダークモードを切り替えても、アプリの色の整合性を保つことができます。

カスタム操作とブラウザのツールバーとメニューへのエントリ。

カスタム エントリを含むメニューを表示するカスタムタブ。

カスタムタブの起動の高さを制御して、ウェブストアを操作しながら動画のストリーミングなどを可能にします。

高さが設定された部分的なカスタムタブが開く。

カスタムタブを最小化して基盤となるアプリを操作し、いつでもアプリを復元できます。プロセスを再開するための進捗状況が失われることはありません。ユーザーはカスタムタブを閉じる代わりに使用できるようになり、ウェブとネイティブ アプリ間でシームレスにマルチタスクを行えます。Chrome 122 ベータ版以降のカスタムタブでは、この機能がデフォルトで有効になっています。

カスタムタブを最小化してバックグラウンド アプリを操作します。

これはすべてではありません。カスタムタブは非常に強力であり、現在も開発が続けられています。これらの機能は、利用可能になった時点で各ブラウザに追加する必要があります。ほぼすべてのプラットフォームに一定のサポートがありますが、ユーザーのブラウザで何を利用できないか把握しておくことが重要です。一般的な Android ブラウザでの各機能の提供状況については、機能比較表をご覧ください。

これは、GitHub のサンプルを使用して今すぐテストできます。

カスタムタブを使うタイミング

ウェブ コンテンツを読み込む唯一の「正しい」方法はありません。状況によっては、WebView が適切なテクノロジーとして使用される場合があります。たとえば、アプリ内で独自のコンテンツを独占的にホストしている場合や、アプリから直接 JavaScript を挿入する必要がある場合。アプリからドメイン外の URL にユーザーを誘導する場合は、カスタムタブに共有状態が組み込まれているため、通常は適切な選択となります。カスタムタブのその他の強みは次のとおりです。

  1. セキュリティ: カスタムタブは、Google のセーフ ブラウジングを使用して、ユーザーとデバイスを危険なサイトから保護します。
  2. パフォーマンスの最適化:
    1. アプリからリソースを盗まれないようにしながら、ブラウザでブラウザをプレウォーミングします。
    2. URL を事前に予測的に読み込むことで、ページの読み込み時間を短縮する。
  3. ライフサイクル管理: カスタムタブを起動したアプリがタブの使用中にシステムによって強制排除されることはありません。重要性は「フォアグラウンド」レベルに引き上げられます。
  4. Cookie の JAR と権限モデルの共有により、ユーザーは、すでに接続しているサイトにログインしたり、すでに付与した権限を再付与したりする必要がなくなります。
  5. データセーバーなどのブラウザ機能は、有効になっている場合に共有されるため、コンテンツの読み込みが速く、より低コストになります。
  6. 複数のデバイスでオートコンプリートを同期し、フォームの入力を改善。
  7. ユーザーは、統合型の [戻る] ボタンを使用してアプリに戻ることができます。

カスタムタブと Trusted Web Activity の比較

Trusted Web Activity は、カスタムタブ プロトコルを拡張し、そのメリットのほとんどを共有しています。ただし、カスタマイズされた UI を提供する代わりに、UI をまったく表示せずにブラウザタブを開くことができます。これは、独自のプログレッシブ ウェブアプリを Android アプリ内で全画面表示して開きたいデベロッパーにおすすめです。

カスタムタブはどこで利用できますか？

カスタムタブは、Android プラットフォームのブラウザでサポートされている機能です。これは Chrome のバージョン 45 で導入されました。このプロトコルはほとんどの Android ブラウザでサポートされています。

このプロジェクトに関するフィードバック、質問、ご提案をお待ちしています。crbug.com で問題を報告し、Twitter @ChromiumDev で質問してください。

使ってみる

GitHub デモのほかにも、カスタムタブのスタートガイドが数多く用意されています。

質問がある場合は、StackOverflow の chrome-custom-tabs タグを確認してください。