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

Thomas Steiner

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

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

しかし、実際はもっと複雑です。リンクがウェブサイトではなく、Google のチャットアプリで受信したチャット メッセージに表示されている場合はどうなりますか？個別のアプリ ウィンドウの概念があるデスクトップ オペレーティング システムでは、アプリがすでに開いている場合、リンクがクリックされるたびに新しいウィンドウまたはタブを作成する必要がありますか？リンクとナビゲーションをキャプチャする方法は、以下のようなものを含め、数多くあります。

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

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

おすすめのユースケース

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

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

about://flags で有効にする

オリジン トライアル トークンなしで Declarative Link Capturing をローカルで試すには、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. サイト 1
  2. サイト 2

次のスクリーンキャストは、この 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 のサポートは現在開発中です。

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 フィールドと Declarative Link Capturing オリジン トライアル登録は、2022 年 3 月 30 日まで有効です。これにより、Chromium 97 以前のユーザーもキャプチャされたリンクからウェブアプリを起動できるようになります。

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

フィードバック

Chromium チームは、宣言型リンク キャプチャリングに関する皆様のご意見をお待ちしています。

API 設計について教えてください

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

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

Chromium の実装でバグが見つかりましたか？それとも、実装が仕様と異なるのでしょうか？new.crbug.com でバグを報告します。できるだけ詳細な情報と、再現するための簡単な手順を記載し、[Components] ボックスに UI>Browser>WebAppInstalls と入力してください。

API のサポートを表示する

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

ハッシュタグ #DeclarativeLinkCapturing を使用して @ChromiumDev にツイートし、どこでどのように使用しているかをお知らせください。

関連情報

謝辞

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