窗口控件叠加 API

实验性： 这是一个 实验性技术
在生产环境中使用此功能之前，请仔细查看 浏览器兼容性表。

窗口控件叠加 API 使安装在桌面操作系统上的渐进式 Web 应用程序能够隐藏默认的窗口标题栏，并在应用程序窗口的整个表面区域上显示其自身内容，从而将控制按钮（最大化、最小化和关闭）变成叠加层。

选择加入该功能

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

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

主要概念

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

Illustration of a PWA installed on desktop, with window control buttons, a title bar, and web content below that

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

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

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

使用窗口控件叠加功能，渐进式 Web 应用程序可以在整个应用程序窗口表面区域显示其 Web 内容。由于窗口控制按钮和用户代理特定 PWA 按钮必须保持可见，因此它们将变成叠加层，显示在 Web 内容之上。

Illustration of a PWA installed on desktop with the Window Controls Overlay feature, with window control buttons, no title bar, and web content spanning the whole window

通常包含应用程序名称的标题栏部分隐藏，它通常占据的区域通过窗口控件叠加 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 应用程序的标题栏区域大小或可见性发生变化时的相关信息。

对其他接口的扩展

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

规范

规范
窗口控件叠加

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参阅