In diesem Kapitel geht es um einige wichtige Aspekte des Renderns von Inhalten außerhalb des Browsertabs.
Das Fenster
Unterschiedliche Betriebssysteme haben unterschiedliche Vorstellungen davon, was ein Anwendungsfenster ist. Auf iPhones nimmt eine Anwendung beispielsweise immer 100% des Bildschirms ein. Auf Android-Geräten und iPads werden Apps normalerweise 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. Auf einem Desktop-Gerät kann dagegen für eine Anwendung mehr als eine Instanz gleichzeitig geöffnet sein. Sie teilt sich die verfügbare Bildschirmfläche mit allen anderen geöffneten Anwendungen. Jede Anwendungsinstanz kann in der Größe geändert und an einer beliebigen Stelle auf dem Bildschirm platziert werden, auch über andere Anwendungen hinweg.
Das Symbol
Apps werden anhand ihres Symbols erkannt. Dieses Symbol wird angezeigt, wenn Sie nach Apps suchen, in den Einstellungen, überall dort, wo Sie Apps starten, und dort, 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 oder Multitasking-Bereiche (alle Betriebssysteme)
Achten Sie beim Erstellen des Symbols für Ihre Progressive Web-App darauf, dass es plattformunabhängig ist. Jedes Betriebssystem kann Symbole rendern und verschiedene Formmasken darauf anwenden, wie die im Bild unten.
App-Design festlegen
Es gibt verschiedene Möglichkeiten, das App-Design in Ihren PWAs anzupassen:
- Designfarbe: Hiermit wird die Farbe der Titelleiste des Fensters auf dem Computer und die Farbe der Statusleiste auf Mobilgeräten festgelegt. Mit einem Meta-Tag können Sie Optionen für verschiedene Farbschemata wie den dunklen oder hellen Modus festlegen. Diese werden dann entsprechend den Nutzereinstellungen verwendet.
- Hintergrundfarbe: Hiermit wird die Farbe des Fensters festgelegt, bevor die App und ihr CSS geladen werden.
- Akzentfarbe: Hiermit wird die Farbe der integrierten Browserkomponenten wie Formularsteuerelemente definiert.
Anzeigemodi
Sie können festlegen, welche Art von Fenster für Ihre progressive Webanwendung verwendet werden soll. Es stehen drei Optionen zur Auswahl:
- Vollbild
- Eigenständig
- Minimalistische Benutzeroberfläche
Sie können auch den Bereich der Titelleiste neben den Fenstersteuerelementen verwenden, um Ihre PWA mit dem erweiterten Anzeigemodus „Window Controls Overlay“ mehr wie eine App aussehen zu lassen. Weitere Informationen finden Sie unter Hier finden Sie weitere Informationen zum Anpassen des Overlays für Fenstersteuerelemente der Titelleiste Ihrer PWA.
Vollbildmodus
Der Vollbildmodus eignet sich für immersive Inhalte wie Spiele, VR- oder AR-Inhalte. Diese Funktion ist derzeit nur auf Android-Geräten verfügbar. Dabei werden die Statusleiste und die Navigationsleiste ausgeblendet, sodass Ihre PWA 100% des Bildschirms für Ihre Inhalte nutzen kann.
Auf dem Computer und unter iPadOS werden Vollbild-PWAs nicht unterstützt. Sie können jedoch die Fullscreen API in Ihrer PWA verwenden, um Ihre App auf Wunsch eines Nutzers im Vollbildmodus anzuzeigen.
Eigenständige Nutzung
Im eigenständigen Modus, der gängigsten Option für eine progressive Webanwendung, wird Ihre PWA in einem Betriebssystemstandardfenster ohne Browsernavigations-UI angezeigt. Das Fenster kann auch ein browsergesteuertes Menü enthalten, in dem Nutzer Folgendes tun können:
- Kopieren Sie die aktuelle URL.
- Browsererweiterungen aufrufen, anwenden oder deaktivieren
- Berechtigungen ansehen und ändern
- Prüfe den aktuellen Ursprung und das SSL-Zertifikat.
In der Titelleiste werden möglicherweise auch Berechtigungen und die Hardwarenutzung angezeigt, die die Omnibox oder URL-Leiste ersetzen, 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, damit Nutzer Benachrichtigungen, die Uhrzeit und den Akkustand sehen können. Häufig gibt es kein browsergesteuertes Menü, wie es bei eigenständigen Desktop-Anwendungen der Fall sein kann.
Einige Browser auf Android-Geräten erstellen eine feste und stumme Benachrichtigung, während die PWA im Vordergrund ist, über die Nutzer die aktuelle URL oder andere Optionen kopieren können.
Minimalistische Benutzeroberfläche
Dieser Modus ist für progressive Web-Apps auf Android- und Desktop-Betriebssystemen verfügbar. Wenn Sie es verwenden, zeigt der Browser, in dem Ihre PWA gerendert wird, eine minimale Benutzeroberfläche an, die den Nutzern die Navigation innerhalb der Anwendung erleichtert.
Unter Android wird eine Titelleiste angezeigt, in der das aktuelle <title>-Element und der Ursprung mit einem kleinen Drop-down-Menü dargestellt werden. Auf dem Computer werden in der Titelleiste mehrere Schaltflächen zur Navigation angezeigt, darunter eine Schaltfläche „Zurück“ und ein Steuerelement, mit dem je nach aktuellem Ladestatus zwischen „Anhalten“ und „Neu laden“ gewechselt werden kann.
Design für Computer optimieren
Wenn Sie eine progressive Webanwendung für den Desktop entwerfen, müssen Sie die unzähligen Möglichkeiten für die Fenstergröße im Vergleich zum Tab des Browsers oder als App in einem mobilen Betriebssystem berücksichtigen.
In Kapitel 3 haben wir den Minimodus erwähnt: Eine Desktop-App kann so klein wie 200 × 100 Pixel sein. In diesem Fenster wird der Inhalt des <title>-Elements in Ihrem HTML-Code als Titel des Fensters verwendet. Diese Inhalte werden auch gerendert, wenn Sie zwischen Apps wechseln oder Alt + Tab drücken.
Achten Sie auf das <title>-Element in Ihrem HTML-Code und überdenken Sie, wie Sie es verwenden. Das <title> dient nicht nur der SEO oder dem Rendern der ersten Zeichen auf dem Tab eines Browsers, sondern ist Teil der Nutzererfahrung Ihres eigenständigen Desktopfensters.
Best Practices für CSS
Ihre Erfahrung mit CSS-Layout, -Design und -Animation ist auch dann relevant, wenn Ihre Inhalte in einer eigenständigen Umgebung gerendert werden. Es gibt jedoch einige Tipps und Tricks, mit denen Sie die Nutzung eines eigenständigen Fensters optimieren 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.
Mit dieser Medienabfrage werden für jeden Modus unterschiedliche Stile angewendet. So können Sie beispielsweise eine Installationseinladung nur im Browsermodus rendern oder eine bestimmte Information nur dann anzeigen, wenn der Nutzer Ihre App über das Systemsymbol verwendet. Dazu kann beispielsweise eine Schaltfläche „Zurück“ gehören, die verwendet wird, 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) {
}
Nutzerfreundlichkeit der App
Wenn Nutzer eine installierte PWA verwenden, erwarten sie App-Verhalten. Es ist nicht einfach zu definieren, was das bedeutet, aber das Standardverhalten des Webs ist in einigen Situationen nicht optimal.
Nutzerauswahl
Inhalte können in der Regel mit der Maus oder dem Cursor oder durch Drücken und Halten einer Touch-Geste ausgewählt werden. Das ist zwar hilfreich für Inhalte, bietet aber nicht die beste Darstellung für Navigationselemente, Menüs und Schaltflächen in Ihrer PWA.
Daher sollten Sie die Nutzerauswahl für diese Elemente mit user-select: none und der Präfixversion -webkit- deaktivieren:
.unselectable {
user-select: none;
}
Accent color
In Ihrer PWA können Sie mithilfe der Property accent-color eine Farbe für HTML-Formularsteuerelemente festlegen, die zu Ihrer Marke passt.
Systemschriften
Wenn ein Element wie Dialogfelder oder Nachrichten der Standardschriftart der Plattform 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 haben eine Funktion, mit der die Seite aktualisiert wird, wenn sie nach unten gezogen wird. In einigen Browsern, z. B. Chrome auf Android-Geräten, ist dieses Verhalten auch für eigenständige PWAs aktiviert.
Sie können diese Aktion deaktivieren. Das ist beispielsweise der Fall, wenn Sie Ihre eigene Gestenverwaltung oder Aktualisierungsaktion bereitstellen oder wenn die Aktion von Nutzern versehentlich ausgelöst werden kann.
Sie können dieses Verhalten mit overscroll-behavior-y: contain: deaktivieren.
body {
overscroll-behavior-y: contain;
}
Sichere Bereiche
Einige Geräte haben keine ununterbrochenen rechteckigen Displays. Stattdessen kann das Display eine andere Form haben, z. B. einen Kreis, oder Bereiche haben, die nicht verwendet werden können, z. B. die Notch des iPhone 13. In diesen Fällen stellen einige Browser Umgebungsvariablen mit sicheren Bereichen bereit, in denen Inhalte angezeigt werden können.
Wenn Sie vollen Zugriff auf den Bildschirm, auch auf den unsichtbaren Bereich, zum Rendern Ihrer Farbe oder Ihres Bildes benötigen, fügen Sie viewport-fit=cover in den Inhalt Ihres <meta name="viewport">-Tags ein. Anschließend kannst du deine Inhalte mithilfe der safe-area-inset-*-Umgebungsvariablen sicher in diese Regionen ausweiten.