一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。
这一节看的是 WindowControlsOverlay，这个 API 可以算是非常不常用的了，因为这个 API 是 PWA 专用的，在国内 PWA 的应用场景就很有限，不过可以作为没用的知识了解一下。
首先先给不熟悉 PWA 的读者简单介绍一下 PWA，PWA 又叫渐进式 Web 应用，是一种特殊的网页，在浏览器中打开时它和普通的网页没什么区别，但是可以渐进式的为其添加图标，离线访问，消息通知等，让它越来越接近一个应用，甚至在浏览器中支持安装这个应用，之后可以在浏览器外面独立打开它，像普通的应用程序一样。由于是渐进式增强，因此 PWA 涉及到的技术很多，通常添加 ServiceWorker 让网页可以本地打开就可以算作是 PWA 了。和普通的网页相比，一方面 PWA 可以更像真实的 APP，丰富的离线能力可以带来更好的用户体验。另一方面，PWA 是 Chromebook 上的原生应用。由于国内没有 Chromebook，移动端也以各种小程序为主，因此开发 PWA 的人比较少。
介绍了一些背景，下面来看下 WindowControlsOverlay，它描述的就是 PWA 在本地打开时的情况，由于本地打开时会为 PWA 添加类似 native 应用的顶部状态栏，此时会有一个大小的变化，这个 API 就是来处理这部分内容的。
windowControlsOverlay 对象可以从 navigator 上获取，我们可以使用上面的 visible 属性来判断是否显示。此外我们可以使用 getTitlebarAreaRect 来获取标题区域的大小，它会返回一个区域块对象。另外需要关注的就是 geometrychange 事件，在标题栏发生变化时会触发这个事件，我们可以监听这个事件来进行一些逻辑处理，示例代码：
navigator.windowControlsOverlay.addEventListener('geometrychange', event => {
if (event.visible) {
var rect = event.titlebarAreaRect;
}
});
PWA 的专有 API 还有很多，在这个系列后面可能还会遇到。
