为未来的显示模式做好准备

PWA 可以使用“display_override”属性处理特殊显示模式。

Web 应用清单是一个 JSON 文件,用于向浏览器说明您的 Progressive Web 应用,以及应用在用户的桌面设备或移动设备上安装后的行为方式。 通过 display 属性,您可以自定义应用启动时要显示的浏览器界面。例如,您可以隐藏 地址栏和 Chrome 浏览器。甚至还可以让游戏全屏启动。 简要回顾一下,下面是在撰写本文时指定的显示模式。

属性 使用
fullscreen 打开没有任何浏览器界面的 Web 应用,并 占据整个可用的显示区域
standalone 打开 Web 应用,让它具有独立式的外观和风格 应用。应用会在自己的窗口中运行,该窗口独立于浏览器,并且 会隐藏标准浏览器界面元素,如网址栏。
minimal-ui 此模式与 standalone 类似, 控制导航的最小界面元素集(例如 返回并重新加载)。
browser 标准浏览器体验。

这些显示模式遵循明确定义的回退链 ("fullscreen""standalone""minimal-ui""browser")。如果浏览器不支持指定的 模式时,便会回退到链中的下一个显示模式。

display 属性的缺点

这种有线回退链方法存在三个问题:

  • 如果某个浏览器不支持 "minimal-ui",开发者必须重新进入 "browser" 显示模式才能请求 "minimal-ui"
  • 开发者无法处理跨浏览器差异,例如,对于 "standalone" 模式,浏览器是否在窗口中包含返回按钮
  • 当前行为导致无法引入新显示屏 因为标签页式应用模式等探索不具有 后备广告链中的自然位置。

display_override 属性

这些问题可以通过 display_override 属性解决,浏览器会在之前考虑该属性 display 属性。其值是被视为按顺序排列的字符串的序列,并且 系统会应用第一个受支持的显示模式如果所有值都不受支持,则浏览器会回退到评估 display 字段中的值。

在以下示例中,显示模式后备链将如下所示。 ("window-controls-overlay" 的详细信息不在本文讨论范围之内。)

  1. "window-controls-overlay"(首先查看 display_override。)
  2. "minimal-ui"
  3. "standalone"(当 display_override 耗尽时,请评估 display。)
  4. "minimal-ui"(最后,使用 display 回退链。)
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

为了保持向后兼容,任何未来显示模式都只能作为 display_override,但不是 display。 不支持 display_override 的浏览器会回退到 display 属性并忽略 display_override 作为未知的 Web 应用清单属性。

致谢

display_override 属性由以下人员正式定义: Daniel Murphy