background_color
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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 erfüllt folgende Zwecke:
- Es bietet einen reibungslosen visuellen Übergang vom ersten Start der App zu ihrem vollständig geladenen Zustand.
- Es verbessert die Benutzererfahrung, 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 von Ihnen für das background_color
-Manifestmitglied angegebene Farbwert mit dem background-color
-Eigenschaftswert im Stylesheet Ihrer App übereinstimmt. Dies gewährleistet eine visuelle Konsistenz zwischen der anfänglichen Anzeige (einschließlich des Startbildschirms, falls zutreffend) und der vollständig geladenen Anwendung. Durch die Angleichung dieser Farben können Sie ein professionelleres und nahtloseres Benutzererlebnis schaffen.
Nachdem eine App geladen wurde, hat die background-color
im Stylesheet Vorrang. Das background_color
im Manifest wird nur vorübergehend während der anfänglichen Ladephase und zur Erstellung von Startbildschirmen in bestimmten Umgebungen verwendet.
Hinweis:
Browser können den background_color
-Manifestwert überschreiben, um eine in Ihrem CSS definierte prefers-color-scheme
-Media-Abfrage zu unterstützen.
Beispiele
Eine konsistente Hintergrundfarbe für Ihre App festlegen
Stellen Sie sich vor, Sie erstellen eine Wetter-App, und die Hintergrundfarbe in Ihrem Stylesheet ist wie unten gezeigt festgelegt:
body {
background-color: #87ceeb;
}
Um sicherzustellen, dass Ihre Benutzer eine konsistente Hintergrundfarbe vom Start bis zum vollständigen Laden Ihrer App sehen, würden Sie die gleiche Hintergrundfarbe in der Manifestdatei Ihrer App festlegen wie folgt:
{
"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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
background_color |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
Siehe auch
display
Manifestmitgliedtheme_color
Manifestmitglied- Passen Sie das Thema und die Hintergrundfarben Ihrer App an, wenn Sie PWAs erstellen.