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
-
Ein String, der einen gültigen Farbwert angibt.
Beschreibung
Das background_color
-Mitglied dient den folgenden Zwecken:
- Bietet einen gleitenden visuellen Übergang vom anfänglichen Start der App zu ihrem vollständig geladenen Zustand.
- Verbessert die Benutzererfahrung, während die App-Dateien über das Netzwerk geladen oder von Speichermedien abgerufen werden.
- 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 für das background_color
-Manifestmitglied angegebene Farbwert dem Wert der background-color
-Eigenschaft in Ihrem App-Stylesheet entspricht. Dies stellt sicher, dass visuelle Konsistenz zwischen der anfänglichen Anzeige (einschließlich des Startbildschirms, wenn zutreffend) und der vollständig geladenen Anwendung besteht. Durch die Abstimmung dieser Farben können Sie ein verfeinertes und nahtloses Erlebnis für Ihre Benutzer schaffen.
Nachdem eine App geladen ist, hat die background-color
im Stylesheet Vorrang. Das background_color
-Manifest 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 außer Kraft setzen, 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 bauen eine Wetter-App, und die Hintergrundfarbe in Ihrem App-Stylesheet ist wie unten dargestellt festgelegt:
body {
background-color: #87ceeb;
}
Um sicherzustellen, dass Ihre Benutzer von der App-Start bis zum vollständigen Laden eine konsistente Hintergrundfarbe sehen, würden Sie dieselbe Hintergrundfarbe in Ihrer App-Manifestsdatei 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
BCD tables only load in the browser
Siehe auch
display
-Manifestmitgliedtheme_color
-Manifestmitglied- Passen Sie die Theme- und Hintergrundfarben Ihrer App an beim Erstellen von PWAs