インストール済みの PWA で URL を処理できるようにして、より統合されたエクスペリエンスを実現します。
URL ハンドラとしての PWA とは
macOS のメッセージなどのインスタント メッセンジャー アプリケーションを使用して、友人と音楽についてチャットしているとします。さらに、2 人ともデバイスに 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 を使用するサイトの例を次に示します。
- 音楽または動画のストリーミング サイト。トラックリンクまたはプレイリスト リンクがアプリのプレーヤー エクスペリエンスで開きます。
- ニュース リーダーや RSS リーダー。フォローまたは登録したサイトがアプリのリーダーモードで開きます。
PWA を URL ハンドラとして使用する方法
about://flags で有効にする
オリジン トライアル トークンを使用せずに、URL ハンドラとして PWA をローカルでテストするには、about://flags で #enable-desktop-pwas-url-handling フラグを有効にします。
"url_handlers" ウェブアプリ マニフェスト メンバー
インストール済みの PWA を URL パターンに関連付けるには、ウェブアプリ マニフェストでこれらのパターンを指定する必要があります。これは "url_handlers" メンバーを介して行われます。origin プロパティを持つオブジェクトの配列を受け入れます。これは、オリジンを照合するためのパターンである必須の string です。これらのパターンでは、複数のサブドメイン（https://*.example.com など）を含めるために、ワイルドカード（*）接頭辞を使用できます。これらのオリジンに一致する URL は、このウェブアプリで処理できます。スキームは常に https:// と見なされますが、明示的に指定する必要があります。
次のウェブアプリ マニフェストの抜粋は、導入段落の音楽 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（https://🎵.example.com など）とは異なるオリジン（music.example.com）に存在するため、アプリはこれらの他のオリジンの所有権を確認する必要があります。これは、他のオリジンでホストされている web-app-origin-association ファイルで発生します。
このファイルには有効な JSON が含まれている必要があります。最上位の構造はオブジェクトで、"web_apps" という名前のメンバーがあります。このメンバーはオブジェクトの配列であり、各オブジェクトは一意のウェブアプリのエントリを表します。各オブジェクトには次のものが含まれます。
| フィールド | 説明 | 型 | デフォルト |
|---|---|---|---|
"manifest" |
（必須）関連付けられた PWA のウェブアプリ マニフェストの URL 文字列 | string |
なし |
"details" |
（省略可）含める URL パターンと除外する 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 ファイルを検出できるようにするには、デベロッパーは web-app-origin-association ファイルをアプリのルートにある /.well-known/ フォルダに配置する必要があります。これが機能するには、ファイル名が正確に web-app-origin-association である必要があります。
デモ
URL ハンドラとして PWA をテストするには、説明に沿ってブラウザフラグを設定してから、https://mandymsft.github.io/pwa/ で PWA をインストールします。ウェブアプリ マニフェストを見ると、https://mandymsft.github.io と https://luhuangmsft.github.io の URL パターンを持つ URL を処理していることがわかります。後者は PWA とは異なるオリジン（luhuangmsft.github.io）にあるため、mandymsft.github.io の PWA は所有権を証明する必要があります。これは、https://luhuangmsft.github.io/.well-known/web-app-origin-association でホストされている web-app-origin-association ファイルを使用して行われます。
実際に動作していることをテストするには、任意のインスタント メッセージ アプリを使用するか、macOS のメールなどのウェブベースではないメール クライアントで表示されるメールを使用して、自分宛てにテスト メッセージを送信します。メールまたはテキスト メッセージには、https://mandymsft.github.io または https://luhuangmsft.github.io のいずれかのリンクが含まれている必要があります。どちらもインストール済みの PWA で開くはずです。
セキュリティと権限
Chromium チームは、強力なウェブ プラットフォーム機能へのアクセスを制御するで定義されているコア原則（ユーザー コントロール、透明性、エルゴノミクスなど）を使用して、URL ハンドラとして PWA を設計、実装しました。
ユーザー コントロール
特定の URL パターンの URL ハンドラとして複数の PWA が登録されている場合、ユーザーは、そのパターンを処理する PWA を選択するよう求められます。ブラウザタブで開始されるナビゲーションは、この提案では処理されません。この提案は、ブラウザ外で開始されるナビゲーションを明示的に対象としています。
透明性
なんらかの理由で PWA のインストール中に必要な関連付けの検証を正常に完了できない場合、ブラウザは影響を受ける URL のアクティブな URL ハンドラとしてアプリを登録しません。URL ハンドラが不適切に実装されていると、ウェブサイトのトラフィックをハイジャックするために使用される可能性があります。このため、アプリの関連付けメカニズムは、このスキームの重要な部分です。
プラットフォーム固有のアプリケーションは、オペレーティング システムの API を使用して、ユーザーのシステムにインストールされているアプリケーションを列挙できます。たとえば、Windows のアプリケーションは、FindAppUriHandlersAsync API を使用して URL ハンドラを列挙できます。PWA が Windows で OS レベルの URL ハンドラとして登録されている場合、その存在は他のアプリケーションに表示されます。
権限の永続性
オリジンは、PWA との関連付けをいつでも変更できます。ブラウザは、インストールされたウェブアプリの関連付けを定期的に再検証しようとします。関連付けデータが変更されたか、利用できなくなったために URL ハンドラの登録の再検証が失敗した場合、ブラウザは登録を削除します。
フィードバック
Chromium チームは、URL ハンドラとしての PWA の使用に関するご意見をお待ちしています。
API 設計について教えてください
API が想定どおりに動作しない場合は、アイデアを実装するために必要なメソッドやプロパティが不足していませんか？セキュリティ モデルについてご質問やご意見がある場合は、対応する GitHub リポジトリで仕様に関する問題を報告するか、既存の問題に意見を追加します。
実装に関する問題を報告する
Chromium の実装にバグが見つかった場合は、それとも、実装が仕様と異なるのでしょうか。
new.crbug.com でバグを報告します。できるだけ詳細な情報と再現手順を記載し、[Components] ボックスに「UI>Browser>WebAppInstalls」と入力してください。
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 によってレビューされました。