在渐进式 Web 应用中使用标签页，一次处理多个文档
在计算领域，桌面比喻是 一种接口隐喻，是图形界面 (GUI) 使用的一组统一概念， 可帮助用户与计算机进行更轻松的互动。与桌面上的隐喻保持一致 是仿照书籍、纸质文件或卡片索引中插入的传统卡片标签建模的。标签式 文档界面 (TDI) 或标签页是一种图形控制元素，可允许 多个面板包含在单个窗口中，使用标签作为导航 widget 进行切换 文档集之间的重要性。
渐进式 Web 应用可在各种显示模式下运行，该模式由
display 属性。示例包括 fullscreen、standalone、minimal-ui、
和 browser。这些显示模式遵循
明确定义的后备链
("fullscreen" → "standalone" → "minimal-ui" → "browser")。如果浏览器不支持
指定的模式，便会回退到链中的下一个显示模式。通过
"display_override" 属性，开发者可以指定自己的后备链
如果需要的话。
什么是标签页式应用模式
到目前为止，该平台还缺少某种可让 PWA 开发者提供他们的 用户使用标签页式文档界面，例如，让用户能够在同一 PWA 中编辑不同的文件 窗口。标签页式应用模式填补了这一空白。
标签页式应用模式的建议用例
可以使用标签页式应用模式的网站示例包括：
- 可让用户同时编辑多个文档（或文件）的效率应用。
- 可让用户在每个标签页的不同聊天室中进行对话的通信应用。
- 朗读应用可在新的应用内标签页中打开文章链接。
与开发者构建的标签页的差异
将文档保存在单独的浏览器标签页中，可以免费使用资源隔离功能， 可能性高低。开发者构建的标签页无法扩展到数百个标签页 和浏览器标签页一样浏览器功能，例如导航历史记录、“复制此页面网址”“投放” 此标签页”或“在网络浏览器中打开此页面”将应用于开发者构建的标签页 而不是当前选定的文档页面。
与 "display": "browser" 的差异
当前的 "display": "browser" 已有
具体含义：
按照平台专用惯例打开 Web 应用，以在 用户代理（例如，在浏览器标签页或新窗口中）。
虽然浏览器可以随意在界面方面做任何事情，但这显然是一个相当大的 Subversion
如果 "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"指示浏览器不显示“首页”标签页。- 一个包含两个子属性的对象：
<ph type="x-smartling-placeholder">
- </ph>
- 将
"url"替换为允许的值"auto"，或将首页标签页锁定到的网址。 - 将
"icons"替换为允许的"auto"值或主图标数组中的图标数组"icons"属性。
- 将
新标签页按钮
新标签页按钮（如果存在）会在应用作用域内的网址上打开一个新标签页。 应用可选择为此按钮设置自定义网址和图标。浏览器可以决定如何处理 您可以随意拖动这些标签页以创建新窗口，或与浏览器标签页合并。
允许的 "new_tab_button" 值为：
"auto"：让浏览器确定要执行的操作。"absent"，用于告知浏览器不显示新标签页按钮。- 一个包含两个子属性的对象：
<ph type="x-smartling-placeholder">
- </ph>
- 将
"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"
}
]
}
}
}
检测标签页式应用模式
应用可以检测自己是否在标签页式应用模式下运行，方法是检查
display-mode CSS 媒体功能
（如 CSS 或 JavaScript）：
@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.请务必提供尽可能多的细节信息，内容要简单明了
并在组件框中输入 UI>Browser>WebAppInstalls。
Glitch 非常适合用于分享快速简便的重现案例。
表示对 API 的支持
您是否打算使用标签页式应用模式？您的公开支持对 Chrome 团队有所帮助 确定功能的优先级，并向其他浏览器供应商展示支持这些功能的重要性。
使用 # 标签向 @ChromiumDev 发送推文
#TabbedApplicationMode
并告诉我们您使用它的地点和方式。
实用链接
致谢
Matt Giuca 探索了标签页式应用模式。实验性 Alan Cutter 的工作成果才能在 Chrome 中顺利实现。本文 由 Joe Medley 审核。主打图片提供方 Till Niermann： 维基共享资源。
