在 Chrome 122 中,你可以訂閱「scope_extensions
」的來源試用
應用程式資訊清單成員,可讓控管多個子網域和頂層網站的網站
顯示層級網域為單一網頁應用程式。本文件將說明原因
Chrome 小組即將推出這項功能,以及您的預定使用時機
總覽
有些網頁應用程式
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 成為連續網頁應用程式 也可以在網頁應用程式 UI 上找到
實務上可轉換為兩個更具體的目標:
- 跨來源瀏覽:允許使用者跨相關來源導覽 也不會幹擾使用者體驗,方法是叫用視窗 UI 通知 使用者就會知道他們要停止使用 PWA。
- 跨來源連結擷取:允許網頁應用程式擷取使用者瀏覽內容 聯盟網站。
跨來源瀏覽範圍導覽
根據預設,當使用者在獨立 PWA 中跨來源瀏覽時, ,畫面中會顯示視窗 UI,說明使用者正要移至 PWA 服務以外的地方。 在 Chrome 中,這個 UI 含有「超出範圍」,其中包含 新的來源。這會幹擾使用者體驗,因為使用者會期望 可繼續在同一個應用程式環境中瀏覽,但有時可能會覺得 並將他們驅逐出去
「超出範圍」當使用者跨多個來源瀏覽時,Chrome 會顯示長條 。
使用範圍擴充功能後,當使用者瀏覽任何項目時,畫面上不會顯示視窗 UI 讓 PWA 呈現一致的體驗。
跨來源連結擷取
連結擷取是指應用程式能夠擷取 範圍。實作的方式因瀏覽器和作業環境而異 有些人會將 Cloud Storage 視為檔案系統 但實際上不是以 ChromeOS 上的 Chrome 為例 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 首頁。
- 點選連結 來源不在擴充範圍內。
- 根據預設但受到範圍影響 則與額外資訊關聯。
「超出範圍」來源連結後,跨來源導覽列未顯示任何列 已使用範圍擴充功能建立
測試跨來源連結擷取功能
- 在 ChromeOS 裝置。
- 按一下下列連結: 關聯來源。
- 連結會在新的瀏覽器分頁中開啟,且顯示開啟該連結的提示 。
只要點選 PWA 關聯來源的連結,系統就會在新分頁中開啟連結, 會顯示「在應用程式中開啟」讓使用者選擇採用自動連結 擷取。
來源試用
如果您想在應用程式中使用 則可透過 來源試用。 在來源試用中,您可以試用實驗功能, 與您的網域綁定的測試權杖。接著,您就能部署應用程式 應該能在支援您正在測試功能的瀏覽器中運作 (在這個例子中 則為 Chrome 121 至 126 版)。為了取得 請填寫來源試用 申請表單。
意見回饋
Chrome 團隊想詢問有關這個 API 實用性的意見回饋。目的地: 協助團隊改善這個 API 的實用性 以及目前版本未涵蓋的新用途,開啟 GitHub 中的問題。
其他資源
- Scope Extensions API - 來源試用
- Chrome 狀態 - 網頁應用程式範圍擴充功能
- 網頁應用程式的範圍擴充功能說明
- 意圖進行實驗
- Mozilla 標準定位
- Apple 標準定位
- Chromium 錯誤
- 多來源網站的漸進式網頁應用程式
- 在同一網域建構多個漸進式網頁應用程式
特別銘謝
特別感謝這個 API 開發團隊。範圍擴充功能 是由 Alan Cutter 指定 Lu Huang, Matt Giuca:這個 API 是由 Google Chrome 和 Google Chrome 的 Alan Cutter Hassan Talat Kristin Lee 和 Microsoft Edge 的 Lu Huang。