Passen Sie das Design und die Hintergrundfarben Ihrer App an
Beim Erstellen von Progressive Web Apps (PWAs) ist es wichtig, nicht nur das Erscheinungsbild der Inhalte Ihrer App zu berücksichtigen, sondern auch, wie die App auf dem Gerät des Benutzers aussieht, sobald sie installiert ist.
Eine Möglichkeit, das Fenster anzupassen, in dem Ihre App erscheint, besteht darin, die theme_color und background_color Mitglieder des Web-App-Manifests zu verwenden.
Indem Sie die theme_color und background_color Mitglieder in Ihrem PWA-Manifest definieren, können Sie eine verfeinerte Benutzererfahrung schaffen. Diese kleinen Details können dazu beitragen, dass sich Ihre PWA mehr wie eine OS-native App anfühlt und den Benutzern vertrauter erscheint.
Passen Sie die Hintergrundfarbe des App-Fensters an
Das background_color Manifestmitglied definiert die Farbe, die im Anwendungsfenster erscheint, bevor die Stylesheets Ihrer App geladen sind.
Da diese Farbe erscheint, bevor Ihre Stylesheets geladen sind, sollten Sie den Wert auf denselben Farbwert wie die background-color CSS-Eigenschaft im Stylesheet Ihrer Anwendung setzen. Dies stellt einen reibungslosen visuellen Übergang zwischen dem Start der Webanwendung und dem Laden ihrer Inhalte sicher.
Der Wert kann jede gültige CSS <color> sein. In diesem Beispiel einer Web-App-Manifestdatei ist die Hintergrundfarbe der Anwendung auf die benannte Farbe peachpuff gesetzt:
{
"name": "My app",
"start_url": "/",
"icons": [
{
"src": "icon.webp",
"sizes": "256x256",
"type": "image/webp"
}
],
"display": "standalone",
"background_color": "peachpuff"
}
Die Anwendung lädt auch ein Stylesheet, das die gleiche Farbe für den Hintergrund des body-Elements anwendet:
body {
background-color: peachpuff;
}
Der folgende Screenshot zeigt den obigen Code in Aktion. Die PWA, die diesen Code verwendet, ist auf Windows installiert, und der Screenshot zeigt, wie das Anwendungsfenster aussieht, bevor der Inhalt der App geladen ist:
Definieren Sie eine Designfarbe
Das theme_color Mitglied in Ihrem PWA-Manifest definiert die Standardfarbe der Betriebssystem- und Browser-UI-Elemente, die in der Anwendung verwendet werden.
Verschiedene Geräte, Betriebssysteme und Browser wenden das theme_color Mitglied unterschiedlich an. Zum Beispiel:
- Auf mobilen Geräten wird die Designfarbe auf die Statusleiste angewendet.
- Auf Desktop-Betriebssystemen wird die Designfarbe verwendet, um die Titelleiste Ihres eigenständigen App-Fensters anzupassen.
Wählen Sie eine theme_color, die zum Gesamtdesign und zur Markenidentität Ihrer PWA passt und sowohl auf verschiedenen Geräten als auch Plattformen gut funktioniert, um ein konsistentes Benutzererlebnis zu gewährleisten.
Wie bei background_color ist jeder <color> Wert gültig. In diesem Beispiel einer Web-App-Manifestdatei ist die theme_color auf rgb(255 218 185), das RGB Äquivalent von peachpuff, gesetzt:
{
"name": "My app",
"start_url": "/",
"icons": [
{
"src": "icon.webp",
"sizes": "48x48",
"type": "image/webp"
}
],
"display": "standalone",
"background_color": "peachpuff",
"theme_color": "rgb(255 218 185)"
}
Der folgende Screenshot zeigt den obigen Code in Aktion, wenn die App unter Windows installiert ist, wo das theme_color Manifestmitglied als Farbe der Titelleiste verwendet wird:
Beziehung zum Wert des theme-color Meta-Elements
Der theme-color Wert für das name Attribut des <meta> HTML-Elements kann verwendet werden, um pro Webseite eine Designfarbe zu definieren. Dies unterscheidet sich vom theme_color Manifestmitglied, das Sie nur einmal global für Ihre App definieren.
Wenn beide gesetzt sind, überschreibt der theme-color Meta-Elementwert das theme_color Manifestmitglied. Dies ermöglicht es Ihnen, eine globale Farbe für Ihre App zu definieren und sie auf bestimmten Seiten zu überschreiben.
Beachten Sie, dass in einigen Browsern, wie Safari auf macOS und Chrome auf Android, der theme-color Meta-Elementwert auch zur Gestaltung der Browser-UI verwendet wird.