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

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이 아닌 display_override 값으로만 허용됩니다. display_override를 지원하지 않는 브라우저는 display 속성으로 대체되고 display_override는 알 수 없는 웹 앱 매니페스트 속성으로 무시됩니다.

유용한 링크

• 설명
• 배송 의도 스레드
• Chromium 버그
• Chrome 상태 항목
• 매니페스트 인큐베이션 저장소

감사의 말

display_override 속성은 Daniel Murphy에 의해 공식화되었습니다.