ウェブアプリ スコープ拡張機能

Chrome 122 以降では、scope_extensions アプリ マニフェスト メンバーのオリジン トライアルに登録できます。これにより、複数のサブドメインとトップレベル ドメインを管理するサイトを、単一のウェブアプリとして提示できます。このドキュメントでは、Chrome チームがこの機能を導入する理由と、いつ利用すべきかについて説明します。

Demián Renzulli

Thomas Steiner

概要

ウェブ アプリケーションの中には、複数のオリジンを持つものがあります。たとえば、example.com がメインアプリに、space_1.example.com、...、space_n.example.com がサブエクスペリエンスとして special-example.com と組み合わされるなど、すべてメインアプリの管理下にあります。このタイプのサイト アーキテクチャは、プログレッシブ ウェブアプリに関連しています。制限事項には、Service Worker、あらゆる種類のデバイス、ローカル ストレージ、オリジン間での権限を共有できないことなどがあります。また、スタンドアロン PWA のクロスオリジン ナビゲーションでは、ユーザーが PWA エクスペリエンスから移動したことを示すウィンドウ UI（「サポート範囲外」バー）が表示されます。このような問題を回避する方法については、マルチオリジン サイトのプログレッシブ ウェブアプリと同じドメインで複数のプログレッシブ ウェブアプリを構築するの記事をご覧ください。

Scope Extensions API を使用すると、このタイプのサイト アーキテクチャで同一オリジン ポリシーがもたらす課題の一部を、ウェブアプリで克服できます。これにより、ウェブアプリのスコープを他のオリジンに拡張できるため、ウェブアプリの主要なオリジンと関連するオリジンが合意され、統一されたエクスペリエンスを実現できます。

目標

Scope Extensions API の主な目的は、複数のサブドメインとトップレベル ドメインを管理するサイトが、ウェブアプリの UI とリンク キャプチャに関して、1 つの連続したウェブアプリとして動作できるようにすることです。たとえば、example.com.co.uk と support.example.com にまたがるサイト example.com が、可能な限り 1 つのウェブ アプリケーションとして動作できるようにします。

スコープ拡張機能を使用すると、ウェブアプリ UI に関して、マルチオリジン PWA を連続したウェブアプリとして動作させることができます。

実際には、これはさらに 2 つの具体的な目標になります。

• クロスオリジン ナビゲーション: ユーザーは、PWA から離れることを通知するウィンドウ UI を呼び出して、ユーザー エクスペリエンスを中断することなく、関連付けられているオリジン間を移動できるようにします。
• クロスオリジン リンク キャプチャ: ウェブアプリがアフィリエイト サイトへのユーザー ナビゲーションをキャプチャできるようにします。

クロスオリジンのスコープ内ナビゲーション

デフォルトでは、ユーザーがスタンドアロン PWA でオリジン間を移動すると、PWA エクスペリエンスの外側に移動することを示すウィンドウ UI が表示されます。Chrome では、この UI は新しいオリジンの URL を含む「対象外」のバーで構成されます。ユーザーは同じアプリ コンテキスト内を移動し続けることを期待しますが、コンテキストから外れていると認識する可能性があるため、これはユーザー エクスペリエンスの妨げとなります。

ユーザーがスタンドアロン PWA で異なるオリジン間を移動する際に Chrome に表示される「サポート範囲外」バー。

スコープ拡張機能を使用すると、ユーザーが関連するオリジンに移動してもウィンドウ UI が表示されないため、PWA が統一されたエクスペリエンスとして表示されます。

クロスオリジン リンク キャプチャ

リンク キャプチャとは、アプリがそのスコープ内のリンクをキャプチャする機能のことです。この実装方法は、ブラウザやオペレーティング システムによって異なります。たとえば ChromeOS の Chrome では、デフォルトで、インストール済みの PWA の範囲内のリンクによりブラウザタブが開き、そのリンクを処理できるアプリがあることがアドレスバーに表示されます。これにより、ユーザーはその時点からのリンクの自動キャプチャをオプトインできます。

ChromeOS のタブの Chrome アドレスバーの一部。PWA でリンクを処理できることを視覚的に示し、その決定を記憶するオプションが表示されている。

PWA の範囲外のリンク（サブドメインやトップレベル ドメインへのリンクを含む）をユーザーがクリックした場合、そのユーザーは PWA に属していると認識されません。たとえば、リンクを処理できるアプリがあることをユーザーに示すことなく、ブラウザタブでリンクが開きます。Scope Extensions API を使用すると、PWA のスコープを拡張して、関連するオリジンを対象範囲内のリンクとして扱うことができます。

実装

スコープ拡張を実装するには、メインのオリジンと関連するオリジンとの関係を確立する必要があります。

