このページは Cloud Translation API によって翻訳されました。

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

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

Thomas Steiner

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

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

tel:+1-816-555-1212
mailto:Jane.Doe@example.com
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）。

これを明確にするために、フローの実例を次に示します。

ユーザーが https://coffeeshop.example.com/ のサイトにアクセスすると、navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s') という呼び出しが行われます。
後日、ユーザーが https://randomsite.example.com/ にアクセスしたときに、<a href="web+coffee:latte-macchiato">All about latte macchiato</a> などのリンクをクリックします。
これにより、ブラウザは次の 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 に必要な %s プレースホルダを含むハンドラの URL を含む文字列です。

{
  "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 でコーヒーのページを開きます。

[マニフェスト] ペインのプロトコルハンドラ

デモ

PWA の URL プロトコルハンドラの登録のデモは Glitch でご覧いただけます。

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

左側にリンクを含むブラウザタブ、右側にスタンドアロンの PWA ウィンドウがある URL プロトコルハンドラのデモ。

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

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

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

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

プロトコルの許可リスト

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

同意プロンプト

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

フィードバック

Chromium チームでは、PWA の URL プロトコルハンドラ登録についてご意見をお聞かせください。

API 設計について

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

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

Chromium の実装にバグが見つかりましたか？それとも、実装が仕様と異なるのでしょうか？new.crbug.com でバグを報告します。できるだけ詳細な情報を含め、再現手順を簡単に説明してください。[コンポーネント] ボックスに UI>Browser>WebAppInstalls を入力します。Glitch は、すばやく簡単に再現を共有するのに最適です。

API のサポートを表示する

PWA の URL プロトコルハンドラの登録を使用する予定はありますか？一般公開でサポートすると、Chromium チームが機能の優先順位を決めるのに役立ち、他のブラウザベンダーにその機能のサポートがどれほど重要であるかを示します。

どのように使用する予定なのかを WICG の談話スレッドで共有してください。ハッシュタグ #ProtocolHandler を使用して @ChromiumDev にツイートを送信し、どこでどのように使用しているかをお知らせください。

役に立つリンク

謝辞

PWA の URL プロトコルハンドラの登録は、Microsoft Edge チームの Fabio Rocha、Diego González、Connor Moody、Samuel Tang によって実装および指定されました。この記事は、Joe Medley と Fabio Rocha が確認しました。Unsplash の JJ Ying によるヒーロー画像。