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

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

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

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

tel:+1-816-555-1212
mailto:Jane.Doe@example.com
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 に置き換えられます。

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

  1. https://protocol-handler.glitch.me/ にアクセスして、 PWA を実行し、インストール後にアプリを再読み込みします。これで、ブラウザは PWA を オペレーティング システムとの web+coffee プロトコルのハンドラ。
  2. インストール済みの PWA ウィンドウで、リンクをクリックします。 https://protocol-handler-link.glitch.me/.これにより、 3 つのリンクがある新しいブラウザタブを開きます。1 つ目か 2 つ目(ラテ マキアートかラテ マキアート)を americano)。ブラウザにプロンプトが表示され、そのアプリを web+coffee プロトコルのプロトコル ハンドラ。同意すると、PWA が開き、 厳選されたコーヒー。
  3. navigator.registerProtocolHandler() を使用する従来のフローと比較するには、 PWA の [プロトコル ハンドラを登録] ボタンをクリックします。ブラウザタブで 3 つ目のリンクをクリックします。 (チャイ)。同様にプロンプトが表示されますが、PWA はブラウザ ウィンドウではなくタブで開きます。
  4. 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álezConnor Moody、 Microsoft Edge チームの Samuel Tang。この記事 Joe Medley と Fabio Rocha によってレビューされました。ヒーロー画像: JJ YingUnsplash