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-Manifest-Element wird verwendet, um eine anfängliche Hintergrundfarbe für Ihre Webanwendung anzugeben. 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-Element erfüllt folgende Zwecke:

  • Es sorgt für einen sanften visuellen Übergang vom anfänglichen Start der App bis zu ihrem vollständig geladenen Zustand.
  • Verbessert die Benutzererfahrung, während die App-Dateien über das Netzwerk geladen oder von einem Speichermedium abgerufen werden.
  • Trägt zum Erscheinungsbild des Splashscreens 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-Manifest-Element angeben, mit dem Wert der background-color-Eigenschaft in Ihrem Anwendungs-Stylesheet übereinstimmt. Dies gewährleistet visuelle Konsistenz zwischen der anfänglichen Anzeige (einschließlich des Splashscreens, falls zutreffend) und der vollständig geladenen Anwendung. Indem Sie diese Farben anpassen, können Sie ein glatteres und nahtloseres Erlebnis für Ihre Benutzer schaffen.

Nachdem eine App geladen wurde, hat die background-color im Stylesheet Vorrang. Das background_color aus dem Manifest wird nur als temporäre Maßnahme während der anfänglichen Ladephase und zur Erstellung von Splashscreens in einigen Umgebungen verwendet.

Hinweis: Browser können den background_color-Manifestwert überschreiben, um jede in Ihrer App's CSS definierte prefers-color-scheme-Media-Query zu unterstützen.

Beispiele

Festlegen einer konsistenten Hintergrundfarbe für Ihre App

Stellen Sie sich vor, Sie bauen eine Wetter-App und die Hintergrundfarbe in Ihrem App-Stylesheet ist wie unten gezeigt festgelegt:

css
body {
  background-color: #87ceeb;
}

Um sicherzustellen, dass Ihre Benutzer eine konsistente Hintergrundfarbe vom Start bis zur vollständigen Ladung Ihrer App sehen, würden Sie dieselbe Hintergrundfarbe in der Manifestdatei Ihrer App wie folgt festlegen:

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