Die Adressleiste des Browsers lässt sich so an die Markenfarben deiner Progressive Web App (PWA) anpassen. Das sorgt für ein immersives Nutzererlebnis.
Browserkompatibilität
Seit Dezember 2022 werden Designs für die Adressleiste des Browsers in Android-basierten Browsern, Google Chrome und Microsoft Edge unterstützt. Weitere Informationen finden Sie unter Browserkompatibilität.
So funktioniert die Farbprüfung des Lighthouse-Designs nicht
Lighthouse kennzeichnet Seiten, für die kein Design festgelegt wurde:
Die Prüfung schlägt fehl, wenn Lighthouse weder ein theme-color
-Meta-Tag im HTML-Code der Seite noch eine theme_color
-Eigenschaft im Web-App-Manifest findet.
Lighthouse prüft nicht, ob die Werte gültige CSS-Farbwerte sind.
Designfarbe für Adressleiste festlegen
Schritt 1: Fügen Sie auf jeder Seite, die Sie mit einem Branding versehen möchten, ein theme-color
-Meta-Tag hinzu.
Mit dem Meta-Tag theme-color
wird dafür gesorgt, dass die Adressleiste mit einer Marke versehen ist, wenn ein Nutzer Ihre Website als normale Webseite besucht.
Legen Sie für das Attribut content
des Tags 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 im Google-Artikel Unterstützung für theme-color
in Chrome 39 für Android.
Schritt 2: theme_color
-Property dem Manifest Ihrer Web-App hinzufügen
Mit dem Attribut theme_color
in Ihrem Web-App-Manifest wird dafür gesorgt, dass die Adressleiste mit Marken versehen ist, wenn ein Nutzer Ihre PWA auf dem Startbildschirm startet.
Anders als beim Meta-Tag theme-color
musst du dies nur einmal im Manifest definieren.
Legen Sie für die Eigenschaft 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)