In diesem Kapitel geht es um einige wichtige Aspekte des Renderings von Inhalten außerhalb des Browsertabs.
Das Fenster
Verschiedene Betriebssysteme haben unterschiedliche Vorstellungen davon, was ein Anwendungsfenster ist. Auf iPhones beispielsweise nimmt eine App immer 100% des Bildschirms ein. Bei Android- und iPad-Apps werden Apps in der Regel im Vollbildmodus ausgeführt. Es ist jedoch möglich, den Bildschirm zwischen zwei Apps zu teilen. Es ist jedoch immer nur eine App-Instanz geöffnet. Im Gegensatz dazu können in einer Anwendung auf einem Desktop-Gerät mehrere Instanzen gleichzeitig geöffnet sein. Er teilt sich den verfügbaren Platz auf dem Bildschirm mit allen anderen offenen Anwendungen. Die Größe und Position jeder Anwendungsinstanz kann an einer beliebigen Stelle auf dem Bildschirm angepasst werden, auch wenn sie andere Anwendungen überlappt.
Das Symbol
Wir erkennen Apps anhand ihres Symbols. Das Symbol wird angezeigt, wenn Sie in den Einstellungen nach Apps suchen, wo Sie Apps starten oder wo Sie laufende Apps sehen.
Dazu gehören:
- Startbildschirm (iOS, iPadOS, Android)
- App Launcher (macOS, Android)
- Startmenü oder App-Menü (Windows, ChromeOS, Linux)
- Dock-, Taskleiste- und Multitasking-Bereiche (alle Betriebssysteme)
Achten Sie beim Erstellen des Symbols für Ihre progressive Web-App darauf, dass es plattformunabhängig ist, da jedes Betriebssystem Symbole rendern und unterschiedliche Formmasken darauf anwenden kann, wie im Bild unten zu sehen.
App-Design festlegen
Es gibt mehrere Möglichkeiten, den App-Stil in Ihren PWAs anzupassen:
- Designfarbe: definiert die Farbe der Titelleiste des Fensters auf dem Desktop und die Farbe der Statusleiste auf Mobilgeräten. Mit einem Meta-Tag können Sie verschiedene Schemas wie den dunklen oder den hellen Modus verwenden. Diese werden dann entsprechend den Präferenzen des Nutzers verwendet.
- Hintergrundfarbe: Definiert die Farbe des Fensters, bevor die App und ihr CSS geladen werden.
- Akzentfarbe: definiert die Farbe von integrierten Browserkomponenten wie Formularsteuerelementen
Anzeigemodi
Sie können festlegen, welche Fenstergestaltung Sie für Ihre progressive Web-App wünschen. Sie können zwischen drei Optionen wählen:
- Vollbild
- Eigenständig
- Minimale Benutzeroberfläche
Vollbildmodus
Ein Vollbild eignet sich für eindrucksvolle Erlebnisse wie Spiele, VR- oder AR-Erlebnisse. Die Funktion ist derzeit nur auf Android-Geräten verfügbar. Dabei werden die Statusleiste und die Navigationsleiste ausgeblendet, sodass der PWA 100% des Bildschirms für Ihre Inhalte zur Verfügung steht.
Auf Computern und iPadOS werden Vollbild-PWAs nicht unterstützt. Sie können aber die Fullscreen API in Ihrer PWA verwenden, um Ihre App auf Nutzeranfrage im Vollbildmodus anzuzeigen.
Eigenständige Umgebung
Dies ist die gängigste Option für eine progressive Web-App. Im eigenständigen Modus wird Ihre PWA in einem Fenster des Standardbetriebssystems ohne die Benutzeroberfläche des Browsers angezeigt. Das Fenster kann auch ein browsergesteuertes Menü enthalten, in dem der Nutzer Folgendes tun kann:
- Kopieren Sie die aktuelle URL.
- Hier können Sie Browsererweiterungen ansehen, anwenden oder deaktivieren.
- Berechtigungen ansehen und ändern
- Prüfen Sie den aktuellen Ursprung und das SSL-Zertifikat.
In der Titelleiste werden möglicherweise auch Berechtigungen und Hardwarenutzungen angezeigt, wodurch die Omnibox oder URL-Leiste ersetzt wird, wenn die PWA auf dem Tab gerendert wird.
Auf Mobilgeräten wird bei einer eigenständigen PWA ein Standardbildschirm erstellt, auf dem die Statusleiste sichtbar bleibt, sodass der Nutzer weiterhin Benachrichtigungen, die Uhrzeit und den Akkustand sehen kann. Häufig gibt es keine browsergesteuerten Menüpunkte, wie dies bei eigenständigen Desktop-Oberflächen der Fall sein kann.
In einigen Browsern unter Android wird eine feste und stumme Benachrichtigung erstellt, während die PWA im Vordergrund ausgeführt wird. Nutzer können dann die aktuelle URL oder andere Optionen kopieren.
Minimale Benutzeroberfläche
Dieser Modus ist für progressive Web-Apps auf Android- und Desktop-Betriebssystemen verfügbar. Wenn Sie die PWA verwenden, zeigt der Browser, der Ihre PWA rendert, eine minimalistische Benutzeroberfläche, um dem Nutzer die Navigation innerhalb der Anwendung zu erleichtern.
Unter Android sehen Sie eine Titelleiste, die das aktuelle <title>-Element und den Ursprung mit einem kleinen Drop-down-Menü rendert. Auf dem Desktop enthält die Titelleiste eine Reihe von Schaltflächen, die die Navigation erleichtern. Dazu gehören eine Schaltfläche „Zurück“ und ein Steuerelement, das je nach aktuellem Ladestatus zwischen einem Stopp- und einer Aktualisierungsaktion wechselt.
Design für Desktop-Computer optimieren
Wenn Sie eine progressive Web-App für einen Desktop-Computer entwerfen, müssen Sie an die endlosen Möglichkeiten der Fenstergröße im Vergleich zum Tab des Browsers oder als App in einem mobilen Betriebssystem denken.
In Kapitel 3 haben wir den Minimodus erwähnt: Eine Desktop-App kann nur 200 × 100 Pixel groß sein. Für dieses Fenster wird der Inhalt des <title>-Elements im HTML-Code als Titel des Fensters verwendet. Dieser Inhalt wird auch gerendert, wenn Sie die Alt-Tabulatortaste zwischen Apps und an anderen Stellen drücken.
Achten Sie auf das <title>-Element Ihres HTML-Codes und überdenken Sie, wie Sie es verwenden. Das <title> ist nicht nur für SEO oder zum Rendern nur der ersten Zeichen in einem Browsertab gedacht. Es wird Teil der Nutzererfahrung eines eigenständigen Desktop-Fensters.
Best Practices für Preisvergleichsportale
Die gesamte Erfahrung mit CSS-Layout, -Design und -Animation ist gültig, wenn Ihre Inhalte in der eigenständigen Version gerendert werden. Es gibt jedoch einige Tipps und Tricks, wie Sie die Nutzererfahrung für ein eigenständiges Fenster verbessern können.
Medienabfragen
Die erste Medienabfrage, die Sie in Ihrer PWA nutzen können, ist das Attribut display-mode, das die Werte browser, standalone, minimal-ui oder fullscreen akzeptiert.
Diese Medienabfrage wendet auf jeden Modus verschiedene Stile an. So könnten Sie beispielsweise eine Installationseinladung nur im Browsermodus rendern oder eine bestimmte Information nur dann rendern, wenn der Nutzer Ihre App über das Systemsymbol verwendet. Sie könnten z. B. eine Schaltfläche „Zurück“ hinzufügen, die verwendet werden kann, wenn Ihre App im eigenständigen Modus gestartet wird.
/* It targets only the app used within the browser */
@media (display-mode: browser) {
}
/* It targets only the app used with a system icon in standalone mode */
@media (display-mode: standalone) {
}
/* It targets only the app used with a system icon in all mode */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
}
Die App
Wenn Nutzer eine installierte PWA verwenden, erwarten sie, dass sich die App verhält. Auch wenn sich dies nicht einfach definieren lässt, bietet das Standardverhalten im Web in manchen Situationen nicht die beste Nutzererfahrung.
Nutzerauswahl
Inhalte können im Allgemeinen mit einer Maus oder einem Zeiger oder einer Touch-Geste „Gedrückt halten“ ausgewählt werden. Sie ist zwar für den Inhalt hilfreich, aber nicht optimal für Navigationsmenüs, Menüs und Schaltflächen innerhalb Ihrer PWA.
Daher ist es ratsam, die Nutzerauswahl für diese Elemente mithilfe von user-select: none und der Präfixversion -webkit- zu deaktivieren:
.unselectable {
user-select: none;
}
Accent color
In Ihrer PWA können Sie mithilfe der Eigenschaft accent-color in HTML-Formularsteuerelementen eine Farbe definieren, die zu Ihrer Marke passt.
Systemschriftarten
Wenn Sie möchten, dass ein Element, z. B. Dialogfelder oder Nachrichten, der Standardschrift auf der Plattform des Nutzers entsprechen soll, können Sie die folgende Schriftfamilie verwenden:
selector {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell,
"Helvetica Neue", sans-serif;
}
Zum Aktualisieren nach unten ziehen
Moderne mobile Browser wie Google Chrome und Safari verfügen über eine Funktion, mit der die Seite aktualisiert wird, wenn sie nach unten gezogen wird. In einigen Browsern wie Chrome unter Android ist dieses Verhalten auch bei eigenständigen PWAs aktiviert.
Sie sollten diese Aktion deaktivieren. beispielsweise, wenn Sie Ihre eigene Gestenverwaltung oder Aktualisierungsaktion bereitstellen oder wenn die Möglichkeit besteht, dass Ihre Nutzer die Aktion unbeabsichtigt auslösen.
Es ist möglich, dieses Verhalten mithilfe von overscroll-behavior-y: contain zu deaktivieren.
body {
overscroll-behavior-y: contain;
}
Sichere Bereiche
Einige Geräte haben keine unverdeckten rechteckigen Bildschirme. Stattdessen kann das Display eine andere Form haben (z. B. ein Kreis) oder Teile des Bildschirms haben, die nicht verwendet werden können, z. B. die Kerbe beim iPhone 13. In diesen Fällen enthalten einige Browser Umgebungsvariablen mit sicheren Bereichen, in denen Inhalte angezeigt werden können.
Wenn Sie zum Rendern Ihrer Farbe oder Ihres Bildes vollen Zugriff auf den Bildschirm (auch den unsichtbaren Bereich) wünschen, fügen Sie viewport-fit=cover in den Inhalt Ihres <meta name="viewport">-Tags ein. Verwenden Sie dann die Umgebungsvariablen safe-area-inset-*, um Ihre Inhalte sicher auf diese Bereiche auszuweiten.