公開日: 2025 年 8 月 19 日
ナビゲーション管理には、プログレッシブ ウェブアプリ（PWA）がユーザー ナビゲーションを処理する方法を制御するメソッドが含まれます。この重要なコンポーネントがナビゲーション キャプチャです。これは、リンクをクリックしたときに、インストール済みの PWA を起動するか、新しいブラウザタブを開くかを決定するブラウザ プロセスです。
このガイドでは、Chrome 139 以降で利用できるナビゲーション キャプチャの新しいバージョンについて説明します。ブラウザのデフォルトの動作はほとんどの場合に適していますが、ユーザーにスムーズなエクスペリエンスを提供するには、これらの管理手法と関連する API について深く理解することが不可欠です。
[デベロッパー コントロール] セクションでは、PWA の起動エクスペリエンスを最大限に高めるためにナビゲーションをカスタマイズする方法について説明します。
新しいデフォルトの動作
ユーザーの好みに合わせ、摩擦を減らすため、Chrome はリンクの処理方法を標準化しています。以前は、プラットフォーム間で動作に一貫性がありませんでした。モバイル デバイスでは通常、インストール済みのアプリの起動が優先されますが、デスクトップ ブラウザでは、アプリで処理できることを示す前に、まずタブでリンクが開かれます。
ナビゲーション キャプチャの新しい統合アプローチにより、リンクが対応するインストール済み PWA で自動的に開きます。リンクがブラウザタブにフォールバックするのは、PWA がインストールされていない場合、またはユーザーがオプトアウトした場合のみです。この新しい動作は、Windows、Mac、Linux 版の Chrome 139 以降で利用できます。ChromeOS のサポートは今後のリリースで提供される予定です。
ナビゲーション管理プロセス
ナビゲーションのキャプチャは、ナビゲーション管理プロセスの一部です。このプロセスでは、ユーザーの最初のアクションからブラウザの決定、デベロッパーが構成した結果の動作まで、フロー全体を扱います。
- ユーザー アクション: リンクのクリックやタップなどのインタラクションが含まれます。
- ブラウザの決定: ナビゲーションのキャプチャなどのデフォルトの動作など、ブラウザで管理されるタスクと決定が含まれます。
- デベロッパー コントロール: 特定のタスクの処理方法をブラウザに指示できるウェブ API が含まれます。
これらの要素の相互作用によって、PWA がスタンドアロン ウィンドウで開くか、ブラウザタブで開くかが決まります。
ナビゲーション管理の基本的なユースケースは、ユーザーがブラウザの別のページからインストール済みの PWA へのリンクをクリックまたはタップする場合です。次の例では、Google Chat PWA をインストールしたユーザーが、Google カレンダーの招待状からその PWA へのリンクをクリックした場合について説明します。
calendar.google.com から chat.google.com（PWA としてインストール済み）へのリンクをクリックします。ユーザーの操作
すべてのユーザー アクションは、3 つの主要な要素で構成されています。イベント（クリックやタップなど）、イベントが発生するサーフェス（ウェブページやデスクトップ ショートカットなど）、有効化されるリンクタイプ（HTTPS URL など）です。たとえば、ユーザーが calendar.google.com のウェブページから Google Chat PWA のスコープ内の https://chat.google.com/meeting_room_id へのリンクをクリックする操作が考えられます。
ブラウザの決定
ユーザーが前のステップでクリックするなど、ユーザー アクションが発生すると、ブラウザはナビゲーション キャプチャ プロセスを実行して、リンクをブラウザタブで開くか、インストール済みの PWA で開くかを決定します。これは次のステップで構成されます。
- ナビゲーションがキャプチャ可能かどうかを判断する: 一般に、ナビゲーションが新しいフレームを作成し、補助ブラウジング コンテキストで開かない場合、そのナビゲーションはキャプチャ可能と見なされます。
- 制御する PWA を特定する: ナビゲーションをキャプチャできる場合、ブラウザは URL を「制御」する PWA（ウェブアプリ マニフェストで定義されたスコープ内にある）を見つけようとします。
- ユーザー設定を確認する: 制御 PWA が見つかった場合、ブラウザはユーザー設定を確認します。アプリの設定でユーザーがオプトアウトしていない場合は PWA が起動し、オプトアウトしている場合は新しいブラウザタブでリンクが開きます。
- PWA を起動する: ブラウザは起動処理アルゴリズムを使用して PWA を起動します。この動作は、次に説明する Launch Handler API を使用して制御できます。
次の図は、このプロセスの概要を示しています。
デベロッパーによる管理
ナビゲーション プロセスは主にブラウザのデフォルトとユーザー設定に依存しますが、さまざまな API を使用して特定の側面を管理できます。最近のナビゲーション キャプチャの更新により、一部の長年のウェブ API がより関連性の高いものになりました。
Launch Handler API
この API は、ブラウザが PWA を起動するタイミングで機能し、起動方法（新しいウィンドウで起動するか、既存のウィンドウで起動するかなど）を制御できます。
client_mode というサブフィールドを含む Web アプリ マニフェストの launch_handler メンバーで、PWA の起動方法を定義します。このサブフィールドは、新しいウィンドウと既存のウィンドウのどちらを使用するか、ナビゲーションを行うかどうかを決定します。client_mode に指定できる値は次のとおりです。
focus-existing: 既存のアプリ ウィンドウでリンクを処理します。たとえば、スタンドアロン モードで実行中の PWA などです。navigate-existing: このオプションでは、ウェブアプリ ウィンドウで最後に操作したブラウジング コンテキストが、起動のターゲット URL に移動します。navigate-new: このオプションを指定すると、ウェブアプリ ウィンドウに新しいブラウジング コンテキストが作成され、起動のターゲット URL が読み込まれます。
launchQueue API を使用して、追加のパラメータを指定し、特殊なケースを処理します。Launch Handler API は Chrome 110 から利用できますが、ナビゲーション キャプチャ アップデートにより、さらに便利になります。詳しくは、Launch Handler API のドキュメントをご覧ください。
その他の関連 API
アプリの特定のニーズに応じて、起動処理以外にも、他の API がこのプロセスで役割を果たすこともあります。たとえば、URL プロトコル ハンドラを使用すると、ウェブアプリは標準の http や https 以外の URL スキーム（mailto: などの標準プロトコルや web+music などのカスタム プロトコルなど）を処理する機能を登録できます。また、ウェブアプリ スコープ拡張 API（現在開発中）を使用すると、PWA のスコープを拡張して、サブドメインを含む他のオリジンからのリンクをキャプチャできます。これにより、ユーザーが関連付けられたオリジンからのリンクをクリックしたときに PWA を起動できます。これらの詳細については、この記事の範囲外ですが、対応するリンクで詳細を確認できます。
ユースケース: Chat PWA で Google Chat リンクをキャプチャする
最後に、Google Chat PWA をすでにインストールしているユーザーが Google カレンダーのリンクをクリックして Google Chat ルームにアクセスする例で、さまざまな要素がどのように連携するかを説明します。
ナビゲーションのキャプチャ前
次の動画では、ユーザーが Google カレンダーで会議を作成し、3 人のゲストを招待しています。カレンダー アプリは、すべての参加者を含む Google Chat リンクを自動的に生成します。ユーザーがこのリンクをクリックすると、新しいブラウザタブでチャットルームが開きます。アドレスバーのアイコンは、対応する PWA がインストールされていることを示しますが、ユーザーが手動で起動する必要があります。ナビゲーション キャプチャの更新前の動作は次のとおりです。
ナビゲーション キャプチャ後
次の動画は、同じユーザー ワークフローを示していますが、新しいナビゲーション キャプチャ動作が追加されています。このバージョンでは、Google カレンダーから Google Chat のリンクをクリックすると、インストールされている PWA で対応するチャットルームが直接開きます。さらに、Google Chat チームは、ウェブアプリ マニフェストに launch_handler 属性を追加することで、起動処理を実装しました。client_mode を focus-existing に設定することで、PWA の既存のインスタンスがすでに実行されている場合は、そのインスタンスでリンクが開くようにします。新しいブラウザタブを開いてからページの読み込みをトリガーするまでのレイテンシがなくなるため、設計上、ユーザーが操作可能になるまでの時間が短縮されます。実際、Google Chat では、新しいアプリの起動を不要にすることで、ナビゲーションのレイテンシが大幅に改善されました。
まとめと次のステップ
この記事では、Chrome 139 以降で利用できる新しいデフォルトのナビゲーション キャプチャ動作について、インストールされた PWA のスコープ内でユーザーが HTTPS リンクをクリックするという一般的なユースケースに焦点を当てて説明しました。詳細とユースケースについては、インストール済み PWA へのナビゲーション管理をご覧ください。次の図は、ユーザー イベント、サーフェス、プロトコルなどのユースケースの完全な内訳と、対応する結果を示しています。
ナビゲーション管理は、アプリのエントリ ポイントを制御するため、アプリの UX において重要な側面ですが、見過ごされがちです。この記事で説明する機能とリンクは、PWA で可能な限り最高のアプリのようなエクスペリエンスを実現するのに役立ちます。