宣言型リンク キャプチャを使用して、スコープ内のリンクから PWA を開く方法を選択できます

Thomas Steiner

宣言型リンク キャプチャとは

ウェブ上にあるリンクをクリックすると、嬉しい驚きが生じることがあります。たとえば、モバイル デバイスで YouTube へのウェブページ リンクをクリックすると、iOS または Android の YouTube アプリ（インストールされている場合）が開きます。ただし、デスクトップ パソコンに YouTube PWA をインストールしてクリックすると、ブラウザタブで開きます。

しかし、状況はますます複雑になってきます。ウェブサイトではなく、Google のチャットアプリで受信したチャット メッセージにリンクが表示される場合はどうなりますか？個別のアプリ ウィンドウの概念を持つデスクトップ オペレーティング システムでは、アプリがすでに開いている場合、リンクがクリックされるたびに新しいウィンドウまたはタブを作成する必要がありますか？リンクとナビゲーションをキャプチャする方法はたくさんありますが、以下に例を示します（ただしこれらに限定されません）。

宣言型リンク キャプチャは、"capture_links" というウェブアプリ マニフェスト プロパティの提案です。これにより、デベロッパーは、ナビゲーション スコープ外のコンテキストから、アプリのナビゲーション スコープ内にある URL への移動をブラウザに求められたときに行う動作を宣言的に決定できます。ユーザーがすでにナビゲーション スコープ内にある場合（たとえば、ユーザーがスコープ内のブラウザタブを開いていて、内部リンクをクリックした場合）は、この提案は適用されません。

リンクを中クリックする（または右クリックして [新しいタブで開く]）などの特殊な条件では、通常はリンク キャプチャ動作がトリガーされません。リンクが target=_self か target=_blank かは関係ありません。したがって、ブラウザ ウィンドウ（または別の PWA のウィンドウ）でクリックされたリンクは、通常は同じタブ内でナビゲーションが発生しても PWA で開かれます。

推奨されるユースケース

この API を使用するサイトの例:

  • ユーザーがリンクをクリックしたときにブラウザタブではなくウィンドウを開く PWA です。デスクトップ環境では、複数のアプリケーション ウィンドウを同時に開いた方がよい場合がよくあります。
  • 単一ウィンドウの PWA。デベロッパーは、アプリのインスタンスを常に 1 つだけ開いて、新しいナビゲーションでは既存のインスタンスにフォーカスします。サブユースケースは次のとおりです。
    • 1 つのインスタンスのみを実行することが適切なアプリ（音楽プレーヤー、ゲームなど）。
    • 1 つのインスタンス内で複数のドキュメントを管理するアプリ（HTML で実装されたタブバーなど）。

about://flags を介して有効にする

オリジン トライアル トークンを使用せずにローカルで宣言型リンク キャプチャをテストするには、about://flags で #enable-desktop-pwas-link-capturing フラグを有効にします。

宣言型リンク キャプチャの使用方法

デベロッパーは、追加のウェブアプリ マニフェスト フィールド "capture_links" を使用することで、リンクのキャプチャ方法を宣言的に決定できます。値として文字列または文字列の配列を受け取ります。文字列の配列が指定された場合、ユーザー エージェントはリスト内の最初のサポート対象項目を選択します（デフォルトは "none"）。サポートされる値は次のとおりです。

  • "none"（デフォルト）: リンクはキャプチャしません。クリックされてこの PWA スコープに移動すると、PWA ウィンドウが開かずに通常どおりに移動します。
  • "new-client": リンクをクリックすると、その URL で新しい PWA ウィンドウが開きます。
  • "existing-client-navigate": クリックされたリンクは、既存の PWA ウィンドウ（使用可能な場合）で開きます。それ以外の場合は、新しいウィンドウで開きます。複数の PWA ウィンドウが存在する場合、ブラウザは 1 つを任意に選択できます。現在開いているウィンドウがない場合、"new-client" のように動作します。📊? 注意！この方法では、ページが任意に移動する可能性があるため、データが失われる可能性があります。このオプションを選択することで、サイトがこのような動作に陥ることに注意する必要があります。このオプションは、音楽プレーヤーなど、ユーザーデータをメモリに保持しない「読み取り専用」サイトに最適です。移動元のページに beforeunload イベントが発生すると、ナビゲーションが完了する前にユーザーにプロンプトが表示されます。

デモ

宣言型リンクのキャプチャのデモは、実際には、相互に連携する 2 つのデモで構成されています。

  1. https://continuous-harvest-tomato.glitch.me/
  2. https://hill-glitter-tree.glitch.me/

以下のスクリーンキャストは、この 2 つのやり取りを示しています。"new-client" と "existing-client-navigate" の 2 つの異なる動作を示します。必ずアプリをさまざまな状態（タブで実行、インストール済みの PWA で実行）でテストして、動作の違いを確認してください。

セキュリティと権限

