在漸進式網頁應用程式中使用分頁，一次處理多份文件
在電腦領域中，電腦桌面比喻是一種介面比喻，也就是一組圖形使用者介面 (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. 啟動 | 已完成 (ChromeOS) |
使用分頁應用程式模式
如要使用分頁應用程式模式，開發人員必須在網頁應用程式資訊清單中設定特定 "display_override" 模式值，才能讓應用程式啟用這項功能。
{
"display": "standalone",
"display_override": ["tabbed"]
}
接著，您可以選擇使用 "tab_strip" 屬性微調分頁行為。且包含兩個允許的子資源："home_tab" 和 "new_tab_button"。如果沒有 "tab_strip" 屬性，系統會預設為下列物件：
"tab_strip": {
"new_tab_button": {
"url": <start_url>,
},
}
「首頁」分頁
首頁分頁是固定分頁，如果為應用程式啟用，則應在應用程式開啟時一律顯示。這個分頁不應導向任何位置。從這個分頁點選的連結應會在新應用程式分頁中開啟。應用程式可以選擇自訂這個分頁鎖定的網址，以及分頁上顯示的圖示。
"tab_strip" 物件的 "home_tab" 成員包含特殊「首頁」的相關資訊，可做為應用程式的頂層選單。其中包含下列成員：
"scope_patterns"："scope_patterns"成員是網址模式清單，用於定義主畫面分頁與資訊清單網址的範圍。
「New tab」按鈕
"tab_strip" 物件的 "new_tab_button" 成員會描述 UI 可用性 (例如按鈕) 的行為，當使用者點選/啟用時，會在應用程式視窗中開啟新的應用程式內容。其成員如下：
"url"："url"成員是字串，代表相對於已處理資訊清單範圍內的資訊清單網址的網址。
如果經過處理的資訊清單 new_tab_button 的 "url" 成員不在主畫面分頁範圍內，應用程式就會顯示新分頁按鈕。如果應用程式沒有新分頁按鈕，瀏覽器就不會向使用者提供「新分頁」可用性。
完整範例
以下是設定使用分頁式介面的應用程式行為的完整範例：
{
"name": "Tabbed App Example",
"start_url": "/",
"display": "standalone",
"display_override": ["tabbed"],
"tab_strip": {
"home_tab": {
"scope_patterns": [
{"pathname": "/"},
{"pathname": "/index.html"}
]
},
"new_tab_button": {
"url": "/create"
}
}
}
偵測分頁應用程式模式
應用程式可以檢查 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" 時，應用程式啟動時會在新分頁中開啟現有應用程式視窗。
示範
你可以在 ChromeOS 上試用分頁應用程式：
- 安裝應用程式 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。
