App-Design

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.

Eine Desktop-PWA mit Design- und Akzentfarben und ein Android-PWA-Startbildschirm mit Design- und Hintergrundfarben.

Hinweis : Bei der Planung der Benutzeroberfläche Ihrer Progressiven Webanwendung können Sie keine Bilder oder Farbverläufe für Ihr Design verwenden, sondern nur reine Farben. Verwenden Sie am besten Farben ohne Transparenz und die Farben rgb oder hsl, Hexadezimalcodes oder benannte Farben. Das Design Ihrer App kann sich auch auf das Browser-Design auswirken, selbst wenn die App nicht installiert ist, z. B. wenn Sie das Element <meta name="theme-color"> verwenden.

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.

Hinweis : Wenn ein bestimmter Anzeigemodus nicht unterstützt wird oder Ihre PWA aus anderen Gründen nicht damit angezeigt werden kann, wird der nächste verfügbare Anzeigemodus verwendet. Im Vollbildmodus wird auf die eigenständige Version umgestellt, bei der eigenständigen Version auf die minimale Benutzeroberfläche und bei der minimalen Benutzeroberfläche auf den Browser (Standardeinstellung). Im Feld display_override können Sie eine eigene Fallback-Kette für den Anzeigemodus angeben, die angewendet wird, bevor das Mitglied display ausgewertet wird. Der Browseranzeigemodus wird nicht in einem eigenen Fenster angezeigt, sondern Ihre PWA wird in einem Tab des Browsers angezeigt, über den sie installiert wurde, ähnlich wie ein Webbookmark auf einem Startbildschirm.

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.

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.

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.

Warnung : Safari unter iOS und iPadOS unterstützt den Modus „Minimale Benutzeroberfläche“ für PWAs nicht. Stattdessen wird als Fallback eine Browserverknüpfung verwendet. Der Nutzer kann dem Startbildschirm ein Symbol hinzufügen, das aber als Lesezeichen auf Safari verweist. Er kann die App nicht über den Browsertab nutzen.

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.

Hinweis : Wenn Sie Ihre App mit einer clientseitigen Bibliothek wie React oder Vue entwickeln, denken Sie daran, den <title> in einen praktischen Wert zu ändern, wenn Sie zwischen Abschnitten oder Routen Ihrer App wechseln. Es ist an der Zeit, den <title> neu zu gestalten!

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.

Denken Sie daran, dass mit CSS nur Stile für den Inhalt der PWA definiert werden. Später in diesem Kurs erfahren Sie, wie Sie Stildeklarationen für das Fenster um den Inhalt herum angeben, z. B. Eigenschaften im Manifest der Webanwendung.

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) {
}

Hinweis : Nutzer erwarten, dass Apps in die Plattform eingebunden sind. Sie sollten daher einen dunklen und einen hellen Modus mit prefers-colors-scheme anbieten und prefers-reduced-motion-Medienabfragen berücksichtigen, um Übergänge und Animationen zu deaktivieren oder zu reduzieren.

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;
}

Die Nutzerauswahl ist eine wichtige Funktion jeder Webanwendung für Usability und Barrierefreiheit. Deaktivieren Sie die Nutzerauswahl nicht für alle Inhalte, sondern nur für UI-Elemente, wenn dies zu einer schlechten oder unerwarteten Nutzererfahrung führt.

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.

Achtung : Wenn Sie viewport-fit=cover anwenden, denken Sie daran, dass Sie jetzt Pixel hinter abgerundeten Ecken und Kerben rendern können. Verwenden Sie daher immer sichere Ränder oder Abstände für wichtige Inhalte und interaktive Elemente.

Ressourcen

• CSS-Medienabfrage für den Darstellungsmodus
• Scrollen steuern: Pull-to-Refresh- und Überlaufeffekte anpassen
• prefers-color-scheme: Hallo Dunkelheit, mein alter Freund
• prefers-reduced-motion: Manchmal ist weniger mehr
• CSS-Funktion „env()“
• CSS-Akzentfarbe
• Overlay für Fenstersteuerelemente