dopasowywanie motywu adresu URL przeglądarki do kolorów marki. progresywnej aplikacji internetowej (PWA) zapewniają użytkownikom lepsze wrażenia.
Zgodność z przeglądarką
Od grudnia 2022 roku dodawanie tematów na pasku adresu przeglądarki jest obsługiwane na urządzeniach Przeglądarki na Androida, Google Chrome i Microsoft Edge. Zobacz Zgodność z przeglądarką .
Niepowodzenie kontroli kolorów motywu Lighthouse
Lighthouse oznacza strony, które nie mają przypisanego motywu do paska adresu:
![Audyt Lighthouse pokazujący, że pasek adresu nie ma związku z kolorami strony](https://developer.chrome.com/static/docs/lighthouse/pwa/themed-omnibox/image/lighthouse-audit-showing-a2ac9a5b8e2a5.png?authuser=9&hl=pl)
Kontrola nie powiedzie się, jeśli Lighthouse nie znajdzie metatagu theme-color
w kodzie strony
HTML i usługę theme_color
w pliku manifestu aplikacji internetowej.
Pamiętaj, że Lighthouse nie sprawdza, czy wartości są prawidłowymi wartościami kolorów CSS.
Jak ustawić kolor motywu na pasku adresu
Krok 1. Dodaj metatag theme-color
do każdej strony, do której chcesz dodać markę
Metatag theme-color
gwarantuje, że na pasku adresu pojawi się marka,
użytkownik odwiedza Twoją witrynę jako zwykłą stronę internetową.
Ustaw dowolną prawidłową wartość atrybutu content
tagu CSS:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="theme-color" content="#317EFB"/>
…
</head>
…
Więcej informacji o metatagu theme-color
znajdziesz w nagłówku strony Google
Obsługa funkcji theme-color
w Chrome 39 na Androida.
Krok 2. Dodaj właściwość theme_color
do pliku manifestu aplikacji internetowej
Właściwość theme_color
w pliku manifestu aplikacji internetowej zapewnia, że adres
jest oznaczony marką, gdy użytkownik uruchamia Twoją aplikację PWA na ekranie głównym.
W przeciwieństwie do metatagu theme-color
potrzebujesz tylko
, aby zdefiniować tę wartość raz w polu manifestu.
Ustaw tę właściwość na dowolną prawidłową wartość koloru CSS:
{
"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)