Wenn du die Adressleiste des Browsers an die Markenfarben deiner Progressive Web App (PWA) anpasst, kannst du die App noch ansprechender gestalten.
Browserkompatibilität
Seit Dezember 2022 wird das Design der Adressleiste des Browsers in Android-basierten Browsern, Google Chrome und Microsoft Edge unterstützt. Informationen zu Updates finden Sie unter Browserkompatibilität.
So funktioniert die Farbprüfung des Lighthouse-Designs nicht
Lighthouse kennzeichnet Seiten ohne Design in der Adressleiste:
![Bei der Lighthouse-Prüfung wird angezeigt, dass die Adressleiste nicht mit den Farben der Seite übereinstimmt](https://developer.chrome.com/static/docs/lighthouse/pwa/themed-omnibox/image/lighthouse-audit-showing-a2ac9a5b8e2a5.png?authuser=6&hl=de)
Die Prüfung schlägt fehl, wenn Lighthouse kein theme-color
-Meta-Tag im HTML-Code der Seite und die Property theme_color
im Manifest der Web-App findet.
Lighthouse prüft nicht, ob es sich bei den Werten um gültige CSS-Farbwerte handelt.
Designfarbe für die Adressleiste festlegen
Schritt 1: Fügen Sie auf jeder Seite, die Sie mit Ihrem Branding versehen möchten, ein theme-color
-Meta-Tag hinzu.
Mit dem Meta-Tag theme-color
wird dafür gesorgt, dass die Adressleiste gebrandet wird, wenn ein Nutzer die Website als normale Webseite besucht.
Legen Sie das Attribut content
des Tags auf einen gültigen CSS-Farbwert fest:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="theme-color" content="#317EFB"/>
…
</head>
…
Weitere Informationen zum Meta-Tag theme-color
finden Sie unter Unterstützung von theme-color
in Chrome 39 für Android.
Schritt 2: Property theme_color
zum Manifest Ihrer Web-App hinzufügen
Mit der Eigenschaft theme_color
in Ihrem Web-App-Manifest wird dafür gesorgt, dass die Adressleiste markenbezogen wird, wenn ein Nutzer Ihre PWA auf dem Startbildschirm startet.
Im Gegensatz zum Meta-Tag theme-color
müssen Sie dies nur einmal im Manifest definieren.
Legen Sie die Eigenschaft auf einen gültigen CSS-Farbwert fest:
{
"theme_color": "#317EFB"
…
}
```
The browser will set the address bar color of every page of your app
according to the manifest's `theme_color`.
## Resources
- [Source code for **Does not set a theme color for the address bar** audit](https://github.com/GoogleChrome/lighthouse/blob/main/core/audits/themed-omnibox.js)
- [Add a web app manifest](https://web.dev/articles/add-manifest)
- [Support for `theme-color` in Chrome 39 for Android](/blog/support-for-theme-color-in-chrome-39-for-android)