網頁應用程式範圍擴充功能

自 Chrome 122 起，您可以訂閱 scope_extensions 應用程式資訊清單成員的來源試用，允許控制多個子網域和頂層網域的網站顯示為單一網頁應用程式。本文件說明 Chrome 團隊推出這項功能的原因，以及建議使用這項功能的時機。

Demián Renzulli
Demián Renzulli
X GitHub 毛刺
Thomas Steiner

總覽

部分網頁應用程式有多個來源 (例如 example.com 做為主要應用程式)，然後 space_1.example.com、... 和 space_n.example.com (有時會與 special-example.com 合併) 做為子體驗，全都在主要應用程式的基礎下。這種網站架構會影響漸進式網頁應用程式的內容。這些限制包括無法跨來源共用 Service Worker、任何類型的裝置、本機儲存空間和權限。此外，獨立 PWA 中的跨來源導覽會顯示視窗 UI (「範圍外」列)，表示使用者已移出 PWA 體驗。您可以參閱多來源網站中的漸進式網頁應用程式和在同一網域建構多個漸進式網頁應用程式，瞭解如何解決這些問題。

Scope Extensions API 可讓網頁應用程式克服相同來源政策對這類網站架構所造成的影響。允許網頁應用程式將自身範圍擴充至其他來源，協助提供網頁應用程式主要來源和相關來源之間的協議，進而提供一致的體驗。

目標

Scope Extensions API 的主要目標，是讓控制多個子網域和頂層網域的網站，在網頁應用程式 UI 和連結擷取時，做為獨立的網頁應用程式運作。舉例來說，讓跨越 example.com.co.uk 和 support.example.com 的網站 example.com 盡可能當做單一網頁應用程式運作。

圖表顯示主要 PWA 和相關子體驗。

在網頁應用程式 UI 中，範圍擴充功能可讓多來源 PWA 如同連續網頁應用程式運作。

實務上，這會轉譯出兩個更為具體的目標：

  • 跨來源導覽：藉由叫用視窗 UI，通知使用者即將離開 PWA，允許使用者切換相關聯的來源，且不會影響使用者體驗。
  • 跨來源連結擷取：允許網頁應用程式擷取使用者前往相關網站的導覽畫面。

跨來源內瀏覽

根據預設，當使用者在獨立的 PWA 中瀏覽不同來源時，系統會顯示視窗 UI，表示他們即將離開 PWA 體驗。 在 Chrome 中，這個 UI 是由「範圍外」列組成，內含新來源的網址。這會對使用者體驗造成乾擾，因為使用者希望能在同一個應用程式環境中繼續瀏覽，但使用者可能會誤以為他們已離開應用程式環境。

獨立 PWA 頂端的範圍外列。

當使用者在獨立的 PWA 中瀏覽不同來源時，Chrome 會顯示「超出範圍」列。

使用範圍擴充功能時，當使用者前往任何相關聯的來源時，系統就不會顯示視窗 UI，因此 PWA 能以統一體驗的形式呈現。

連結擷取是指應用程式能否擷取範圍內的連結。這項實作方式會因瀏覽器和作業系統而異。舉例來說，在 ChromeOS 的 Chrome 版中，根據預設，已安裝 PWA 範圍內的連結會開啟瀏覽器分頁，並在網址列中顯示指示，指出該應用程式有能力處理這些連結，讓使用者選擇是否從該時間點自動擷取連結。

已安裝 PWA 的 Omnibar 提示。

ChromeOS 分頁的 Chrome 網址列片段，顯示可透過 PWA 處理連結的視覺指標，以及記住該項決定的選項。

如果使用者點選的連結不在 PWA 範圍內 (包括子網域或頂層網域的連結)，Google 就不會將他們視為屬於該網站的連結。舉例來說，系統會在瀏覽器分頁中開啟連結，而使用者不會知道是否有應用程式能處理連結。ScopeExtensions 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" }]
}

操作示範

示範包含兩個網站：

如要執行以下測試，您必須啟用 about://flags/#enable-desktop-pwas-scope-extensions 旗標 (適用於 Chrome v115 以上版本)。

測試跨來源導覽

做為這些測試的先決條件，請在瀏覽器中開啟主要 PWA，將其安裝為 PWA，並讓應用程式以獨立模式執行。PWA 包含延伸範圍中的來源和不在延伸範圍內的來源連結。

含有範圍內和延伸範圍連結的主要 PWA 視窗。

對延伸範圍與來源不在延伸範圍內的 PWA 示範 PWA。

預設跨來源導覽 (不在擴展範圍內)

  1. 在全螢幕 PWA 中，按一下不在擴展範圍中的來源連結。
  2. 因此，導覽將會發生，並顯示「範圍外」列。

點按「範圍外」連結後，主要 PWA 視窗超出範圍列。

針對獨立模式下的 PWA 跨來源導覽預設顯示的「範圍外」列，

使用範圍擴充功能的跨來源導覽 (在擴展範圍內)

  1. 返回 PWA 首頁。
  2. 請按一下「不在延伸範圍中的來源」連結。
  3. 根據預設，畫面上應會顯示「超出範圍」列，但由於範圍擴充功能的關聯，因此不會顯示。

點按「延伸範圍」連結後，沒有超出範圍列的主要 PWA 視窗。

使用範圍擴充功能建立來源關聯後，跨來源導覽不會顯示「超出範圍」列。

  1. 在 ChromeOS 裝置上開啟並安裝主要 PWA。
  2. 按一下以下連結：關聯來源。
  3. 這個連結會在新的瀏覽器分頁中開啟，並顯示提示，以在已安裝的 PWA 中開啟連結。

針對已安裝延伸範圍的 PWA 顯示 Omnibar 提示。

點選 PWA 相關來源的連結後，該連結隨即會在新分頁中開啟，並顯示「在應用程式中開啟」圖示，可讓使用者選擇啟用自動擷取連結的功能。

來源試用

如果您想透過實際使用者在應用程式中測試這個 API，您可以使用來源試用來進行測試。來源試用可讓您取得與您網域相關聯的測試權杖，藉此與使用者試用實驗功能。接著，您可以部署應用程式，並預期應用程式在支援測試功能的瀏覽器中運作 (在這種情況下，可在 Chrome 的 121 至 126 中使用)。如要取得自己的權杖來執行來源試用，請填寫申請表單。

意見回饋：

Chrome 團隊想針對這個 API 的實用度想提供意見。針對此 API 實用性的意見回饋和目前版本未涵蓋的新用途，如要協助團隊改進這個 API，請開啟 GitHub 上的問題。

其他資源

特別銘謝

特別感謝我們的團隊開發這個 API 的幕後功臣。範圍擴充功能是由 Alan Cutter 和 Lu Huang 所指定，並由 Matt Giuca 提供。這個 API 是由 Google Chrome 的 Alan Cutter 和 Microsoft Edge 的 Hassan Talat、Kristin Lee 和 Lu Huang 實作。