Vorbereitung auf die Anzeigemodi von morgen

PWAs können den Parameter „display_override“ verwenden zum Umgang mit speziellen Anzeigemodi.

Ein Web-App-Manifest ist eine JSON-Datei, die dem Browser Informationen zu Ihrem Progressive Web-App und ihre Funktionsweise, wenn sie auf dem Desktop oder Mobilgerät des Nutzers installiert ist. Über die Property display können Sie festlegen, welche Browser-UI beim Start Ihrer App angezeigt wird. Sie können beispielsweise die Adressleiste und Chrome. Spiele können sogar im Vollbildmodus gestartet werden. Im Folgenden finden Sie eine kurze Zusammenfassung der Anzeigemodi, die zum Zeitpunkt der Erstellung dieses Artikels angegeben wurden.

Attribut Verwenden
fullscreen Öffnet die Webanwendung ohne Browser-Benutzeroberfläche und nimmt die gesamte verfügbare Fläche ausfüllt.
standalone Die Web-App wird geöffnet und wirkt wie eine eigenständige App. Die Anwendung wird in einem eigenen, vom Browser getrennten Fenster ausgeführt. blendet Standard-UI-Elemente wie die URL-Leiste aus.
minimal-ui Dieser Modus ähnelt dem standalone, bietet jedoch die Möglichkeit, Nutzende mit minimalen UI-Elementen zur Steuerung der Navigation (z. B. und aktualisieren Sie die Seite.
browser Ein Standardbrowser.

Diese Anzeigemodi folgen einer klar definierten Fallback-Kette. ("fullscreen""standalone""minimal-ui""browser"). Wenn ein Browser eine bestimmte wird auf den nächsten Anzeigemodus in der Kette zurückgegriffen.

Mängel der Property display

Bei diesem Ansatz der Fallback-Kette mit fester Kabelverbindung gibt es drei Probleme:

  • Ein Entwickler kann "minimal-ui" nur dann anfordern, wenn er zurück in den Anzeigemodus "browser" versetzt wird, falls "minimal-ui" von einem bestimmten Browser nicht unterstützt wird.
  • Entwickler haben keine Möglichkeit, auf browserübergreifende Unterschiede umzugehen, z. B. wenn der Browser die Schaltfläche „Zurück“ im Fenster des "standalone"-Modus ein- oder ausschließt.
  • Aufgrund des aktuellen Verhaltens ist es nicht möglich, da explorative Datenanalysen wie der Anwendungsmodus mit Tabs kein natürliche Stelle in der Fallback-Kette.

Das Attribut display_override

Diese Probleme werden durch das Attribut display_override gelöst, das der Browser vor display. Sein Wert ist eine Folge von Zeichenfolgen, die der Reihe nach betrachtet werden, und der wird der erste unterstützte Anzeigemodus angewendet. Werden keine unterstützt, greift der Browser auf die Auswertung Das Feld display.

display

Im folgenden Beispiel sieht die Fallback-Kette im 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 aufgebraucht ist, werte display aus.)
  4. "minimal-ui" (Verwenden Sie abschließend die Fallback-Kette display.)
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

Um die Abwärtskompatibilität zu gewährleisten, können künftige Anzeigemodi nur mit folgendem Wert akzeptiert werden: display_override, aber nicht display. Browser, die display_override nicht unterstützen, greifen auf das Attribut display zurück und ignorieren display_override als unbekannte Property des Manifests einer Web-App.

Danksagung

Die Eigenschaft display_override wurde formalisiert durch Daniel Murphy