App-Design

In diesem Kapitel geht es um einige wichtige Aspekte des Renderns von Inhalten außerhalb des Browsertabs.

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.

PWA-Symbole in verschiedenen Formen für verschiedene Plattformen

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.
Eine Desktop-PWA mit Design- und Akzentfarben und ein Android-PWA-Startbildschirm mit Design- und Hintergrundfarben.
Eine Desktop-PWA mit Design- und Akzentfarben und ein Android-PWA-Startbildschirm mit Design- und Hintergrundfarben.

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.

Eine PWA, die mit Microsoft Edge auf einem Computer installiert wurde und deren Menü angezeigt wird. Eine PWA, die mit Google Chrome auf dem Computer installiert ist, mit Drop-down-Menü und Plug-in-Symbol
Die Bilder oben zeigen, wie eine PWA im eigenständigen Modus auf dem Computer in Microsoft Edge und Chrome angezeigt 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.

Ein iOS-Gerät, auf dem eine eigenständige App gerendert wird.

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.

Eine von Chrome gerenderte Android-Benachrichtigung mit einigen Aktionen für die aktuell aktive PWA.

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.

Eine minimalistische Desktop-Benutzeroberfläche in Microsoft Edge mit Schaltflächen zum Zurückgehen und Aktualisieren
Unter Android verwenden Browser eine leseschreibgeschützte Navigationsleiste mit einem bestimmten Design für eine minimalistische Benutzeroberfläche, hier Firefox und Chrome

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.

Eine PWA-Rechner, bei der Sie alle interaktiven Schaltflächen auswählen können, z. B. die Zahlen.

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.

Oben: ein Gerät mit Notch im Querformat mit einem Standard-Darstellungsbereich, der an den Seiten nicht gerenderte Bereiche zeigt. Unten: ein Gerät mit vollem Darstellungsbereich dank viewport-fit=cover.

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.

Ressourcen