미래의 디스플레이 모드 준비

PWA는 'display_override' 속성을 사용하여 특수 디스플레이 모드를 처리할 수 있습니다.

Thomas Steiner

웹 앱 매니페스트는 브라우저에 프로그레시브 웹 앱과 사용자의 데스크톱 또는 모바일 기기에 설치될 때의 동작을 알려주는 JSON 파일입니다. display 속성을 통해 앱이 실행될 때 표시되는 브라우저 UI를 맞춤설정할 수 있습니다. 예를 들어 주소 표시줄과 브라우저 크롬을 숨길 수 있습니다. 게임은 전체 화면으로 실행되도록 만들 수도 있습니다. 간단히 요약하자면 이 도움말이 작성될 때 지정된 디스플레이 모드는 다음과 같습니다.

이러한 디스플레이 모드는 잘 정의된 대체 체인 ("fullscreen" → "standalone" → "minimal-ui" → "browser")을 따릅니다. 브라우저가 특정 모드를 지원하지 않으면 체인의 다음 디스플레이 모드로 대체됩니다.

display 속성의 단점

이 하드와이어드 대체 체인 접근 방식에는 세 가지 문제가 있습니다.

• 개발자는 특정 브라우저에서 "minimal-ui"가 지원되지 않는 경우 "browser" 디스플레이 모드로 강제 전환되지 않고 "minimal-ui"를 요청할 수 없습니다.
• 개발자는 브라우저가 "standalone" 모드의 창에 뒤로 버튼을 포함하는지 제외하는지와 같은 브라우저 간 차이점을 처리할 방법이 없습니다.
• 탭이 있는 애플리케이션 모드와 같은 탐색은 대체 체인에 자연스러운 위치가 없으므로 현재 동작에서는 이전 버전과 호환되는 방식으로 새로운 디스플레이 모드를 도입할 수 없습니다.

display_override 속성

이러한 문제는 브라우저가 display이전 에 고려하는 display_override 속성으로 해결됩니다. 값은 순서대로 고려되는 문자열 시퀀스이며 지원되는 첫 번째 디스플레이 모드가 적용됩니다. 지원되는 모드가 없으면 브라우저는 display 필드 평가로 대체됩니다.

아래 예에서 디스플레이 모드 대체 체인은 다음과 같습니다. "window-controls-overlay"의 세부정보는 이 도움말의 범위를 벗어납니다.)

1. "window-controls-overlay" (먼저 display_override를 살펴봅니다.)
2. "minimal-ui"
3. "standalone" (display_override가 소진되면 display를 평가합니다.)
4. "minimal-ui" (마지막으로 display 대체 체인을 사용합니다.)
5. "browser"

{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

이전 버전과의 호환성을 유지하기 위해 향후 디스플레이 모드는 display_override가 아닌 display의 값으로만 허용됩니다. display_override를 지원하지 않는 브라우저는 display 속성으로 대체되고 display_override를 알 수 없는 웹 앱 매니페스트 속성으로 무시합니다.

유용한 링크

• 설명하듯이
• 배송 인텐트 대화목록
• Chromium 버그
• Chrome 상태 항목
• 매니페스트 인큐베이션 저장소

감사의 말

display_override 속성은 Daniel Murphy가 공식화했습니다.