background_color
Das background_color
-Manifestmitglied wird verwendet, um eine anfängliche Hintergrundfarbe für Ihre Webanwendung festzulegen. Diese Farbe erscheint im Anwendungsfenster, bevor die Stylesheets Ihrer Anwendung geladen sind.
Syntax
/* Using named color */
"background_color": "aliceblue"
/* Using hexadecimal value */
"background_color": "#f0fbff"
/* Using RGB value */
"background_color": "rgb(240 248 255)"
Werte
background_color
-
Eine Zeichenkette, die einen gültigen Farbwert angibt.
Beschreibung
Das background_color
-Mitglied dient folgenden Zwecken:
- Es bietet einen reibungslosen visuellen Übergang vom Erststart der App bis zum vollständig geladenen Zustand.
- Es verbessert das Benutzererlebnis, während die App-Dateien über das Netzwerk geladen oder von Speichermedien abgerufen werden.
- Es trägt zum Erscheinungsbild des Startbildschirms in einigen Browsern und Betriebssystemen bei, wenn eine installierte Progressive Web App (PWA) gestartet wird.
Es wird empfohlen, dass der Farbwert, den Sie für das background_color
-Manifestmitglied angeben, mit dem Wert der background-color
-Eigenschaft im Stylesheet Ihrer App übereinstimmt. Dadurch wird die visuelle Konsistenz zwischen der anfänglichen Anzeige (einschließlich des Startbildschirms, sofern zutreffend) und der vollständig geladenen Anwendung sichergestellt. Indem Sie diese Farben aufeinander abstimmen, können Sie ein anspruchsvolleres und nahtloseres Erlebnis für Ihre Benutzer schaffen.
Nachdem eine App geladen wurde, hat die background-color
im Stylesheet Vorrang. Das background_color
des Manifests wird nur als temporäre Maßnahme während der anfänglichen Ladephase und zur Erstellung von Startbildschirmen in einigen Umgebungen verwendet.
Hinweis:
Browser können den background_color
-Manifestwert überschreiben, um jede in Ihrem CSS definierte prefers-color-scheme
-Medienabfrage zu unterstützen.
Beispiele
Eine konsistente Hintergrundfarbe für Ihre App festlegen
Stellen Sie sich vor, Sie erstellen eine Wetter-App, und die Hintergrundfarbe im Stylesheet Ihrer App ist wie unten gezeigt festgelegt:
body {
background-color: #87ceeb;
}
Um sicherzustellen, dass Ihre Benutzer von der Einführung bis zur vollständigen Ladephase Ihrer App eine konsistente Hintergrundfarbe sehen, würden Sie dieselbe Hintergrundfarbe in Ihrer Manifestdatei der App wie folgt festlegen:
{
"name": "WeatherPro",
"display": "standalone",
"background_color": "#87ceeb",
"theme_color": "#4682b4",
"icons": [
{
"src": "icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
Spezifikationen
Specification |
---|
Web Application Manifest # background_color-member |
Browser-Kompatibilität
Siehe auch
display
-Manifestmitgliedtheme_color
-Manifestmitglied- Passen Sie das Design und die Hintergrundfarben Ihrer App an, wenn Sie PWAs erstellen