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

json
/* 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:

css
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:

json
{
  "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