PWA는 'display_override' 속성을 사용하여 특수 디스플레이 모드를 처리할 수 있습니다.
웹 앱 매니페스트는 프로그레시브 웹 앱 및 사용자의 데스크톱 또는 휴대기기에 설치되었을 때
어떻게 동작해야 하는지 브라우저에 알리는 JSON 파일입니다.
display 속성을 통해 앱이 실행될 때 표시할 브라우저 UI를 맞춤설정할 수 있습니다. 예를 들어 주소 표시줄과 Chrome
브라우저를 숨길 수 있습니다 게임을 전체 화면으로 실행할 수도 있습니다.
간단히 요약하면 아래는 이 도움말을 작성할 당시에 지정된 디스플레이 모드입니다.
| 속성 | 용도 |
|---|---|
fullscreen |
브라우저 UI 없이 웹 애플리케이션을 열고 사용 가능한 표시 영역 전체를 차지합니다. |
standalone |
웹 앱을 열어 독립형 앱처럼 보이도록 합니다. 앱은 브라우저와 별개로 자체 창에서 실행되며 URL 표시줄과 같은 표준 브라우저 UI 요소를 숨깁니다. |
minimal-ui |
이 모드는 standalone와 유사하지만 탐색 (예: 뒤로 및 새로고침)을 제어하기 위한 최소한의 UI 요소 집합을 사용자에게 제공합니다.
|
browser |
표준 브라우저 환경입니다. |
이러한 표시 모드는 잘 정의된 대체 체인("fullscreen" → "standalone" → "minimal-ui" → "browser")을 따릅니다. 브라우저가 지정된 모드를 지원하지 않으면 체인의 다음 표시 모드로 대체됩니다.
display 속성의 단점
이 하드웨어 대체 체인 접근 방식의 문제는 세 가지입니다.
- 특정 브라우저에서
"minimal-ui"를 지원하지 않는 경우 개발자가"browser"디스플레이 모드로 강제 전환되지 않고는"minimal-ui"을 요청할 수 없습니다. - 개발자가
"standalone"모드 창에 뒤로 버튼을 포함하거나 제외하는 등, 브라우저 간 차이를 처리할 방법은 없습니다. - 현재 동작으로 인해 이전 버전과 호환되는 방식으로 새 디스플레이 모드를 도입할 수 없습니다. 탭으로 구성된 애플리케이션 모드와 같은 탐색 분석에는 대체 체인에서 자연스러운 위치가 없기 때문입니다.
display_override 속성
이러한 문제는 브라우저가 display 속성 전에 고려하는 display_override 속성으로 해결됩니다. 값은 순서대로 간주되는 문자열 시퀀스이며 지원되는 첫 번째 디스플레이 모드가 적용됩니다. 아무것도 지원되지 않으면 브라우저는 display 필드 평가로 대체합니다.
아래 예에서 디스플레이 모드 대체 체인은 다음과 같습니다.
("window-controls-overlay"의 세부정보는 이 도움말의 범위에 포함되지 않습니다.)
"window-controls-overlay"(먼저display_override를 살펴보겠습니다.)"minimal-ui""standalone"(display_override가 소진되면display평가)"minimal-ui"(마지막으로display대체 체인을 사용합니다.)"browser"
{
"display_override": ["window-controls-overlay", "minimal-ui"],
"display": "standalone",
}
이전 버전과의 호환성을 유지하기 위해 향후 모든 디스플레이 모드는 display_override 값으로만 허용되지만 display로는 허용되지 않습니다.
display_override를 지원하지 않는 브라우저는 display 속성으로 돌아가고 display_override를 알 수 없는 웹 앱 매니페스트 속성으로 무시합니다.
유용한 링크
감사의 말
display_override 속성은 다니엘 머피에 의해 공식화되었습니다.