Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

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] セクションに移動します。利用可能なすべてのプロトコルをここで確認してテストできます。

[Manifest] ペインのプロトコルハンドラ

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

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

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

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

プロトコルの許可リスト

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

同意プロンプト

呼び出されたプロトコルが原因で PWA が初めて起動されると、ユーザーに権限ダイアログが表示されます。このダイアログには、アプリの名前とアプリの提供元が表示され、アプリがプロトコルからのリンクを処理することを許可するかどうかをユーザーに尋ねます。ユーザーが権限ダイアログを拒否すると、登録されたプロトコルハンドラはオペレーティングシステムによって無視されます。プロトコルハンドラの登録を解除するには、ユーザーは登録した PWA をアンインストールする必要があります。ユーザーが [選択を記憶する] を選択して [許可しない] を選択した場合も、ブラウザはプロトコルハンドラの登録を解除します。

フィードバック

Chromium チームは、PWA の URL プロトコルハンドラの登録に関するご意見をお待ちしています。

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

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

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

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

API のサポートを示す

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

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

役に立つリンク

謝辞

PWA の URL プロトコルハンドラの登録は、Microsoft Edge チームの Fabio Rocha、Diego González、Connor Moody、Samuel Tang によって実装、指定されました。このドキュメントは、Joe Medley と Fabio Rocha によってレビューされました。