透過漸進式網頁應用程式中的分頁，一次處理多份文件
在運算的領域，「桌面隱喻」是一種介面隱喻，是圖形使用者介面 (GUI) 使用的一組統一概念，可協助使用者更輕鬆地與電腦互動。為了和桌面的風格一致，GUI 分頁會以插入書籍、紙本檔案或卡片索引中的傳統卡片分頁的方式模擬。分頁式文件介面 (TDI) 或分頁是一種圖形控制元素，可在單一視窗中顯示多個文件或面板，並將分頁當做導覽小工具，用來在多組文件之間切換。
Progressive Web Apps 能以各種顯示模式執行，視網頁應用程式資訊清單中的 display 屬性而定。例如 fullscreen、standalone、minimal-ui 和 browser。這些顯示模式會遵循明確定義的備用鏈 ("fullscreen" → "standalone" → "minimal-ui" → "browser")。如果瀏覽器不支援特定模式，就會切換回鏈結中的下一個顯示模式。開發人員可以透過 "display_override" 屬性，視需要指定自己的備用鏈。
什麼是分頁式應用程式模式
目前平台中缺少的功能是讓 PWA 開發人員為使用者提供分頁式文件介面的方法，例如能夠在相同 PWA 視窗中編輯不同檔案。分頁式應用程式模式會消除這個差距。
分頁式應用程式模式的建議用途
以下列舉一些可能使用分頁式應用程式模式的網站：
- 可讓使用者同時編輯多個文件 (或檔案) 的效率提升應用程式。
- 讓使用者在每個分頁在不同討論室中進行對話的通訊應用程式。
- 閱讀會在新的應用程式內分頁中開啟文章連結的應用程式。
與開發人員建構分頁的差異
將文件放在個別瀏覽器分頁中可以免費使用資源隔離，這是目前的網路功能不可能的。開發人員建構的分頁無法像瀏覽器分頁一樣能縮放到數百個分頁。瀏覽歷史記錄、「複製這個頁面網址」、「投放這個分頁」或「在網路瀏覽器中開啟此頁面」等瀏覽器用途只能套用到開發人員建構的分頁式介面，但並非目前所選的文件頁面。
與 "display": "browser" 的差異
目前的 "display": "browser" 已有特定意義：
按照平台專屬的慣例，在使用者代理程式中開啟超連結 (例如在瀏覽器分頁或新視窗中)，開啟網頁應用程式。
雖然瀏覽器可以對 UI 執行任何動作，但如果 "display": "browser" 突然刻意「在沒有瀏覽器預設用途的獨立視窗中執行，但採用分頁式文件介面」，這顯然是開發人員對 UI 的期望不大。
設定 "display": "browser" 可有效選擇不進入應用程式視窗。
目前狀態
| 步驟 | 狀態 |
|---|---|
| 1. 建立說明 | 已完成 |
| 2. 建立規格的初始草稿 | Not started |
| 3. 收集意見回饋並改進設計 | 進行中 |
| 4. 來源試用 | 進行中 |
| 5. 推出 | Not started |
使用分頁式應用程式模式
如要使用分頁式應用程式模式，開發人員必須在網頁應用程式資訊清單中設定特定的 "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_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 回報錯誤。請務必盡可能提供最多的詳細資料、簡單的重現操作說明，並在「元件」方塊中輸入 UI>Browser>WebAppInstalls。Glitch 適合用來分享快速輕鬆地重現案件的情況。
展現對 API 的支援
您打算使用分頁式應用程式模式嗎？您的公開支援可協助 Chrome 團隊決定功能的優先順序，讓其他瀏覽器廠商瞭解這項功能有多重要。
請使用主題標記 #TabbedApplicationMode 將 Tweet 訊息傳送至 @ChromiumDev，告訴我們您的使用地點和方式。
實用連結
特別銘謝
Matt Giuca 探索分頁式應用程式模式。Chrome 中的實驗性實作是以 Alan Cutter 為基礎。本文是由 Joe Medley 審查。主頁橫幅由 Till Niermann 於 Wikimedia Commons 發布。
