PWA の URL プロトコル ハンドラ登録

インストール済みの PWA で特定のプロトコルを使用するリンクを処理できるようにして、より統合されたエクスペリエンスを実現します。

Thomas Steiner

成功: PWA の URL プロトコル ハンドラの登録は機能プロジェクトの一部であり、Chrome 96 から利用できます。

スキーム（プロトコル）の背景知識

URI は、抽象リソースまたは物理リソースを識別するコンパクトな一連の文字です。各 URI は「スキーム名」で始まります。スキーム名は、そのスキーム内で識別子を割り当てるための仕様を参照します。そのため、URI 構文は連携され拡張可能な命名システムであり、各スキームの仕様により、そのスキームを使用する識別子の構文とセマンティクスがさらに制限される場合があります。スキームはプロトコルとも呼ばれます。スキームの例を以下に示します。

tel:[phone]
mailto:[e-mail]
news:comp.infosystems.www.servers.unix
https://web.dev/

Uniform Resource Locator（URL）という用語は、リソースを識別するだけでなく、主なアクセス メカニズム（ネットワークのロケーションなど）を記述してリソースを見つける手段を提供する URI のサブセットを指します。

registerProtocolHandler() メソッドの背景

安全なコンテンツ専用の Navigator メソッド registerProtocolHandler() を使用すると、サイトは特定の URL スキームを開くまたは処理する機能を登録できます。そのため、サイトでは navigator.registerProtocolHandler(scheme, url) のようにメソッドを呼び出す必要があります。2 つのパラメータは次のように定義されます。

• scheme: サイトが処理するプロトコルを含む文字列。
• url: ハンドラの URL を含む文字列。この URL には、処理されるエスケープ済み URL に置き換えられるプレースホルダとして、%s を含める必要があります。

スキームは、許可リストに登録済みのスキーム（mailto、bitcoin、magnet など）のいずれかにするか、web+ で始まり、その後に web+ 接頭辞の後に少なくとも 1 つ以上の小文字の ASCII 文字（例: web+coffee）が続く必要があります。

わかりやすくするために、フローの具体例を以下に示します。

1. ユーザーが https://coffeeshop.example.com/ のサイトにアクセスすると、navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s') が呼び出されます。
2. その後、ユーザーが https://randomsite.example.com/ にアクセスしている間に、<a href="web+coffee:latte-macchiato">All about latte macchiato</a> などのリンクをクリックします。
3. これにより、ブラウザは URL https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato に移動します。検索文字列が URL デコードされ、?type=web+coffee://latte-macchiato が読み取られます。

プロトコル処理の概要

現在の PWA の URL プロトコル ハンドラ登録メカニズムは、マニフェストを介して PWA インストールの一部としてプロトコル ハンドラ登録を提供するためのものです。PWA をプロトコル ハンドラとして登録した後、ブラウザまたはプラットフォーム固有のアプリから特定のスキーム（mailto、bitcoin、web+music など）のハイパーリンクをユーザーがクリックすると、登録済みの PWA が開き、URL が受信されます。提案されたマニフェスト ベースの登録と従来の registerProtocolHandler() はどちらも、実際には非常によく似た役割を果たす一方で、補完的なユーザー エクスペリエンスも可能であることに注意してください。

• 類似点には、登録可能なスキームのリストに関する要件や、パラメータの名前と形式などに関する要件が含まれます。
• マニフェスト ベースの登録の違いはわずかですが、PWA ユーザーのエクスペリエンスを向上させるのに役立つ可能性があります。たとえば、マニフェスト ベースの PWA の登録では、ユーザーによる PWA のインストール以外に追加のユーザー操作を必要としない場合があります。

使用例

• ワープロ PWA では、ドキュメント内のユーザーに web+presentations://deck2378465 などのプレゼンテーションへのリンクが表示されます。ユーザーがリンクをクリックすると、適切なスコープでプレゼンテーション PWA が自動的に開き、スライドが表示されます。
• プラットフォーム固有のチャットアプリでは、チャット メッセージ内のユーザーに magnet URL へのリンクが送信されます。リンクをクリックすると、インストールされている Torrent PWA が起動し、ダウンロードが開始されます。
• ユーザーが音楽ストリーミング PWA をインストールしている。友だちが web+music://songid=1234&time=0:13 などの曲へのリンクを共有し、ユーザーがそれをクリックすると、音楽ストリーミング PWA がスタンドアロン ウィンドウで自動的に起動します。

PWA の URL プロトコル ハンドラ登録の使用方法

URL プロトコル ハンドラ登録用の API は、navigator.registerProtocolHandler() で厳密にモデル化されています。今回は、ウェブアプリ マニフェストを介して "protocol_handlers" という新しいプロパティで宣言的に情報が渡されます。このプロパティは、2 つの必要なキー "protocol" と "url" を持つオブジェクトの配列を受け取ります。以下のコード スニペットは、web+tea と web+coffee を登録する方法を示しています。値は、ハンドラの URL と、エスケープされた URL に必要な %s プレースホルダを含む文字列です。

