Window Controls Overlay API

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die Window Controls Overlay API ermöglicht es Progressive Web Apps, die auf Desktop-Betriebssystemen installiert sind, die standardmäßige Fenstertitelleiste auszublenden und eigenen Inhalt über die gesamte Oberfläche des App-Fensters anzuzeigen, wodurch die Steuerelemente (Maximieren, Minimieren und Schließen) zu einem Overlay werden.

Opt-in für das Feature

Bevor Sie dieses Feature verwenden, müssen die folgenden Bedingungen erfüllt sein:

  • Das display_override-Mitglied des Web App Manifests muss auf window-controls-overlay gesetzt sein.
  • Die Progressive Web App muss auf einem Desktop-Betriebssystem installiert sein.

Hauptkonzepte

Progressive Web Apps, die auf Desktop-Geräten installiert sind, können in eigenständigen App-Fenstern angezeigt werden, genau wie native Apps. So sieht ein Anwendungsfenster aus:

Illustration einer PWA, die auf einem Desktop installiert ist, mit Fenstersteuerungsschaltflächen, einer Titelleiste und darunter liegendem Webinhalt

Wie oben zu sehen ist, besteht das App-Fenster aus zwei Hauptbereichen:

  • Dem Titelleistenbereich oben.
  • Dem Anwendungsinhaltsbereich unten, der den HTML-Inhalt der PWA anzeigt.

Der Titelleistenbereich enthält die systemkritischen Schaltflächen zum Maximieren, Minimieren und Schließen (deren Position kann je nach Betriebssystem variieren), den Namen der Anwendung (der aus dem <title>-HTML-Element auf der Seite stammt) und möglicherweise benutzeragentenspezifische PWA-Schaltflächen.

Mit dem Window Controls Overlay-Feature können Progressive Web Apps ihren Webinhalt über die gesamte Oberfläche des App-Fensters anzeigen. Da die Fenstersteuerungsschaltflächen und benutzeragentenspezifischen PWA-Schaltflächen sichtbar bleiben müssen, werden sie in ein Overlay umgewandelt, das über dem Webinhalt angezeigt wird.

Illustration einer PWA, die auf einem Desktop mit dem Window Controls Overlay-Feature installiert ist, mit Fenstersteuerungsschaltflächen, keiner Titelleiste und Webinhalt, der das gesamte Fenster einnimmt

Der Teil der Titelleiste, der normalerweise den Anwendungsnamen enthält, wird ausgeblendet, und der Bereich, den er normalerweise einnimmt, wird über die Window Controls Overlay API verfügbar.

PWAs können die API verwenden, um Inhalte in diesem Bereich zu positionieren und zu vermeiden, dass Inhalte hinter dem Steuerelement-Overlay verborgen werden. Dies ist ähnlich wie bei Webautoren, die das Vorhandensein von Notches auf bestimmten Mobilgeräten berücksichtigen können.

CSS-Umgebungsvariablen

Progressive Web Apps können ihren Webinhalt in dem Bereich positionieren, den die Titelleiste normalerweise einnimmt, indem sie die CSS-Umgebungsvariablen titlebar-area-x, titlebar-area-y, titlebar-area-width und titlebar-area-height verwenden. Siehe Using env() to ensure content is not obscured by window control buttons in desktop PWAs.

Schnittstellen

WindowControlsOverlay Experimentell

Bietet Informationen über die Sichtbarkeit und Geometrie der Titelleiste und ein Ereignis, um zu wissen, wann sie sich ändert.

WindowControlsOverlayGeometryChangeEvent Experimentell

Stellt Ereignisse bereit, die Informationen über die Region der Titelleiste der Desktop-Progressive-Web-App liefern, wenn sich ihre Größe oder Sichtbarkeit ändert.

Erweiterungen zu anderen Schnittstellen

Gibt die WindowControlsOverlay-Schnittstelle zurück, die Informationen über die Geometrie der Titelleiste in Desktop-Progressive-Web-Apps bereitstellt.

Spezifikationen

Specification
Window Controls Overlay

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
WindowControlsOverlay
Experimental
geometrychange event
Experimental
getTitlebarAreaRect
Experimental
visible
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

Siehe auch