Vorbereitung auf die Anzeigemodi von morgen

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

Thomas Steiner

Ein Web-App-Manifest ist eine JSON-Datei, die den Browser über deine progressive Web-App informiert und darüber informiert, wie sie sich verhalten soll, wenn sie auf dem Desktop oder Mobilgerät des Nutzers installiert ist. Über die Property display können Sie festlegen, welche Browser-Benutzeroberfläche beim Start Ihrer App angezeigt wird. Sie können beispielsweise die Adressleiste und den Browser Chrome ausblenden. Spiele können sogar im Vollbildmodus gestartet werden. Im Folgenden finden Sie eine kurze Zusammenfassung der Anzeigemodi, die zum Zeitpunkt der Erstellung dieses Artikels festgelegt wurden.

Attribut Verwendung
fullscreen Öffnet die Webanwendung ohne Browser-UI und nimmt den verfügbaren Anzeigebereich ein.
standalone Öffnet die Web-App, damit sie wie eine eigenständige Anwendung aussieht. Die Anwendung 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 jedoch einen minimalen Satz von UI-Elementen, um die Navigation zu steuern (z. B. Zurück und Aktualisieren).
browser Eine standardmäßige Browsernutzung.

Diese Anzeigemodi folgen einer klar 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.

Schwachstellen der Property display

Bei diesem Ansatz mit fest verkabelter Fallback-Kette besteht das Problem dreifach:

  • Ein Entwickler kann "minimal-ui" nicht anfordern, ohne wieder in den "browser"-Anzeigemodus versetzt zu werden, für den Fall, dass "minimal-ui" von einem bestimmten Browser nicht unterstützt wird.
  • Entwickler haben keine Möglichkeit, browserübergreifende Unterschiede zu verarbeiten, z. B. ob der Browser eine Zurück-Schaltfläche im Fenster für den "standalone"-Modus ein- oder ausschließt.
  • Das aktuelle Verhalten macht es unmöglich, neue Anzeigemodi abwärtskompatibel einzuführen, da explorative Datenanalysen wie den Anwendungsmodus mit Tabs keinen natürlichen Platz in der Fallback-Kette haben.

Das Attribut display_override

Diese Probleme werden durch das Attribut display_override gelöst, das der Browser vor dem Attribut display berücksichtigt. Sein Wert ist eine Folge von Strings, die als geordnet betrachtet werden, und der erste unterstützte Anzeigemodus wird angewendet. Wenn keine unterstützt werden, wertet der Browser das Feld display aus.

Im folgenden Beispiel sähe die Fallback-Kette für den Anzeigemodus so aus: (Die Details zu "window-controls-overlay" werden in diesem Artikel nicht behandelt.)

  1. "window-controls-overlay" (Sieh dir zuerst display_override an.)
  2. "minimal-ui"
  3. "standalone" (Wenn display_override aufgebraucht ist, wird display ausgewertet.)
  4. "minimal-ui" (Verwenden Sie zuletzt die Fallback-Kette display.)
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

Zur Aufrechterhaltung der Abwärtskompatibilität ist jeder zukünftige Anzeigemodus nur mit dem Wert display_override akzeptabel, aber nicht mit display. Browser, die display_override nicht unterstützen, greifen auf das Attribut display zurück und ignorieren display_override als unbekanntes Web-App-Manifestattribut.

Danksagung

Die Property display_override wurde von Daniel Murphy formalisiert.