本頁面由 Cloud Translation API 翻譯而成。

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

在 Chrome 122 中，你可以訂閱「scope_extensions」的來源試用應用程式資訊清單成員，可讓控管多個子網域和頂層網站的網站顯示層級網域為單一網頁應用程式。本文件將說明原因 Chrome 小組即將推出這項功能，以及您的預定使用時機

Demián Renzulli

Thomas Steiner

總覽

有些網頁應用程式 origins，針對例如，example.com 是主要應用程式，然後是 space_1.example.com...。 space_n.example.com，有時候會和 special-example.com 合併，如也能滿足所有使用者體驗。網站類型架構可能會影響 Progressive Web Apps 的架構。限制包括無法共用服務工作人員、任何類型的裝置本機儲存空間和權限此外，在獨立的 PWA 會顯示視窗 UI (「超出範圍」列)，指出使用者已移出 PWA 服務。本課程將說明如何處理文章多來源網站的漸進式網頁應用程式和在相同網域建構多個漸進式網頁應用程式。

Scope Extensions API 的 API 可讓網頁應用程式克服這個同源政策牽涉到這類網站架構可讓網頁應用程式範圍到其他來源達成整合的體驗，主要來源和相關來源。

目標

Scope Extensions API 的主要目標，是讓擁有掌控權的網站多個子網域和頂層網域行為，視為同一個連續網頁應用程式以及網頁應用程式 UI 和連結擷取作業例如，讓網站跨越 example.com.co.uk 和 support.example.com 的 example.com 的行為如下來擴充應用程式

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

範圍擴充功能可在發生以下情況時，讓多來源 PWA 成為連續網頁應用程式也可以在網頁應用程式 UI 上找到

實務上可轉換為兩個更具體的目標：

跨來源瀏覽：允許使用者跨相關來源導覽也不會幹擾使用者體驗，方法是叫用視窗 UI 通知使用者就會知道他們要停止使用 PWA。
跨來源連結擷取：允許網頁應用程式擷取使用者瀏覽內容聯盟網站。

跨來源瀏覽範圍導覽

根據預設，當使用者在獨立 PWA 中跨來源瀏覽時，，畫面中會顯示視窗 UI，說明使用者正要移至 PWA 服務以外的地方。在 Chrome 中，這個 UI 含有「超出範圍」，其中包含新的來源。這會幹擾使用者體驗，因為使用者會期望可繼續在同一個應用程式環境中瀏覽，但有時可能會覺得並將他們驅逐出去

獨立 PWA 頂端的範圍列外。

「超出範圍」當使用者跨多個來源瀏覽時，Chrome 會顯示長條。

使用範圍擴充功能後，當使用者瀏覽任何項目時，畫面上不會顯示視窗 UI 讓 PWA 呈現一致的體驗。

跨來源連結擷取

連結擷取是指應用程式能夠擷取範圍。實作的方式因瀏覽器和作業環境而異有些人會將 Cloud Storage 視為檔案系統但實際上不是以 ChromeOS 上的 Chrome 為例 PWA 預設會開啟瀏覽器分頁，網址列中會顯示下列指示：有一款應用程式可以處理這些連結，讓使用者選擇自那時選擇自動擷取連結。

已安裝 PWA 的網址列提示。

ChromeOS 中分頁的 Chrome 網址列片段，顯示視覺指示表示該連結可由 PWA 處理，而且您也可以選擇記住此決定。

如果使用者點選的連結不在 PWA 範圍 (包括子網域或頂層網域的連結)，則系統不會將其視為歸屬先前提過執行個體對於分配到的外部 IP 位址一無所知舉例來說，連結會在瀏覽器分頁中開啟，但不會出現任何指示告知使用者是否有可處理該連結的應用程式。目標範圍擴充功能 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，會在確切位置放送，例如是否為已知 URI。

/.well-known/web-app-origin-association (相關來源)

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

示範

此示範內容包含兩個網站：

主要 PWA：實際使用的 PWA 透過 scope_extensions 成員宣告關聯來源清單網頁應用程式資訊清單。
延伸範圍內的來源：但該來源並未列在主要 PWA 範圍之外，但列在其中主要 PWA 做為關聯來源，並確認與完成 web-app-origin-association 檔案。

如要執行下列測試，您需要啟用 about://flags/#enable-desktop-pwas-scope-extensions 標記 (可透過 Chrome v115 以上版本)。

測試跨來源導覽

做為測試的先決條件，請開啟並安裝為 PWA，然後安裝為 PWA 並開啟該指令碼以獨立模式執行PWA 包含隸屬於延伸範圍內的來源，以及來源不在延伸範圍內。

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

示範 PWA 的示範連結會導向延伸範圍以及來源未擴充的來源範圍。

預設跨來源瀏覽 (不在延伸範圍內)

按一下來源不在延伸範圍內的連結。
因此，系統會執行導覽，並顯示「範圍外」列。

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

「超出範圍」根據預設，PWA 的跨來源導覽功能會顯示長條獨立模式

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

返回 PWA 首頁。
點選連結來源不在擴充範圍內。
根據預設但受到範圍影響則與額外資訊關聯。

點選擴展範圍連結後，主要 PWA 視窗未超出範圍列。

「超出範圍」來源連結後，跨來源導覽列未顯示任何列已使用範圍擴充功能建立

測試跨來源連結擷取功能

在 ChromeOS 裝置。
按一下下列連結：關聯來源。
連結會在新的瀏覽器分頁中開啟，且顯示開啟該連結的提示。

針對擴大範圍的已安裝 PWA 顯示網址列提示。

只要點選 PWA 關聯來源的連結，系統就會在新分頁中開啟連結，會顯示「在應用程式中開啟」讓使用者選擇採用自動連結擷取。

來源試用

如果您想在應用程式中使用則可透過來源試用。在來源試用中，您可以試用實驗功能，與您的網域綁定的測試權杖。接著，您就能部署應用程式應該能在支援您正在測試功能的瀏覽器中運作 (在這個例子中則為 Chrome 121 至 126 版)。為了取得請填寫來源試用申請表單。

意見回饋

Chrome 團隊想詢問有關這個 API 實用性的意見回饋。目的地：協助團隊改善這個 API 的實用性以及目前版本未涵蓋的新用途，開啟 GitHub 中的問題。

其他資源

特別銘謝

特別感謝這個 API 開發團隊。範圍擴充功能是由 Alan Cutter 指定 Lu Huang， Matt Giuca：這個 API 是由 Google Chrome 和 Google Chrome 的 Alan Cutter Hassan Talat Kristin Lee 和 Microsoft Edge 的 Lu Huang。