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

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

特定のプロトコルを使用するリンクの処理を、インストール済みの PWA に許可することで、より一貫性のあるエクスペリエンスを実現できます。

Thomas Steiner

スキーム（プロトコル）に関するバックグラウンド

Uniform Resource Identifier（URI）は、リソースサービスを識別するための物理リソースです。各 URI は scheme 名そのスキーム内で識別子を割り当てます。そのため、URI 構文は連携され、拡張可能なこの命名規則により、各スキームの仕様によって、そのスキームを使用して識別されます。スキームはプロトコルとも呼ばれます。Cloud Shell から下で説明します

tel:+1-816-555-1212
mailto:[email protected]
news:comp.infosystems.www.servers.unix
https://web.dev/

Uniform Resource Locator（URL）という用語は、リソースを特定する。そのプライマリアクセスを記述してリソースを特定する手段を提供するメカニズム（ネットワークロケーションなど）によって識別されます。

`registerProtocolHandler()` メソッドの背景

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

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

スキームはいずれかの（例: mailto、bitcoin、magnet）を指定するか、web+ で始まり 1 つ以上の web+ 接頭辞の後に小文字の 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 では、ドキュメント内に次のようなプレゼンテーションへのリンクが表示されます。 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 でのプロトコルハンドラのデバッグ

[アプリケーション] から [プロトコルハンドラ] セクションに移動します。[マニフェスト] ペインGoogle Chat ではすべてのプロトコルを表示してテストできます。

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

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

デモ

Glitch で PWA の URL プロトコルハンドラ登録のデモを確認できます。

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

URL プロトコルハンドラのデモ。左側にリンク付きのブラウザタブ、右側にスタンドアロン PWA ウィンドウが表示されている。

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

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

ユーザーが開始しなかったナビゲーションの試行

ユーザーによる操作ではないもののプログラマティックなナビゲーション試行は、開始できません。。カスタムプロトコル URL は最上位のブラウジングコンテキストでのみ使用できます。たとえば、 iframe の URL として使用します。

プロトコルの許可リスト

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

同意プロンプト

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

フィードバック

Chromium チームでは、 PWA

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

API について、想定どおりに機能していないものはありますか？あるいは不足しているメソッドがあるかアイデアを実現するために必要なものやプロパティは？セキュリティに関する質問またはコメントどうすればよいでしょうか。対応する GitHub リポジトリで仕様に関する問題を報告するか、解決します

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

Chromium の実装にバグは見つかりましたか？または、実装が仕様と異なっていますか？ new.crbug.com でバグを報告します。できるだけ詳細に説明してください [Components] セクションで [UI>Browser>WebAppInstalls] を入力します。のボックスを選択します。Glitch は、すばやく簡単に再現を共有するのに最適です。

API のサポートを表示する

PWA に URL プロトコルハンドラの登録を使用する予定はありますか？皆様の公的なサポートは、 Chromium チームは機能の優先度を判断し、他のブラウザベンダーにサポートの重要性を伝えますできます。

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

役に立つリンク

謝辞

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