Vorbereitung auf die Anzeigemodi von morgen

PWAs können die Property „display_override“ verwenden, um spezielle Anzeigemodi zu verarbeiten.

Thomas Steiner

Ein Web-App-Manifest ist eine JSON-Datei, die dem Browser Informationen zu Ihrer progressiven Web-App liefert und beschreibt, wie sie sich verhalten soll, wenn sie auf dem Desktop oder Mobilgerät des Nutzers installiert wird. Mit der display Property können Sie anpassen, welche Browser-UI angezeigt wird, wenn Ihre App gestartet wird. Sie können beispielsweise die Adressleiste und die Browser-UI ausblenden. Spiele können sogar im Vollbildmodus gestartet werden. Zur Erinnerung: Unten finden Sie die Anzeigemodi, die zum Zeitpunkt der Erstellung dieses Artikels angegeben wurden.

Attribut Verwendung
fullscreen Öffnet die Webanwendung ohne Browser-UI und nimmt den gesamten verfügbaren Anzeigebereich ein.
standalone Öffnet die Web-App so, dass sie wie eine eigenständige App aussieht und sich auch so anfühlt. Die App wird in einem eigenen Fenster getrennt vom Browser ausgeführt und blendet standardmäßige Browser-UI-Elemente wie die URL-Leiste aus.
minimal-ui Dieser Modus ähnelt standalone, bietet dem Nutzer aber eine minimale Anzahl von UI-Elementen zur Steuerung der Navigation (z. B. „Zurück“ und „Neu laden“).
browser Standardmäßige Browser-UI.

Diese Anzeigemodi folgen einer genau definierten Fallback-Kette ("fullscreen" → "standalone" → "minimal-ui" → "browser"). Wenn ein Browser einen bestimmten Modus nicht unterstützt, wird auf den nächsten Anzeigemodus in der Kette zurückgegriffen.

Nachteile der Property display

Dieser Ansatz mit einer fest verdrahteten Fallback-Kette hat drei Nachteile:

  • Ein Entwickler kann nicht "minimal-ui" anfordern, ohne im Fall, dass "minimal-ui" von einem bestimmten Browser nicht unterstützt wird, gezwungen zu sein, zum Anzeigemodus "browser" zurückzukehren.
  • Entwickler haben keine Möglichkeit, browserübergreifende Unterschiede zu berücksichtigen, z. B. wenn der Browser eine Schaltfläche „Zurück“ im Fenster für den Modus "standalone" ein- oder ausblendet.
  • Das aktuelle Verhalten macht es unmöglich, neue Anzeigemodi auf abwärtskompatible Weise einzuführen, da Explorations wie der Tab-Anwendungsmodus keinen natürlichen Platz in der Fallback-Kette haben.

Die Property display_override

Diese Probleme werden durch die display_override Property gelöst, die der Browser vor der display Property berücksichtigt. Ihr Wert ist eine Sequenz von Strings, die in der Reihenfolge berücksichtigt werden. Der erste unterstützte Anzeigemodus wird angewendet. Wenn keiner unterstützt wird, greift der Browser auf die Auswertung des Felds display zurück.

Im folgenden Beispiel würde die Fallback-Kette für den Anzeigemodus so aussehen: Die Details von "window-controls-overlay" sind für diesen Artikel nicht relevant.

  1. "window-controls-overlay" (Zuerst display_override prüfen)
  2. "minimal-ui"
  3. "standalone" (Wenn display_override ausgeschöpft ist, display auswerten)
  4. "minimal-ui" (Schließlich die Fallback-Kette von display verwenden)
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

Um abwärtskompatibel zu bleiben, ist jeder zukünftige Anzeigemodus nur als Wert von display_override, nicht aber von display zulässig. Browser, die display_override nicht unterstützen, greifen auf die Property display zurück und ignorieren display_override als unbekannte Property des Web-App-Manifests.

Danksagung

Die display_override Property wurde von Daniel Murphy formalisiert.