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

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

Thomas Steiner

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

속성 사용
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_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를 알 수 없는 웹 앱 매니페스트 속성으로 무시합니다.

감사의 말

display_override 속성은 다니엘 머피가 공식화했습니다.