在渐进式 Web 应用中使用标签页同时处理多个文档
在计算机领域，桌面隐喻是一种界面隐喻，即图形界面 (GUI) 使用的一组统一概念，旨在帮助用户更直观地与计算机互动。为了保持桌面设备的隐喻，GUI 标签页模仿了插入书籍、纸质文件或卡片索引中的传统卡片标签页。标签页式文档界面 (TDI) 或标签页是一种图形控件元素，可让多个文档或面板包含在单个窗口中，并使用标签页作为导航 widget 在文档集之间切换。
渐进式 Web 应用可在各种显示模式下运行，具体取决于 Web 应用清单中的 display 属性。选项包括 fullscreen、standalone、minimal-ui 和 browser。这些显示模式遵循明确定义的后备链 ("fullscreen" → "standalone" → "minimal-ui" → "browser")。如果浏览器不支持给定模式，则会回退到链中的下一个显示模式。开发者可以使用 "display_override" 属性指定自己的回退链（如果需要）。
什么是标签页式应用模式
该平台目前缺少一种方式，让 PWA 开发者能够为用户提供标签页式文档界面，以便实现诸多功能，例如，在同一 PWA 窗口中编辑不同文件。标签页式应用模式可弥补这一差距。
标签页式应用模式的用例
可能使用标签页式应用模式的网站示例包括：
- 让用户同时编辑多个文档（或文件）的效率应用。
- 允许用户在每个标签页中与不同聊天室中的用户进行对话的通信应用。
- 在新的应用内标签页中打开文章链接的阅读应用。
与开发者构建的标签页的差异
将文档放在单独的浏览器标签页中可以实现资源隔离，而目前无法使用 Web 实现这一点。开发者构建的标签页无法像浏览器标签页那样可接受地扩展到数百个标签页。浏览器功能（例如导航历史记录、“复制此网页网址”“投放此标签页”或“在网络浏览器中打开此网页”）会应用于开发者构建的标签页界面页面，但不会应用于所选文档页面。
与 "display": "browser" 的差异
当前的 "display": "browser" 已经具有特定含义：
使用在用户代理中打开超链接的平台专用惯例（例如，在浏览器标签页或新窗口中）打开 Web 应用。
虽然浏览器可以随心所欲地处理界面，但如果 "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"成员是一个 网址 格式列表，用于定义首页标签页相对于清单网址的范围。
“新建标签页”按钮
"tab_strip" 对象的 "new_tab_button" 成员描述了界面功能（例如按钮）的行为，当用户点击/激活该功能时，系统会在应用窗口中打开新的应用上下文。它包含以下成员：
"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 设计
标签页式应用模式是否有某些方面未按预期运行？对我们创建的Web 应用清单问题进行评论。
报告实现方面的问题
您是否发现了 Chrome 实现中的 bug？请访问 new.crbug.com 提交 bug。请务必提供尽可能详细的信息、重现说明，并在 Components 框中输入 UI>Browser>WebAppInstalls。故障非常适合分享快速重现问题的情况。
显示对该 API 的支持
您是否打算使用标签页式应用模式？您的公开支持有助于 Chrome 团队确定功能的优先级，并向其他浏览器供应商表明支持这些功能的重要性。
使用 ##TabbedApplicationMode 标签向 @ChromiumDev 发送推文，告诉我们您在哪里使用该工具以及使用方式。
实用链接
致谢
Matt Giuca 探索了标签页式应用模式。Chrome 中的实验性实现由 Alan Cutter 完成。本文档由 Joe Medley 审核。主打图片由 Till Niermann 提供，来自 Wikimedia Commons。
