주소 표시줄의 테마 색상을 설정하지 않습니다.
Published on • Updated on
Translated to: English, Español, Português, 中文, Pусский, 日本語
프로그레시브 웹앱(PWA)의 브랜드 색상과 일치하도록 브라우저의 주소 표시줄 테마를 지정하면 더욱 몰입도 높은 사용자 환경을 제공합니다.
브라우저 호환성
작성 당시에 브라우저 주소 표시줄 테마는 Android 기반 브라우저에서 지원됩니다. 업데이트는 브라우저 호환성을 참조하세요.
Lighthouse 테마 색상 감사가 실패하는 이유
Lighthouse는 주소 표시줄에 테마를 적용하지 않은 페이지에 플래그를 지정합니다.
Lighthouse가 페이지의 HTML에서 theme-color 메타 태그를, 웹앱 매니페스트에서 theme_color 속성을 찾지 못하면 감사가 실패합니다.
Lighthouse는 값이 유효한 CSS 색상 값인지 테스트하지 않습니다.
In the Lighthouse report UI the full PWA badge is given when you pass all of the audits in all of the PWA subcategories (Fast and reliable, Installable, and PWA optimized).
주소 표시줄의 테마 색상을 설정하는 방법
1단계: 브랜드화하려는 모든 페이지에 theme-color 메타 태그 추가
theme-color 메타 태그는 사용자가 일반 웹페이지로 여러분의 사이트를 방문할 때 주소 표시줄에 브랜드가 표시되도록 합니다. 태그의 content 속성을 모든 유효한 CSS 색상 값으로 설정합니다.
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="theme-color" content="#317EFB"/>
…
</head>
…Google의 Android용 Chrome 39의 theme-color 지원에서 theme-color 메타 태그에 대해 자세히 알아보세요.
2단계: 웹앱 매니페스트에 theme_color 속성 추가
웹앱 매니페스트의 theme_color 속성은 사용자가 홈 화면에서 PWA를 시작할 때 주소 표시줄에 브랜드가 표시되도록 합니다. theme-color 메타 태그와는 달리 매니페스트에서 한 번만 정의하면 됩니다. 속성을 유효한 CSS 색상 값으로 설정합니다.
{
"theme_color": "#317EFB"
…
}브라우저는 매니페스트의 theme_color에 따라 앱의 모든 페이지에 주소 표시줄 색상을 설정합니다.
참고자료
Updated on • Improve article