在漸進式網頁應用程式中使用分頁，一次處理多份文件
在電腦領域中，電腦桌面比喻是一種介面比喻，也就是一組圖形使用者介面 (GUI) 使用的統一概念，可協助使用者更輕鬆地與電腦互動。為了配合電腦桌面比喻，GUI 分頁是以書籍、紙本檔案或卡片索引中插入的傳統卡片分頁為範本。分頁文件介面 (TDI) 或分頁是一種圖形控制項元件，可讓單一視窗容納多個文件或面板，並使用分頁做為導覽小工具，在多個文件之間切換。
漸進式網頁應用程式可在各種顯示模式下執行，這取決於網路應用程式資訊清單中的 display 屬性。例如 fullscreen、standalone、minimal-ui 和 browser。這些顯示模式會遵循明確定義的備用鏈 ("fullscreen" → "standalone" → "minimal-ui" → "browser")。如果瀏覽器不支援特定模式，就會改用鏈結中的下一個顯示模式。開發人員可以透過 "display_override" 屬性，在需要時指定自己的備用鏈結。
什麼是分頁應用程式模式
平台目前缺少的功能，是讓 PWA 開發人員為使用者提供分頁文件介面，例如在同一個 PWA 視窗中編輯不同檔案。分頁式應用程式模式可解決這個問題。
分頁應用程式模式的建議用途
以下列舉幾個可能會使用分頁應用程式模式的網站：
- 讓使用者同時編輯多個文件 (或檔案) 的工作效率應用程式。
- 允許使用者在每個分頁中與不同房間中的使用者進行對話的通訊應用程式。
- 閱讀應用程式會在新的分頁中開啟文章連結。
與開發人員建構的分頁差異
在不同的瀏覽器分頁中放置文件時，可免費享有資源隔離功能，這是目前使用網路無法做到的。開發人員建立的分頁無法像瀏覽器分頁一樣，擴展到數百個分頁。瀏覽器可用功能 (例如導覽記錄、「複製此網頁網址」、「投放此分頁」或「在網路瀏覽器中開啟此網頁」) 會套用至開發人員建立的分頁介面頁面，但不會套用至目前選取的文件頁面。
與 "display": "browser" 的差異
目前的 "display": "browser" 已具有特定意義：
使用平台專屬慣例開啟網頁應用程式，以便在使用者代理程式中開啟超連結 (例如在瀏覽器分頁或新視窗中)。
雖然瀏覽器可以自由處理使用者介面，但如果 "display": "browser" 突然代表「在沒有瀏覽器操作介面，而是以分頁文件介面執行的個別應用程式專屬視窗中執行」，顯然會嚴重違背開發人員的期望。
設定 "display": "browser" 是選擇不加入應用程式視窗的有效方式。
目前狀態
| 步驟 | 狀態 |
|---|---|
| 1. 建立說明 | 已完成 |
| 2. 建立規格初稿 | 尚未開始 |
| 3. 收集意見回饋並重複設計 | 進行中 |
| 4. 來源試用 | 進行中 |
| 5. 啟動 | 尚未開始 |
使用分頁應用程式模式
如要使用分頁應用程式模式，開發人員必須在 Web 應用程式資訊清單中設定特定 "display_override" 模式值，才能讓應用程式啟用這項功能。
{
"display": "standalone",
"display_override": ["tabbed"]
}
接著，您可以選擇使用 "tab_strip" 屬性來微調分頁行為。且包含兩個允許的子資源："home_tab" 和 "new_tab_button"。如果沒有 "tab_strip" 屬性，系統會使用特定屬性的 "auto" 值。瀏覽器會決定要為 "auto" 使用哪些值。
「首頁」分頁
首頁分頁是固定分頁，如果為應用程式啟用，則應在應用程式開啟時一律顯示。這個分頁不應導向任何位置。從這個分頁點選的連結應會在新應用程式分頁中開啟。應用程式可以選擇自訂這個分頁鎖定的網址，以及分頁上顯示的圖示。
"home_tab" 的有效值如下：
"auto"，讓瀏覽器決定要採取哪些動作。"absent"來告知瀏覽器不要顯示首頁分頁。- 含有兩個子屬性的物件：
"url"，允許的值為"auto"或要鎖定至首頁的網址。"icons"，允許的值為"auto"，或主"icons"屬性中的圖示陣列。
「New tab」按鈕
如果有新分頁按鈕，應在應用程式範圍內的網址開啟新分頁。應用程式可以選擇為這個按鈕設定自訂網址和圖示。瀏覽器可以決定如何處理拖曳這些分頁的動作，以建立新視窗或與瀏覽器分頁合併。
"new_tab_button" 的有效值如下：
"auto"，讓瀏覽器決定要採取哪些動作。"absent"，告知瀏覽器不要顯示新分頁按鈕。- 含有兩個子屬性的物件：
"url"的值為"auto"或範圍內網址，可用於開啟新分頁。"icons"的允許值為"auto"，或主"icons"屬性中的圖示陣列。
完整範例
以下是設定使用分頁式介面的應用程式行為的完整範例：
{
"display_override": ["tabbed"],
"tab_strip": {
"home_tab": {
"url": "./home/",
"icons": [
{
"src": "./home.svg",
"sizes": "any",
"type": "image/svg+xml"
}
]
},
"new_tab_button": {
"url": "./new-tab/",
"icons": [
{
"src": "./new-tab.svg",
"sizes": "any",
"type": "image/svg+xml"
}
]
}
}
}
偵測分頁應用程式模式
應用程式可以檢查 CSS 或 JavaScript 中的 display-mode CSS 媒體功能，藉此偵測是否在分頁應用程式模式中執行：
@media (display-mode: tabbed) {
/* Styles to apply in tabbed application mode. */
}
const tabbedApplicationModeEnabled = window.matchMedia('(display-mode: tabbed)').matches;
與 Launch Handler API 互動
Launch Handler API 可讓網站將應用程式啟動作業重新導向至現有的應用程式視窗，以免開啟重複的視窗。當分頁式應用程式設定 "client_mode": "navigate-new" 時，應用程式啟動時會在新分頁中開啟現有應用程式視窗。
示範
您可以設定瀏覽器旗標，嘗試使用分頁應用程式模式：
- 設定
#enable-desktop-pwas-tab-strip標記。 - 安裝應用程式 tabbed-application-mode.glitch.me (原始碼)。
- 按一下不同分頁上的不同連結。
意見回饋
Chrome 團隊希望瞭解你使用分頁應用程式模式的體驗。
請告訴我們 API 設計
分頁應用程式模式是否有任何功能無法正常運作？針對我們建立的網頁應用程式資訊清單問題提供意見。
回報實作問題
你是否發現 Chrome 實作項目有錯誤？請前往 new.crbug.com 回報錯誤。請務必盡可能提供詳細資料，並附上簡單的重現操作說明，以及在「Components」方塊中輸入 UI>Browser>WebAppInstalls。Glitch 可讓您輕鬆分享重現問題的案例。
顯示對 API 的支援
您是否打算使用分頁應用程式模式？你的公開支持有助於 Chrome 團隊決定功能優先順序，並向其他瀏覽器供應商顯示支援這些功能的重要性。
使用主題標記 #TabbedApplicationMode 發送推文給 @ChromiumDev，告訴我們你在何處使用這項功能，以及使用方式。
實用連結
特別銘謝
Matt Giuca 曾探討分頁應用程式模式。Chrome 中的實驗導入功能是由 Alan Cutter 開發。本文由 Joe Medley 審查。主頁橫幅圖片由 Till Niermann 提供，取自 Wikimedia Commons。