{
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

同じプロトコルに登録する複数のアプリ

複数のアプリが同じスキーム（mailto プロトコルなど）のハンドラとして登録されている場合、オペレーティング システムはユーザーに選択ツールを表示し、どの登録済みハンドラを使用するかを判断します。

同じアプリが複数のプロトコルに登録している場合

上記のコードサンプルでわかるように、同じアプリを複数のプロトコルに登録できます。

アプリのアップデートとハンドラ登録

ハンドラの登録は、アプリが提供する最新のマニフェスト バージョンと同期します。次の 2 つのケースがあります。

• 新しいハンドラを追加する更新により、ハンドラ登録がトリガーされます（アプリのインストールとは別）。
• ハンドラを更新すると、ハンドラの登録解除がトリガーされます（アプリのアンインストールとは別です）。

DevTools でのプロトコル ハンドラのデバッグ

[Application] > [Manifest] ペインで [Protocol Handlers] セクションに移動します。ここでは、使用可能なすべてのプロトコルを表示してテストできます。

たとえば、このデモ PWA をインストールします。[プロトコル ハンドラ] セクションで「americano」と入力し、[プロトコルをテスト] をクリックして PWA でコーヒーのページを開きます。

デモ

Glitch での PWA の URL プロトコル ハンドラ登録のデモを見ることができます。

1. https://protocol-handler.glitch.me/ に移動して PWA をインストールし、インストール後にアプリを再読み込みします。これで、ブラウザは PWA をオペレーティング システムの web+coffee プロトコルのハンドラとして登録しました。
2. インストールされている PWA ウィンドウで、https://protocol-handler-link.glitch.me/ リンクをクリックします。これにより、3 つのリンクを含む新しいブラウザタブが開きます。1 つ目または 2 つ目（ラテ マキアートかアメリカーノ）をクリックします。ブラウザにプロンプトが表示され、アプリが web+coffee プロトコルのプロトコル ハンドラとして適切かどうかを尋ねられます。同意すると、PWA が開き、選択したコーヒーが表示されます。
3. navigator.registerProtocolHandler() を使用する従来のフローと比較するには、PWA の [プロトコル ハンドラを登録] ボタンをクリックします。ブラウザタブで 3 番目のリンク（chai）をクリックします同様にプロンプトが表示されますが、PWA はブラウザ ウィンドウではなくタブで開きます。
4. Windows の Skype などのプラットフォーム固有のアプリケーションで <a href="web+coffee://americano">Americano</a> のようなリンクを含むメッセージを送信し、クリックします。同様に、インストールされている PWA が開きます。

セキュリティ上の考慮事項

PWA のインストールにはコンテキストのセキュリティが必要なため、プロトコル処理はこの制約を継承します。登録済みのプロトコル ハンドラのリストはウェブに公開されないため、フィンガープリントのベクトルとして使用できません。

ユーザーが開始していないナビゲーションの試行

プログラムによるナビゲーション試行がユーザーの操作ではない場合、アプリを開くことはできません。カスタム プロトコル URL は最上位のブラウジング コンテキストでのみ使用でき、たとえば iframe の URL では使用できません。

プロトコルの許可リスト

registerProtocolHandler() と同様に、アプリが処理登録できるプロトコルの許可リストがあります。

同意プロンプト

プロトコルが呼び出されて PWA を初めて起動すると、権限ダイアログがユーザーに表示されます。このダイアログには、アプリ名とアプリのオリジンが表示され、プロトコルからのリンクの処理がアプリに許可されているかどうかをユーザーに確認されます。ユーザーが権限ダイアログを拒否した場合、登録済みのプロトコル ハンドラはオペレーティング システムによって無視されます。プロトコル ハンドラの登録を解除するには、そのプロトコル ハンドラを登録した PWA をアンインストールする必要があります。また、ユーザーが [次回から入力を省略] を選択して [許可しない] を選択した場合、プロトコル ハンドラの登録が解除されます。

フィードバック

PWA の URL プロトコル ハンドラ登録の使用経験について、Chromium チームの皆さまをお聞かせください。

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

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

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

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

API のサポートを表示する

PWA に URL プロトコル ハンドラ登録を使用する予定はありますか？一般公開のサポートにより、Chromium チームは機能に優先順位を付け、そのサポートがいかに重要であるかを他のブラウザ ベンダーに示すことができます。

その使用方法を WICG Discourse スレッドで共有します。ハッシュタグ #ProtocolHandler を使用して @ChromiumDev にツイートし、使用場所と使用方法をお知らせください。

役に立つリンク

• 説明
• 仕様のドラフト
• GitHub
• ChromeStatus
• Chromium のバグ
• TAG の審査
• 対話

謝辞

PWA の URL プロトコル ハンドラ登録は、Microsoft Edge チームの Fabio Rocha、Diego González、Connor Moody、Samuel Tang によって実装および指定されました。この記事は、Joe Medley と Fabio Rocha によってレビューされました。ヒーロー画像（作成者: JJ Ying、出典: Unsplash）