Window Controls Overlay API

启用该功能

在使用此功能之前，必须满足以下条件：

• Web 应用清单的 display_override 成员必须设置为 window-controls-overlay。
• 渐进式 Web 应用必须安装在桌面操作系统上。

主要概念

安装在桌面设备上的渐进式 Web 应用可以像原生应用一样，以独立的应用程序窗口显示。应用程序窗口的外观如下：

如上所示，应用程序窗口由两个主要区域组成：

• 顶部的标题栏区域。
• 底部的应用程序内容区域，显示 PWA 的 HTML 内容。

标题栏区域包含系统关键的最大化、最小化和关闭按钮（它们在不同操作系统上的位置可能不同），应用程序的名称（来自页面中的 <title> HTML 元素），以及可能的特定于用户代理的 PWA 按钮。

通过 Window Controls Overlay 功能，渐进式 Web 应用可以在整个应用程序窗口表面区域显示其 Web 内容。由于窗口控件按钮和特定于用户代理的 PWA 按钮必须保持可见，因此它们被变成显示在 Web 内容之上的覆盖层。

标题栏中通常包含应用程序名称的部分被隐藏，其正常占据的区域可以通过 Window Controls Overlay API 来使用。

PWA 可以使用该 API 在此区域定位内容，并避免内容被覆盖的控件按钮遮挡，这类似于 Web 作者如何考虑在某些移动设备上刘海屏的存在。

CSS 环境变量

渐进式 Web 应用可以通过使用 titlebar-area-x、titlebar-area-y、titlebar-area-width 和 titlebar-area-height CSS 环境变量，将其 Web 内容定位在标题栏通常占据的区域。请参阅 使用 env() 确保桌面 PWA 中的内容不被窗口控件按钮遮挡。

接口

WindowControlsOverlay 实验性

提供有关标题栏可见性和几何形状的信息，以及一个用于获知其何时更改的事件。

WindowControlsOverlayGeometryChangeEvent 实验性

表示当桌面渐进式 Web 应用的标题栏区域的大小或可见性发生变化时，提供相关信息的事件。

其他接口的扩展

Navigator.windowControlsOverlay

返回 WindowControlsOverlay 接口，该接口公开有关桌面渐进式 Web 应用标题栏几何形状的信息。

规范

浏览器兼容性

另见

• 自定义 PWA 标题栏的窗口控件覆盖
• 突破界限
• 在标题栏中显示内容