在渐进式 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. 发布 | 尚未开始 |
使用标签页式应用模式
如需使用标签页式应用模式，开发者需要通过在 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 设计
是否存在标签页式应用模式的运行方式异常问题？针对我们创建的 Web 应用清单问题发表评论。
报告实施方面的问题
您是否发现了 Chrome 实现方面的错误？请在 new.crbug.com 提交 bug。请务必提供尽可能多的详情和简单的重现说明，并在组件框中输入 UI>Browser>WebAppInstalls。Glitch 非常适合用于分享简单快速的重现问题。
显示对该 API 的支持
您是否打算使用标签页式应用模式？您的公开支持有助于 Chrome 团队确定功能的优先级，并向其他浏览器供应商显示支持这些功能的重要性。
请使用 # 标签 #TabbedApplicationMode 向 @ChromiumDev 发送一条推文，并告诉我们您使用该产品的位置和方式。
实用链接
致谢
Matt Giuca 探索了标签页式应用模式。Chrome 中的实验性实现由 Alan Cutter 完成。本文由 Joe Medley 审核。主打图片，作者：Till Niermann，来源：Wikimedia Commons。
