App-Design

In diesem Kapitel geht es um einige kritische Aspekte beim Rendern von Inhalten außerhalb des Browsertabs.

Verschiedene Betriebssysteme haben unterschiedliche Vorstellungen von einem Anwendungsfenster. Auf iPhones belegt eine Anwendung beispielsweise immer 100% des Bildschirms. 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 können dagegen bei einer Anwendung mehrere Instanzen 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 ihnen unterschiedliche Formmasken zuweisen, wie die im Bild unten.

PWA-Symbole in verschiedenen Formen für unterschiedliche Plattformen.

App-Design erstellen

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: definiert die Farbe des Fensters, 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-Ladebildschirm 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. Lesen Sie den Hilfeartikel Overlay der Fenstersteuerelemente der Titelleiste Ihrer PWA anpassen.

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 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ändiges Erlebnis

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 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.

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 in 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 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.

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. 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 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 Desktop 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 nur 200 x 100 Pixel groß 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 und an anderen Stellen mit der alt-tab die Tabulatortaste 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 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 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 oder eine bestimmte Information nur dann rendern, wenn der Nutzer Ihre App über das Systemsymbol verwendet. Dazu gehört beispielsweise das Hinzufügen einer Schaltfläche „Zurück“, die beim Starten Ihrer App im eigenständigen Modus verwendet werden kann.

/* 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, dass eine App funktioniert. Es ist nicht einfach zu definieren, was das bedeutet, aber das Standard-Webverhalten 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 Rechner-PWA, in der Sie jede interaktive Schaltfläche 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 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 haben eine Funktion, mit der die Seite aktualisiert wird, wenn sie nach unten gezogen wird. Bei einigen Browsern, z. B. in Chrome unter Android, ist dieses Verhalten auch bei eigenständigen 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.

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 ununterbrochenen rechteckigen Displays. Stattdessen kann ihr Display eine andere Form haben, z. B. einen Kreis, oder Bereiche haben, die nicht verwendet werden können, z. B. die Notch von iPhone 13. In diesen Fällen stellen einige Browser Umgebungsvariablen mit sicheren Bereichen zur Verfügung, in denen Inhalte angezeigt werden können.

Oben ein notchbasiertes Gerät im Querformat mit einem Standarddarstellungsbereich, der an den Seiten nicht gerenderte Bereiche zeigt; unten ein Gerät mit vollständigem Zugang zum 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