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

Thomas Steiner

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

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

しかし、複雑さが増します。リンクがウェブサイトではなく、Google のいずれかのチャットアプリで受信したチャット メッセージに表示される場合はどうすればよいですか？個別のアプリ ウィンドウの概念があるパソコン オペレーティング システムで、アプリがすでに開いている場合、リンクのクリックごとに新しいウィンドウまたはタブを作成する必要がありますか？リンクとナビゲーションをキャプチャする方法は、次のような方法が考えられますが、これらに限定されません。

  • 他のウェブページからのリンクをクリックした。
  • URL がオペレーティング システム内のプラットフォーム固有のアプリから起動される。
  • App Shortcuts API から開始されたナビゲーション。
  • URL プロトコル ハンドラを経由するリンク。
  • ファイル ハンドラによって発生したナビゲーション。
  • Share Target API によって発生したナビゲーション。
  • など。

宣言型リンク キャプチャは、"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 ウィンドウが複数ある場合は、ブラウザが任意のウィンドウを選択することがあります。現在開いているウィンドウがない場合、これは "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 に移行する

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

Chromium 98 では、自動リンク キャプチャは、ウェブアプリのインストール時に付与されるのではなく、ユーザーがオプトインする動作になりました。リンク キャプチャを有効にするには、[Open with] を使用してブラウザからインストール済みのアプリを起動し、[Remember my choice] を選択する必要があります。

[選択内容を記憶] オプションが有効になっている、インストール済みアプリの [開くアプリ] 設定の例。

また、アプリ管理の設定ページで、特定のウェブアプリのリンクのキャプチャをオンまたはオフに切り替えることもできます。

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

リンクのキャプチャは現時点では ChromeOS のみの機能です。Windows、macOS、Linux のサポートは現在開発中です。

Launch Handler API

受信ナビゲーションの制御は Launch Handler API に移行されました。これにより、ウェブアプリは、リンクのキャプチャ、共有ターゲット、ファイル処理など、さまざまな状況でウェブアプリの起動方法を決定できます。Declarative Link Capturing 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 でバグを報告します。できるだけ詳細な情報を含め、再現手順を簡単に説明してください。[コンポーネント] ボックスに 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 が確認しました。Unsplash の Zulmaury Saavedra によるヒーロー画像。