Chromium チームは、強力なウェブ プラットフォーム機能へのアクセスの制御で定義されている基本原則（ユーザー制御、透明性、エルゴノミクスなど）を使用して、宣言型リンク キャプチャを設計、実装しました。この API を使用すると、サイトで新しい追加の制御オプションを利用できます。まず、インストール済みのアプリをウィンドウで自動的に開けること。既存の UI を使用しますが、サイトが自動的にトリガーできます。2 つ目は、既存のウィンドウを自身のドメインにフォーカスし、クリックされた URL を含むイベントを発生させる機能です。これは、サイトがデフォルトの HTML ナビゲーション フローをオーバーライドして、既存のウィンドウから新しいページに移動できるようにするためのものです。

Launch Handler API に移行する

Chromium 97 以前を対象に、Declarative Link Capturing API のオリジン トライアルが 2022 年 3 月 30 日に期限切れになりました。Chromium 98 以降では、一連の新機能と API に置き換えられます。これには、ユーザーが有効にしたリンクのキャプチャや Launch Handler API が含まれています。

Chromium 98 では、自動リンク キャプチャは、ウェブアプリへのインストール時に許可するのではなく、ユーザーのオプトイン動作になりました。リンク キャプチャを有効にするには、ユーザーが [アプリで開く] を使用してインストール済みのアプリを起動し、[この選択を保存する] を選択する必要があります。

インストール済みアプリの [アプリで開く] で [選択を保存する] オプションを有効にした例

または、ユーザーはアプリ管理の設定ページで、特定のウェブアプリのリンク キャプチャをオンまたはオフにできます。

インストール済みアプリの設定ページの例。

現時点では、リンク キャプチャは ChromeOS 専用の機能です。Windows、macOS、Linux でもサポートが進行中です。

起動ハンドラ API

受信ナビゲーションの制御は Launch Handler API に移行されます。これにより、リンク キャプチャ、共有ターゲット、ファイル処理など、さまざまな状況でウェブアプリを起動する方法を決定できます。宣言型リンク キャプチャ API から Launch Handler API に移行するには:

  1. Launch Handler オリジン トライアルにサイトを登録し、オリジン トライアルキーをウェブアプリに配置します。

  2. サイトのマニフェストに "launch_handler" エントリを追加します。

    • "capture_links": "new-client" を使用するには、"launch_handler": { "route_to": "new-client" } を追加します。
    • "capture_links": "existing-client-navigate" を使用するには、"launch_handler": { "route_to": "existing-client-navigate" } を追加します。
    • "capture_links": "existing-client-event"（宣言型リンク キャプチャのオリジン トライアルでは実装されなかった）を使用するには、"launch_handler": { "route_to": "existing-client-retain" } を追加します。このオプションを使用すると、リンク ナビゲーションを取得したときに、アプリスコープ内のページが自動的に移動しなくなります。window.launchQueue.setConsumer() を呼び出してナビゲーションを有効にして、JavaScript で LaunchParams を処理する必要があります。

capture_links フィールドと宣言型リンク キャプチャのオリジン トライアルの登録は、2022 年 3 月 30 日まで有効です。これにより、Chromium 97 以前のユーザーは、キャプチャしたリンクからウェブアプリを引き続き起動できます。

詳しくは、アプリの起動方法を管理するをご覧ください。

フィードバック

Chromium チームは、宣言型リンク キャプチャの使用経験を募集しています。

API の設計についてお聞かせください

API に関して、想定したとおりに動作しない点はありますか。あるいは、アイデアを実装するために必要なメソッドやプロパティが欠落していないか？セキュリティ モデルについてご質問やご意見がある場合は、対応する GitHub リポジトリで仕様の問題を提出するか、既存の問題にご意見をお寄せください。

実装に関する問題を報告する

Chromium の実装でバグが見つかりましたか？それとも、実装が仕様と異なりますか？ new.crbug.com でバグを報告します。できる限り詳細な情報と再現手順を記載し、[Components] ボックスに「UI>Browser>WebAppInstalls」と入力します。Glitch を使えば、再現をすばやく簡単に共有できます。

API のサポートを表示する

宣言型リンク キャプチャを使用する予定はありますか？皆様からの一般公開のサポートは、Chromium チームによる機能の優先順位付けに役立ち、他のブラウザ ベンダーのサポートがいかに重要であるかを示しています。

ハッシュタグ #DeclarativeLinkCapturing を使用して @ChromiumDev 宛てにツイートを送信し、使用場所と使用方法をお知らせください。

関連情報

謝辞

宣言型リンク キャプチャは、Alan Cutter と Dominick Ng の入力により、Matt Giuca によって指定されました。この API は Alan Cutter によって実装されました。この記事は、Joe Medley、Matt Giuca、Alan Cutter、Shunya Shishido によってレビューされました。ヒーロー画像（作成者: Zulmaury Saavedra、Unsplash）