在渐进式 Web 应用中使用标签页同时处理多个文档
在计算机领域，桌面隐喻是一种界面隐喻，即图形界面 (GUI) 使用的一组统一概念，可帮助用户更轻松地与计算机互动。与桌面上的隐喻一样，GUI 标签页是根据插入到图书、纸质文件或卡片索引中的传统卡片标签页建模的。标签页式文档界面 (TDI) 或标签页是一种图形控件元素，可让多个文档或面板包含在单个窗口中，并使用标签页作为导航 widget 在文档集之间切换。
渐进式 Web 应用可在各种显示模式下运行，具体取决于网络应用清单中的 display 属性。示例包括 fullscreen、standalone、minimal-ui 和 browser。这些显示模式遵循明确定义的回退链 ("fullscreen" → "standalone" → "minimal-ui" → "browser")。如果浏览器不支持指定的模式，则会回退到链中的下一个显示模式。通过 "display_override" 属性，开发者可以根据需要指定自己的回退链。
什么是标签页式应用模式
到目前为止，该平台还缺少一种可让 PWA 开发者为其用户提供标签页式文档界面的方式，例如，用户能够在同一 PWA 窗口中编辑不同的文件。标签页式应用模式弥补了这一空白。
建议的标签页式应用模式用例
可能使用标签页式应用模式的网站示例包括：
- 让用户同时编辑多个文档（或文件）的效率应用。
- 允许用户在每个标签页中与不同聊天室中的用户进行对话的通信应用。
- 朗读应用可在新的应用内标签页中打开文章链接。
与开发者构建的标签页的差异
将文档保存在单独的浏览器标签页中可免费实现资源隔离，目前使用网络是无法实现的。开发者构建的标签页无法像浏览器标签页那样扩展到数百个标签页。浏览器功能（如导航历史记录、“复制此页面网址”“投射此标签页”或“在网络浏览器中打开此页面”）将应用于开发者构建的标签页式界面页面，而不是当前选定的文档页面。
与 "display": "browser" 的差异
当前的 "display": "browser" 已经具有特定含义：
使用在用户代理中打开超链接的平台专用惯例（例如，在浏览器标签页或新窗口中）打开 Web 应用。
虽然浏览器可以随意在界面方面做任何事情，但如果 "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_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。Glitch 非常适合用于分享快速简便的重现案例。
表示对 API 的支持
您是否打算使用标签页式应用模式？您的公开支持有助于 Chrome 团队确定功能的优先级，并向其他浏览器供应商表明支持这些功能的重要性。
使用 #TabbedApplicationMode 标签向 @ChromiumDev 发送推文，告诉我们您在哪里以及如何使用该工具。
实用链接
致谢
Matt Giuca 探索了标签页式应用模式。Chrome 中的实验性实现由 Alan Cutter 完成。本文由 Joe Medley 审核。主打图片由 Till Niermann 提供，来自 Wikimedia Commons。
