在渐进式 Web 应用中使用标签页同时处理多个文档
在计算领域，桌面隐喻是一种界面隐喻，即图形界面 (GUI) 使用的一组统一概念，可帮助用户更轻松地与计算机互动。为了保持桌面设备的隐喻，GUI 标签页模仿了插入书籍、纸质文件或卡片索引中的传统卡片标签页。标签页式文档界面 (TDI) 或标签页是一种图形控件元素，可让多个文档或面板包含在单个窗口中，并使用标签页作为导航 widget 在文档集之间切换。
渐进式 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. 发布 | 尚未开始 |
使用标签页式应用模式
如需使用标签页式应用模式，开发者需要在网站应用清单中设置特定的 "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 实现中的 bug？请访问 new.crbug.com 提交 bug。请务必提供尽可能详细的信息，以及简单的重现说明，并在 Components 框中输入 UI>Browser>WebAppInstalls。故障非常适合分享快速轻松的再现案例。
显示对该 API 的支持
您是否打算使用标签页式应用模式？您的公开支持有助于 Chrome 团队确定功能的优先级，并向其他浏览器供应商表明支持这些功能的重要性。
使用 #TabbedApplicationMode 标签向 @ChromiumDev 发送推文，告诉我们您在哪里以及如何使用该工具。
实用链接
致谢
Matt Giuca 探索了标签页式应用模式。Chrome 中的实验性实现由 Alan Cutter 完成。本文由 Joe Medley 审核。主打图片由 Till Niermann 提供，来自 Wikimedia Commons。
