インストール済みの PWA で URL を処理できるようにして、より統合されたエクスペリエンスを実現します。
URL ハンドラとしての PWA とは
たとえば、macOS のメッセージ アプリなどのインスタント メッセンジャー アプリを使用して友人とチャットし、音楽について話しているとします。さらに、どちらもデバイスに music.example.com PWA がインストールされているとします。お気に入りのトラックを共有して友だちに楽しんでもらうには、https://music.example.com/rick-astley/never-gonna-give-you-up のようなディープリンクを送信します。このリンクは非常に長いため、music.example.com のデベロッパーは各トラックに短いリンク（例: https://🎵.example.com/r-a/n-g-g-y-u）を追加しているかもしれません。
URL ハンドラとしての PWA を使用すると、music.example.com などのアプリは、https://music.example.com、https://*.music.example.com、https://🎵.example.com などのパターンに一致する URL の URL ハンドラとして自身を登録できます。これにより、PWA の外部（インスタント メッセンジャー アプリケーションやメール クライアントなど）からのリンクは、ブラウザタブではなくインストール済みの PWA で開くことができます。
URL ハンドラとしての PWA には、次の 2 つの追加事項があります。
"url_handlers"ウェブアプリ マニフェストのメンバー。- 対象範囲外の URL の関連付けを検証するための
web-app-origin-associationファイル形式。
URL ハンドラとして PWA におすすめのユースケース
この API を使用するサイトの例:
- 音楽または動画ストリーミング サイト。追跡リンクまたはプレイリストのリンクがアプリのプレーヤー エクスペリエンスで開くようにします。
- フォローしているサイトや購読しているサイトがアプリのリーダーモードで開きます。
PWA を URL ハンドラとして使用する方法
about://flags を介して有効にする
オリジン トライアル トークンを使用せずに、PWA を URL ハンドラとしてローカルでテストするには、about://flags で #enable-desktop-pwas-url-handling フラグを有効にします。
"url_handlers" ウェブアプリ マニフェスト メンバー
インストールされている PWA を URL パターンに関連付けるには、ウェブアプリ マニフェストでこれらのパターンを指定する必要があります。これは "url_handlers" メンバーを介して行われます。origin プロパティを持つオブジェクトの配列を受け入れます。これは必須の string であり、オリジンを照合するためのパターンです。これらのパターンには、複数のサブドメイン（https://*.example.com など）を含めるために、ワイルドカード（*）プレフィックスを使用できます。これらのオリジンに一致する URL は、このウェブアプリで処理できます。スキームは常に https:// とみなされますが、明示的に指定する必要があります。
以下のウェブアプリ マニフェストの抜粋は、導入段落の Music PWA の例でこれを設定する方法を示しています。ワイルドカード（"https://*.music.example.com"）を含む 2 番目のエントリは、アプリが https://www.music.example.com または https://marketing-activity.music.example.com などの他の潜在的な例でもアクティブになるようにします。
{
"url_handlers": [
{
"origin": "https://music.example.com"
},
{
"origin": "https://*.music.example.com"
},
{
"origin": "https://🎵.example.com"
}
]
}
web-app-origin-association ファイル
PWA は、処理する必要がある一部の URL とは異なるオリジン（music.example.com）に存在するため、https://🎵.example.com など）を宣言する場合、アプリはこれらの他のオリジンの所有権を確認する必要があります。これは、他の送信元でホストされている web-app-origin-association ファイルで発生します。
このファイルには有効な JSON が含まれている必要があります。最上位構造は、"web_apps" という名前のメンバーを持つオブジェクトです。このメンバーはオブジェクトの配列で、各オブジェクトは固有のウェブアプリのエントリを表します。各オブジェクトには次のものが含まれます。
| 項目 | 説明 | タイプ | デフォルト |
|---|---|---|---|
"manifest" |
（必須）関連する PWA のウェブアプリ マニフェストの URL 文字列 | string |
なし |
"details" |
（省略可）追加または除外する URL パターンの配列を含むオブジェクト | object |
なし |
各 "details" オブジェクトには次のものが含まれます。
| 項目 | 説明 | タイプ | デフォルト |
|---|---|---|---|
"paths" |
（省略可）許可されるパス文字列の配列 | string[] |
[] |
"exclude_paths" |
（省略可）使用できないパス文字列の配列 | string[] |
[] |
上記の音楽 PWA のサンプル web-app-origin-association ファイルを以下に示します。これはオリジンの 🎵.example.com でホストされ、ウェブアプリ マニフェスト URL で識別される music.example.com PWA との関連付けを確立します。
{
"web_apps": [
{
"manifest": "https://music.example.com/manifest.json",
"details": {
"paths": ["/*"],
"exclude_paths": ["/internal/*"]
}
}
]
}
URL が一致するケース
次の両方の条件が満たされると、PWA は処理用の URL と照合されます。
- URL が
"url_handlers"のオリジン文字列のいずれかと一致する。 - ブラウザは、それぞれの
web-app-origin-associationファイルを介して、各オリジンがこのアプリによる URL の処理に同意していることを検証できます。
web-app-origin-association ファイルの検出について
ブラウザで web-app-origin-association ファイルを検出できるようにするには、アプリのルートにある /.well-known/ フォルダに web-app-origin-association ファイルを配置する必要があります。そのためには、ファイル名を web-app-origin-association にする必要があります。
デモ
PWA を URL ハンドラとしてテストするには、上記のようにブラウザフラグを設定してから、https://mandymsft.github.io/pwa/ で PWA をインストールします。ウェブアプリ マニフェストを見ると、URL パターン https://mandymsft.github.io と https://luhuangmsft.github.io の URL を処理していることがわかります。後者は PWA とは異なるオリジン（luhuangmsft.github.io）にあるため、mandymsft.github.io 上の PWA は所有権を証明する必要があります。これは、https://luhuangmsft.github.io/.well-known/web-app-origin-association でホストされている web-app-origin-association ファイルを介して行われます。
正しく動作するかどうかをテストするには、任意のインスタント メッセージ アプリを使用するか、macOS の Mail などのウェブベースではないメール クライアントで表示したメールを使用して、テスト メッセージを自分自身に送信します。メールまたはテキスト メッセージには、https://mandymsft.github.io または https://luhuangmsft.github.io のいずれかのリンクが含まれている必要があります。インストールされている PWA でどちらも開きます。
セキュリティと権限
Chromium チームは、強力なウェブ プラットフォーム機能へのアクセスの制御で定義されている基本原則（ユーザー制御、透明性、エルゴノミクスなど）を使用して、PWA を URL ハンドラとして設計、実装しました。
ユーザー コントロール
特定の URL パターンに対して複数の PWA が URL ハンドラとして登録されている場合、ユーザーはパターンを処理する PWA を選択するように求められます。この提案では、ブラウザタブで開始されるナビゲーションは処理されず、ブラウザ外で開始されるナビゲーションが対象になります。
透明性
なんらかの理由で PWA のインストール中に必要な関連付けの検証を完了できない場合、ブラウザは影響を受ける URL のアクティブな URL ハンドラとしてアプリを登録しません。URL ハンドラが正しく実装されていない場合は、ウェブサイトのトラフィックを乗っ取るために使用される可能性があります。そのため、アプリの関連付けメカニズムがスキームの重要な部分となっています。
プラットフォーム固有のアプリでは、すでにオペレーティング システムの API を使用して、ユーザーのシステムにインストールされているアプリを列挙できます。たとえば、Windows 上のアプリケーションでは、FindAppUriHandlersAsync API を使用して URL ハンドラを列挙できます。PWA が Windows で OS レベルの URL ハンドラとして登録されると、その存在が他のアプリに公開されます。
権限の永続性
オリジンと PWA の関連付けはいつでも変更できます。ブラウザは、インストールされているウェブアプリの関連付けを定期的に再検証しようとします。関連付けデータが変更されたか利用できなくなったために URL ハンドラ登録が再検証されなかった場合、ブラウザは登録を削除します。
フィードバック
URL ハンドラとしての PWA の使用経験について、Chromium チームではご意見を伺いたいと思います。
API の設計についてお聞かせください
API に想定したとおりに動作しない点はありますか。あるいは、アイデアを実装するために必要なメソッドやプロパティが欠落していないか？セキュリティ モデルについてご質問やご意見がある場合は、対応する GitHub リポジトリで仕様の問題を提出するか、既存の問題にご意見をお寄せください。
実装に関する問題を報告する
Chromium の実装でバグが見つかりましたか？それとも、実装が仕様と異なりますか？
new.crbug.com でバグを報告します。できる限り詳細な情報と再現手順を記載し、[Components] ボックスに「UI>Browser>WebAppInstalls」と入力します。Glitch を使えば、再現をすばやく簡単に共有できます。
API のサポートを表示する
PWA を URL ハンドラとして使用する予定はありますか？一般公開のサポートにより、Chromium チームは機能の優先順位付けに役立ち、他のブラウザ ベンダーはそのサポートがいかに重要であるかを示しています。
ハッシュタグ #URLHandlers を使用して @ChromiumDev 宛てにツイートを送信し、使用場所と使用方法をお知らせください。
関連情報
- 一般公開の説明動画
- デモ | デモソース
- Chromium トラッキング バグ
- ChromeStatus.com のエントリ
- Blink コンポーネント:
UI>Browser>WebAppInstalls - TAG の確認
- Microsoft のドキュメント
謝辞
URL ハンドラとしての PWA の指定と実装は、Microsoft Edge チームの Lu Huang と Mandy Chen が担当しました。この記事は、Joe Medley によってレビューされました。ヒーロー画像（作成者: Bryson Hammer、Unsplash）