프로그레시브 웹 앱: 상태 표시줄 구성

PWA(Progressive Web App)는 많은 추진력을 얻기 시작했으며 Uber, Twitter, Instagram 등을 비롯한 주요 기술 회사에서 채택하고 있습니다. 첫 번째 PWA를 개발하는 동안 크로스 플랫폼 사용자 정의 상태 표시줄을 지원하는 것이 예상보다 더 큰 도전이었습니다. 이것은 다른 사람들이 노치가 있는 장치를 포함하여 Android 및 iOS 장치 모두에서 작동하는 PWA 상태 표시줄을 빠르게 사용자 지정하는 데 도움이 되는 빠른 게시물입니다.

프로그레시브 웹 앱의 화면 상단에 있는 상태 표시줄(일반적으로 시간 및 배터리 상태 표시)을 변경하려면 앱에 대한 몇 가지 속성 구성을 사용하여 완전한 기본 모양과 느낌을 제공해야 합니다.

기계적 인조 인간

Chrome, Firefox 및 Opera에서는 메타 태그를 사용하여 상태 표시줄의 색상을 정의할 수 있습니다.

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#014473">

예시:

아이폰 OS

안타깝게도 iOS 장치의 상태 표시줄을 사용자 정의하는 방법의 수는 상당히 제한되어 있지만 Apple은 상태 표시줄을 사용자 정의할 수 있는 메타 태그apple-mobile-web-app-status-bar-style를 제공합니다. default , black 및 black-translucent 의 세 가지 개별 설정을 사용할 수 있습니다. 기본값은 default 입니다.

이 메타 태그는 메타 태그apple-apple-mobile-web-app-capable를 추가하지 않는 한 효과가 없습니다.

<meta name="apple-mobile-web-app-capable" content="yes">

기본

기본 설정은 검은색 텍스트와 기호가 있는 흰색 배경입니다.

<meta name="apple-mobile-web-app-status-bar-style" content="default">

예시:

검은색

검은색 설정에는 검은색 배경과 검은색 텍스트 및 기호가 있어 완전히 검은색으로 보입니다.

<meta name="apple-mobile-web-app-status-bar-style" content="black">

예시:

검정 반투명

검정 반투명 설정에는 흰색 텍스트와 기호가 있습니다. 웹 앱의 본문과 동일한 배경색을 사용합니다.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

body {
    background-color: #014473;
}

예시:

라이브 데모

Headlines App

참조:

Android Support

Safari HTML Reference

Safari Web Content Guide

Demo App - Github