Tabbed application mode：tabbed display_override 取值

一句话： tabbed 是一个实验性的 display_override 取值，由 WICG Manifest Incubations 提案定义，Chrome for Developers 文档将其记录为已在 ChromeOS 上发布，它让已安装的 PWA 拥有自己的标签栏；配套的 tab_strip 清单成员则通过 home_tab 与 new_tab_button 来定制该标签栏。

如何启用

由于 tabbed 是一种新的显示模式，它不能仅通过 display 成员请求——根据 MDN 的说明， display_override 让开发者提供一条浏览器在回退到 display 之前会依次考虑的模式序列，这正是像 tabbed 这样的新模式能与不支持它的浏览器保持向后兼容的方式：

{
  "display": "standalone",
  "display_override": ["tabbed"]
}

如果浏览器不支持 tabbed，就会回退到声明的 display 取值（上例中为 standalone）。

tab_strip 成员

tab_strip 只在显示模式为 tabbed 时生效。根据 WICG 说明文档，若未指定 tab_strip，其默认值为：

{
  "tab_strip": {
    "new_tab_button": { "url": "<start_url>" }
  }
}

home_tab — 一个固定标签页，启用后会在应用打开期间始终存在；导航到其作用域内的 URL 会留在 home tab 中，导航到作用域外的 URL 则会在新的应用标签页中打开。它的 scope_patterns 子属性是一组针对清单 URL 解析的 URL 模式，定义了 home tab 的作用域；如果存在 home_tab 但没有 scope_patterns，home tab 依然存在，但作用域仅限于 start_url。
new_tab_button — 描述一个可打开新标签页的 UI 控件，其 url 成员（相对于清单 URL 的一个 URL，需在已处理清单的作用域内）指定打开位置。根据说明文档，只有当该 url 落在 home tab 作用域之外时，应用才拥有新标签按钮；若落在 home tab 作用域内，该按钮会被隐藏。

{
  "display": "standalone",
  "display_override": ["tabbed"],
  "tab_strip": {
    "home_tab": {
      "scope_patterns": [{ "pathname": "/dashboard/*" }]
    },
    "new_tab_button": { "url": "/new" }
  }
}

支持情况

根据 WICG 说明文档与 Chrome for Developers 页面，tabbed 是一种实验性显示模式，属于 WICG Manifest Incubations 提案的一部分。Chrome for Developers 页面将其明确记录为已在 ChromeOS 上发布。在生产环境依赖它之前，开发者应确认当前的浏览器与平台支持情况。

特性检测

应用启动后，可以用 window.matchMedia() 检查实际生效的显示模式：

if ('matchMedia' in window && window.matchMedia('(display-mode: tabbed)').matches) {
  // 正在 tabbed 模式下运行——可以安全渲染标签栏相关的 UI。
} else {
  // 回退到了非 tabbed 的显示模式（例如 standalone）——
  // 不要假设标签栏存在。
}

不识别 display_override 中 tabbed 的浏览器会静默跳过它，转而应用 display （上面清单示例中为 standalone）——上面的 matchMedia() 检查正是运行中的应用用来确认自己实际获得了哪种模式的方式。

实用清单

始终将 display_override: ["tabbed"] 与一个受支持的 display 回退值（例如 standalone）配对，因为不支持的浏览器会自动回退到它。
仅在使用 tabbed 显示模式时设置 tab_strip——在其他情况下它没有作用。
如果需要一个拥有自己可导航作用域的持久固定标签，配置 home_tab 及其 scope_patterns；否则（若存在）home tab 的作用域仅限于 start_url。
将 new_tab_button.url 设置为 home tab 作用域之外的路径，否则新建标签的入口会被隐藏。
把 tabbed 视为实验性特性：在将其用作渐进增强以外的用途之前，先确认当前的浏览器支持情况。