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 aufwindow-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:
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.
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
WindowControlsOverlay | ||||||||||||
geometrychange event | ||||||||||||
getTitlebarAreaRect | ||||||||||||
visible |
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.