Vorbereitung auf die Anzeigemodi von morgen

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

Thomas Steiner

Ein Web-App-Manifest ist eine JSON-Datei, die dem Browser Informationen zu Ihrer Progressive Web App und ihrem Verhalten bei der Installation auf dem Desktop oder Mobilgerät des Nutzers liefert. Über die Property display können Sie anpassen, welche Browser-UI beim Starten Ihrer App angezeigt wird. So können Sie beispielsweise die Adressleiste und die Browser-Chrome ausblenden. Spiele können sogar so konfiguriert werden, dass sie im Vollbildmodus gestartet werden. Unten finden Sie eine kurze Zusammenfassung der Anzeigemodi, die zum Zeitpunkt der Erstellung dieses Artikels angegeben wurden.

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

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

Einschränkungen des display-Attributs

Das Problem mit diesem fest verdrahteten Fallback-Kettenansatz ist dreifach:

  • Ein Entwickler kann "minimal-ui" nicht anfordern, ohne in den Anzeigemodus "browser" zurückgezwungen zu werden, falls "minimal-ui" von einem bestimmten Browser nicht unterstützt wird.
  • Entwickler haben keine Möglichkeit, browserübergreifende Unterschiede zu berücksichtigen, z. B. ob der Browser eine Schaltfläche „Zurück“ im Fenster für den "standalone"-Modus einblendet oder nicht.
  • Das aktuelle Verhalten macht es unmöglich, neue Anzeigemodi abwärtskompatibel einzuführen, da es für Funktionen wie den Tabbed-App-Modus keinen natürlichen Platz in der Fallback-Kette gibt.

Die display_override-Property

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

Im folgenden Beispiel sieht 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" (Sehen Sie sich zuerst display_override an.)
  2. "minimal-ui"
  3. "standalone" (Wenn display_override erschöpft ist, display auswerten.)
  4. "minimal-ui" (Verwenden Sie schließlich die display-Fallbackkette.)
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

Um die Abwärtskompatibilität zu gewährleisten, 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 display-Property zurück und ignorieren display_override als unbekannte Web-App-Manifest-Property.

Danksagung

Das Attribut display_override wurde von Daniel Murphy formalisiert.