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

Chrome 122 以降、scope_extensions のオリジン トライアルに登録できます アプリ マニフェスト メンバーを使用すると、複数のサブドメインや上位のドメインを制御できる 単一のウェブアプリとして提示できます。このドキュメントでは、 Chrome チームがこの機能を紹介し、いつ使用すればよいかを説明します。

Demián Renzulli

Thomas Steiner

概要

ウェブ アプリケーションによっては、 origins: たとえば、メインアプリとして example.com、次に space_1.example.com、...、 space_n.example.com（場合によっては special-example.com との組み合わせ）: サブエクスペリエンスのすべてを管理できます。このタイプのサイト プログレッシブ ウェブアプリの観点では、 Service Worker やデバイスの種類を問わず、 ローカル ストレージ、オリジン間の権限などです。また、クロスオリジン ナビゲーションでは、 スタンドアロン PWA にウィンドウ UI（「サポート範囲外」バー）が表示され、 PWA エクスペリエンスから移行しました検出ルールの回避方法については、 関連記事で マルチオリジン サイトでのプログレッシブ ウェブアプリ および 同じドメイン上での複数のプログレッシブ ウェブアプリの構築。

Scope Extensions API を使用すると、ウェブ アプリケーションで 同一オリジン ポリシー この種のサイトアーキテクチャには 制約がありますこれにより、ウェブアプリがユーザーの 他のオリジンにスコープ ウェブアプリとモバイルアプリの双方に オリジンと関連付けられています

目標

Scope Extensions API の主な目標は、 複数のサブドメインとトップレベル ドメインを連続した 1 つのウェブ アプリケーションとして動作させる ウェブアプリの UI とリンクの キャプチャについて取り上げますたとえば、サイトが Google Play に example.com.co.uk と support.example.com にまたがる example.com の動作 単一のウェブ アプリケーションとして扱えるようにします。

スコープ拡張を使用すると、次の場合にマルチオリジン PWA が連続したウェブアプリとして動作できるようになります。 ウェブアプリの UI についてです

これは実際には、さらに次の 2 つの目標につながります。

• クロスオリジン ナビゲーション: 関連するオリジン間を移動できます。 ウィンドウ UI を呼び出して PWA から移行していることをユーザーに伝えます。
• クロスオリジン リンク キャプチャ: ウェブアプリが以下へのユーザーのナビゲーションをキャプチャできるようにします。 確認することもできます

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

デフォルトでは、ユーザーがスタンドアロン PWA でオリジン間を移動すると、 PWA エクスペリエンスの外側に移動することを示すウィンドウ UI を表示している。 Chrome のこの UI は「サポート範囲外」そのページの URL を含む 作成します。ユーザーが期待するとおり、この機能はユーザー エクスペリエンスの妨げとなります。 同じアプリのコンテキスト内をナビゲートしようとしても、 取り除かれます

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

スコープ拡張機能を使用すると、ユーザーが任意のゾーンに移動してもウィンドウ UI が表示されなくなる 表示できるため、統一されたエクスペリエンスとして PWA を提供できます。

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

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

ChromeOS のタブの Chrome アドレスバーのフラグメント リンクを PWA で処理できることと、その決定を記憶するオプションがあること。

ユーザーが PWA の範囲外のリンク（ サブドメインやトップレベル ドメインにリンクしていないと、ドメインに属するものとして認識されません。 追加できます。たとえば、ブラウザタブでリンクが何も表示されずに開きます。 リンクを処理できるアプリがあることをユーザーに知らせます。スコープ 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 構成ファイル。このファイルは次の条件を満たしている必要があります。 web-app-origin-association という名前が付けられ、次のとおり正確なロケーションで提供される Well-Known URI であること。

/.well-known/web-app-origin-association（関連するオリジン）

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

デモ

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

• メイン PWA: 使用する実際の PWA scope_extensions メンバーを通じて関連するオリジンのリストを宣言します。 ウェブアプリ マニフェスト内で指定します。
• 拡張スコープ内のオリジン: メイン PWA の範囲外であるが、リストされた後に関連付けられている 関連付けられたオリジンとしてメイン PWA によって管理され、 を web-app-origin-association ファイル。

次のテストを実行するには、 about://flags/#enable-desktop-pwas-scope-extensions フラグ（ Chrome v115 以降）。

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

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

拡張スコープのオリジンへのリンクと拡張されていないオリジンへのリンクを含む PWA のデモ あります。

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

1. リンクをクリックして、拡張されたスコープにないオリジンへのリンク 再生することもできます
2. その結果、ナビゲーションが発生し、スコープ外のバーが表示されます。

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

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

1. PWA のホームページに戻ります。
2. クリックして オリジンが拡張スコープ外。
3. デフォルトでは、「サポート範囲外」表示されますが、スコープの設定により、 拡張機能の関連付けではありません。

「サポート範囲外」オリジンの関連付け後にクロスオリジン ナビゲーションにバーが表示されない スコープ拡張機能を使用して作成されました

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

1. メインの PWA を ChromeOS デバイス。
2. 次のリンクをクリックします。 関連付けられているオリジン。
3. リンクが新しいブラウザタブで開き、 インストールされている PWA です。

PWA の関連オリジンへのリンクをクリックすると、新しいタブでリンクが開き、 「Open in App」と表示されるユーザーが自動リンクをオプトインできるアイコン 作成します。

オリジン トライアル

この API を実際のアプリケーションでテストし、 これを行うには、 オリジン トライアル。 オリジン トライアルでは、 ドメインに関連付けられているテストトークンです。その後、アプリをデプロイし、 テスト中の機能（ Chrome では 121 ～ 126 まで使用できます）。独自のトークンを オリジン トライアルを実行するには、 お申し込みフォームに記入します。

フィードバック

Chrome チームでは、この API の有用性に関するフィードバックをお待ちしています。宛先 API の有用性に関するフィードバックや 新しいユースケースに対応する場合は、 GitHub の問題。

参考情報

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

謝辞

この API の開発に携わったチームに心より感謝いたします。スコープ拡張 Alan Cutter によって指定され、 Lu Huang、出典: Matt Giuca。API の実装 Google Chrome の Alan Cutter、 Hassan Talat 氏 Kristin Lee、 Microsoft Edge の Lu Huang。