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

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

Demián Renzulli

Thomas Steiner

概要

一部のウェブ アプリケーションには複数のオリジンがあります。たとえば、example.com をメインアプリとして、space_1.example.com、…、space_n.example.com をサブ エクスペリエンスとして、メインアプリの傘下に置くことがあります。このタイプのサイト アーキテクチャは、プログレッシブ ウェブアプリのコンテキストで影響を及ぼします。special-example.com制限事項としては、オリジン間でサービス ワーカー、あらゆる種類のデバイス、ローカル ストレージ、権限を共有できないことが挙げられます。また、スタンドアロン PWA でクロスオリジン ナビゲーションを行うと、ユーザーが PWA エクスペリエンスから移動したことを示すウィンドウ UI（「範囲外」バー）が表示されます。これらの問題の一部を回避する方法については、マルチオリジン サイトでのプログレッシブ ウェブアプリと同じドメインで複数のプログレッシブ ウェブアプリを構築するの記事をご覧ください。

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

目標

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

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

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

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

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

デフォルトでは、ユーザーがスタンドアロン PWA 内でオリジンを移動すると、PWA のエクスペリエンス外に移動していることを示すウィンドウ UI が表示されます。Chrome では、この UI は新しいオリジンの URL を含む「範囲外」バーで構成されます。ユーザーは同じアプリケーション コンテキスト内でナビゲーションを続行することを期待しているため、この動作はユーザー エクスペリエンスを損なう可能性があります。ユーザーは、アプリケーション コンテキストから外されたと感じる可能性があります。

スタンドアロン PWA でユーザーが異なるオリジン間を移動したときに Chrome に表示される「範囲外」バー。

Scope Extensions を使用すると、ユーザーが関連付けられたオリジンに移動したときにウィンドウ 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 ファイルを通じて関係が確認された後に、メイン PWA に関連付けられたオリジン。

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

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

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

拡張スコープ内のオリジンと拡張スコープ外のオリジンへのリンクを含むデモ PWA。

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

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

スタンドアロン モードの PWA のクロスオリジン ナビゲーションで、デフォルトで「範囲外」バーが表示されるようになりました。

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

1. PWA のホームページに戻ります。
2. 拡張スコープに含まれていないオリジンへのリンクをクリックします。
3. デフォルトでは「範囲外」のバーが表示されますが、Scope Extensions の関連付けがあるため、表示されません。

Scope Extensions でオリジン関連付けを行った後、クロスオリジン ナビゲーションで「範囲外」バーが表示されない。

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

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

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

オリジン トライアル

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

フィードバック

Chrome チームは、この API の有用性に関するフィードバックを求めています。この API を有用性に関するフィードバックや、現在のバージョンでカバーされていない新しいユースケースに基づいて進化させるために、GitHub で問題を報告してください。

参考情報

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

謝辞

この API の開発に携わったチームに感謝いたします。Scope Extensions は Alan Cutter と Lu Huang が指定し、Matt Giuca が入力しました。この API は、Google Chrome の Alan Cutter と、Microsoft Edge の Hassan Talat、Kristin Lee、Lu Huang によって実装されました。