関連付けられているオリジンのリストを宣言する

scope_extensions ウェブアプリ マニフェスト メンバーをメインの PWA オリジンに追加して、ウェブアプリのスコープを他のオリジンに拡張できるようにします。

ウェブアプリ マニフェスト（https://example.com）

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    { "origin": "https://*.example.com" },
    { "origin": "https://example.co.uk" },
    { "origin": "https://*.example.co.uk" }
  ]
}

関連付けを確認

リストされた各オリジンが、/.well-known/web-app-origin-association 構成ファイルを使用してウェブアプリとの関連付けを確認します。このファイルは Well-Known URI であるため、web-app-origin-association という名前を付け、この正確な場所で提供する必要があります。

/.well-known/web-app-origin-association（関連付けられたオリジン）

{
  "web_apps": [{ "web_app_identity": "https://example.com" }]
}

デモ

このデモは、次の 2 つのサイトで構成されています。

• メイン PWA: ウェブアプリ マニフェストで scope_extensions メンバーを介して関連オリジンのリストを宣言する実際の PWA。
• 拡張スコープのオリジン: メイン PWA の範囲外だが、メイン PWA によって関連オリジンとしてリストされ、web-app-origin-association ファイルで関係が確認された後に関連付けられているオリジン。

次のテストを実行するには、about://flags/#enable-desktop-pwas-scope-extensions フラグ（Chrome v115 以降で利用可能）を有効にする必要があります。

クロスオリジン ナビゲーションをテストする

これらのテストの前提条件として、ブラウザでメイン PWA を開き、PWA としてインストールして、スタンドアロン モードで実行します。PWA には、拡張スコープのオリジンと拡張スコープ外のオリジンへのリンクが含まれています。

拡張スコープのオリジンと拡張スコープ外のオリジンへのリンクがあるデモ PWA。

デフォルトのクロスオリジン ナビゲーション（拡張スコープ外）

1. 全画面 PWA 内で、拡張スコープにないオリジンへのリンクをクリックします。
2. その結果、ナビゲーションが行われ、サポート範囲外のバーが表示されます。

スタンドアロン モードの PWA のクロスオリジン ナビゲーションで、デフォルトで「サポート範囲外」バーが表示されます。

スコープ拡張（拡張スコープ）を使用したクロスオリジン ナビゲーション

1. PWA のホームページに戻ります。
2. 拡張スコープにない送信元へのリンクをクリックします。
3. デフォルトでは「対象外」のバーが表示されますが、スコープ拡張機能の関連付けによりは表示されません。

スコープ拡張とオリジンの関連付けを行った後に、クロスオリジン ナビゲーションで「サポート範囲外」バーが表示されない。

クロスオリジン リンク キャプチャをテストする

1. ChromeOS デバイスでメイン PWA を開いてインストールします。
2. 関連付けられた送信元のリンクをクリックします。
3. 新しいブラウザタブでリンクが開き、インストールされている PWA で開くよう求めるメッセージが表示されます。

PWA に関連付けられたオリジンへのリンクをクリックすると、新しいタブでリンクが開き、「アプリで開く」アイコンが表示され、ユーザーは自動リンク キャプチャを有効にすることができます。

オリジン トライアル

この API をアプリケーション内で実際のユーザーのフィールドでテストしたい場合は、オリジン トライアルを利用できます。オリジン トライアルでは、ドメインに関連付けられたテストトークンを取得することで、ユーザーと一緒に試験運用版の機能を試すことができます。その後、アプリをデプロイして、テスト中の機能をサポートするブラウザで動作させることができます（この場合、Chrome では Chrome 121 ～ 126 を使用できます）。オリジン トライアルを実施するための独自のトークンを取得するには、申請フォームに記入してください。

フィードバック

Chrome チームは、この API の有用性に関するフィードバックを求めています。この API の有用性と、現在のバージョンでカバーされていない新しいユースケースに関するフィードバックを提供して、この API を進化させるために、GitHub で Issue をオープンしてください。

参考情報

• Scope Extensions API - オリジン トライアル
• Chrome ステータス - ウェブアプリ スコープ拡張機能
• ウェブ アプリケーション向けのスコープ拡張の説明
• テストの目的
• Mozilla 標準の位置
• Apple の標準の位置付け
• Chromium のバグ
• マルチオリジン サイトでのプログレッシブ ウェブアプリ
• 同じドメインで複数のプログレッシブ ウェブアプリを構築する

謝辞

この API の開発を担当したチームに感謝します。スコープ拡張機能は、Matt Giuca の入力に基づき、Alan Cutter と Lu Huang によって指定されました。この API は、Google Chrome の Alan Cutter と Microsoft Edge の Hassan Talat、Kristin Lee、Lu Huang によって実装されました。