In diesem Kapitel geht es um einige kritische Aspekte beim Rendern von Inhalten außerhalb des Browsertabs.
Das Fenster
Verschiedene Betriebssysteme haben unterschiedliche Vorstellungen davon, was ein Anwendungsfenster ist. Auf iPhones belegt eine App beispielsweise immer 100% des Bildschirms. Auf Android-Geräten und iPads werden Anwendungen normalerweise im Vollbildmodus ausgeführt. Es ist jedoch möglich, den Bildschirm zwischen zwei Apps zu teilen. Allerdings ist immer nur eine App-Instanz geöffnet. Auf einem Desktop-Gerät können dagegen bei einer Anwendung mehrere Instanzen gleichzeitig geöffnet sein. Dabei wird der verfügbare Platz auf dem Bildschirm mit allen anderen offenen Anwendungen geteilt. Jede Anwendungsinstanz kann an beliebiger Stelle auf dem Bildschirm angepasst und sogar an anderer Stelle überlappen.
Das Symbol
Wir erkennen Apps an ihrem Symbol. Dieses Symbol wird angezeigt, wenn Sie nach Apps suchen, in den Einstellungen, überall dort, wo Sie Apps starten, und wo Sie laufende Apps sehen.
Dazu gehören:
- Startbildschirm (iOS, iPadOS, Android)
- App Launcher (macOS, Android)
- Startmenü oder App-Menü (Windows, ChromeOS, Linux)
- Steuerfelder für das Dock, die Taskleiste oder für Multi-Tasks (alle Betriebssysteme).
Beim Erstellen des Symbols für Ihre progressive Web-App Achten Sie darauf, dass das Symbol plattformunabhängig ist, da jedes Betriebssystem Symbole rendern und verschiedene Formmasken darauf anwenden kann, wie in der Abbildung unten dargestellt.
App-Design erstellen
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 Optionen für verschiedene Schemas haben, z. B. den dunklen oder hellen Modus. Diese werden je nach den Einstellungen des Nutzers verwendet.
- Hintergrundfarbe: definiert die Farbe des Fensters, bevor die App und ihr CSS geladen werden.
- Akzentfarbe: Definiert die Farbe von integrierten Browserkomponenten, z. B. Formularsteuerelementen.
Anzeigemodi
Sie können die Fenstererfahrung für Ihre progressive Web-App definieren. Sie können zwischen drei Optionen wählen:
- Vollbild
- Eigenständig
- Minimalistische Benutzeroberfläche
Vollbildmodus
Der Vollbildmodus eignet sich für immersive Inhalte wie Spiele, VR- und AR-Erlebnisse. Sie ist derzeit nur auf Android-Geräten verfügbar. Die Statusleiste und die Navigationsleiste werden ausgeblendet, sodass Ihre PWA 100% des Bildschirms für Ihre Inhalte erhalten.
Auf Computern und iPadOS werden Vollbild-PWAs nicht unterstützt. Sie können jedoch die Fullscreen API in Ihrer PWA verwenden, um Ihre App auf Anfrage eines Nutzers im Vollbildmodus anzuzeigen.
Eigenständiges Erlebnis
Der eigenständige Modus ist die häufigste Option für progressive Web-Apps. Im eigenständigen Modus wird die PWA in einem Standardfenster des Betriebssystems und ohne Browser-UI angezeigt. Das Fenster kann auch ein über den Browser gesteuertes Menü enthalten, über das der Nutzer Folgendes tun kann:
- Kopieren Sie die aktuelle URL.
- Browsererweiterungen aufrufen, anwenden oder deaktivieren.
- Berechtigungen aufrufen und ändern
- Prüfen Sie den aktuellen Ursprung und das SSL-Zertifikat.
Wenn die PWA im Tab gerendert wird, werden in der Titelleiste möglicherweise auch Berechtigungen und Hardwarenutzung angezeigt. Ersetzt die Omnibox oder URL-Leiste.
<ph type="x-smartling-placeholder">
Auf Mobilgeräten wird durch eine eigenständige PWA ein Standardbildschirm erstellt, auf dem die Statusleiste sichtbar bleibt. So können Nutzer weiterhin Benachrichtigungen, die Uhrzeit und den Akkustand sehen. Sie verfügt häufig nicht über ein browsergesteuertes Menü, wie dies bei eigenständigen Desktop-Anwendungen der Fall sein könnte.
Einige Browser unter Android erstellen eine feste und lautlose Benachrichtigung, während die PWA im Vordergrund ausgeführt wird, sodass der Nutzer die aktuelle URL oder andere Optionen kopieren kann.
Minimalistische Benutzeroberfläche
Dieser Modus ist für progressive Web-Apps unter Android und für Desktop-Betriebssysteme verfügbar. In diesem Fall zeigt der Browser, der Ihre PWA rendert, eine minimale Benutzeroberfläche, die dem Nutzer die Navigation innerhalb der Anwendung erleichtert.
Unter Android wird eine Titelleiste angezeigt, die das aktuelle <title>-Element und den Ursprung über ein kleines Drop-down-Menü rendert. Auf dem Desktop gibt es eine Reihe von Schaltflächen in der Titelleiste, die Sie bei der Navigation unterstützen. Dazu gehören eine Schaltfläche „Zurück“ und ein Steuerelement, das je nach aktuellem Ladestatus zwischen einer Stopp- und einer Neuladeaktion wechselt.
Design für Desktop optimieren
Wenn Sie eine progressive Web-App für einen Desktop entwerfen, müssen Sie über die endlosen Möglichkeiten in Bezug auf die Fenstergröße nachdenken, verglichen mit der Ansicht im Browser-Tab oder als App in einem mobilen Betriebssystem.
In Kapitel 3 haben wir den Minimodus erwähnt: Eine Desktop-App kann nur 200 x 100 Pixel groß sein. Für dieses Fenster wird der Inhalt des <title>-Elements im HTML-Code als Fenstertitel verwendet. Diese Inhalte werden auch gerendert, wenn Sie zwischen Apps und an anderen Stellen mit der Alt-Taste die Tabulatortaste drücken.
Achten Sie auf das <title>-Element Ihres HTML-Codes und überdenken Sie seine Verwendung. Das <title>-Objekt eignet sich nicht nur für SEO oder zum Rendern nur der ersten Zeichen auf einem Browsertab. wird es Teil der User Experience Ihres eigenständigen Desktop-Fensters sein.
Best Practices für Preisvergleichsportale
Ihre gesamte Erfahrung mit CSS-Layout, -Design und -Animation funktioniert, wenn Ihre Inhalte im eigenständigen Modus gerendert werden. Es gibt jedoch einige Tipps und Tricks, wie Sie diese Funktion für ein eigenständiges Fenster verbessern können.
Medienabfragen
Die erste Medienabfrage, die Sie in Ihrer PWA verwenden können, ist die display-mode-Eigenschaft, die die Werte browser, standalone, minimal-ui oder fullscreen akzeptiert.
Mit dieser Medienabfrage werden auf jeden Modus unterschiedliche Stile angewendet. So können Sie beispielsweise eine Einladung zur Installation nur im Browsermodus oder eine bestimmte Information nur dann rendern, wenn der Nutzer Ihre App über das Systemsymbol verwendet. Sie können beispielsweise eine Schaltfläche „Zurück“ hinzufügen, die beim Starten Ihrer App im eigenständigen Modus verwendet werden soll.
/* 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) {
}
Das App-Erlebnis
Wenn Nutzer eine installierte PWA verwenden, erwarten sie, dass eine App funktioniert. Die Bedeutung lässt sich zwar nicht einfach definieren, allerdings ist das Standardverhalten im Web in manchen Situationen nicht optimal.
Nutzerauswahl
Inhalte können in der Regel mit der Maus, dem Zeiger oder durch Gedrückthalten und Gedrückthalten ausgewählt werden. Das ist zwar hilfreich für Inhalte, bietet aber nicht die optimale Nutzung für Navigationsmenüs, Menüs und Schaltflächen in Ihrer PWA.
Daher ist es ratsam, die Nutzerauswahl für diese Elemente mit user-select: none und der Präfixversion -webkit- zu deaktivieren:
.unselectable {
user-select: none;
}
Accent color
In Ihrer PWA können Sie mit der Property accent-color in HTML-Formularsteuerelementen eine Farbe definieren, die zu Ihrer Marke passt.
Systemschriftarten
Wenn Sie möchten, dass ein Element wie Dialogfelder oder Nachrichten der Standardschriftart der Plattform des Nutzers entspricht, 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 beim Herunterziehen aktualisiert wird. In einigen Browsern, z. B. in Chrome unter Android, ist dieses Verhalten auch bei eigenständigen PWAs aktiviert.
Sie sollten diese Aktion deaktivieren. Das ist beispielsweise der Fall, wenn Sie Ihre eigene Gestenverwaltung oder Aktualisierungsaktion anbieten oder wenn der Nutzer die Aktion unbeabsichtigt auslösen kann.
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 Displays. Stattdessen kann das Display eine andere Form haben, z. B. ein Kreis, oder Teile des Displays haben, die nicht verwendet werden können, z. B. die Kerbe des iPhone 13. In diesen Fällen stellen einige Browser Umgebungsvariablen mit sicheren Bereichen zur Verfügung, in denen Inhalte angezeigt werden können.
Wenn Sie zum Rendern der Farbe oder des Bildes vollen Zugriff auf den Bildschirm haben möchten, auch den unsichtbaren Bereich, fügen Sie viewport-fit=cover in den Inhalt des <meta name="viewport">-Tags ein. Verwenden Sie dann die safe-area-inset-*-Umgebungsvariablen, um Ihren Content sicher auf diese Bereiche auszudehnen.