Window Controls Overlay API

Vor der Verwendung dieses Features müssen die folgenden Bedingungen erfüllt sein:

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

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

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

• Der Titelleistenbereich oben.
• Der 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 der Seite stammt) und möglicherweise benutzerspezifische PWA-Schaltflächen.

Mit der Window Controls Overlay-Funktion können Progressive Web Apps ihren Webinhalt über die gesamte Oberfläche des App-Fensters anzeigen. Da die Fenstersteuerungsschaltflächen und benutzerspezifische 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 nutzen, um Inhalte in diesem Bereich zu positionieren und zu vermeiden, dass Inhalte hinter dem Steuerungstasten-Overlay verborgen werden, ähnlich wie Webautoren die Präsenz von Notches auf bestimmten Mobilgeräten berücksichtigen können.

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 Verwendung von env(), um sicherzustellen, dass Inhalte nicht durch Fenstersteuerungstasten in Desktop-PWAs verdeckt werden.

WindowControlsOverlay Experimentell

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

WindowControlsOverlayGeometryChangeEvent Experimentell

Repräsentiert Ereignisse, die Informationen zur Titelvarregion der Desktop Progress Web App liefern, wenn sich deren Größe oder Sichtbarkeit ändert.

Navigator.windowControlsOverlay

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

• Passen Sie das Window Controls Overlay der Titelleiste Ihrer PWA an
• Ausbrechen aus der Box
• Anzeige von Inhalten in der Titelleiste