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

PWA는 'display_override'를 사용할 수 있습니다. 속성을 사용하여 특수 표시 모드를 처리합니다.

웹 앱 매니페스트는 브라우저에 Progressive 웹 앱 및 사용자의 데스크톱이나 휴대기기에 설치될 때의 작동 방식 display 속성을 통해 앱이 실행될 때 표시되는 브라우저 UI를 맞춤설정할 수 있습니다. 예를 들어 주소 표시줄 및 브라우저 크롬. 게임을 전체 화면으로 실행하도록 만들 수도 있습니다. 간단히 요약하자면, 이 도움말이 작성된 시점에 지정된 표시 모드는 다음과 같습니다.

속성 용도
fullscreen 브라우저 UI 없이 웹 애플리케이션을 열고 표시할 수 있습니다.
standalone 웹 앱을 열어 독립형처럼 보이고 느껴집니다. 있습니다. 앱이 브라우저와는 별개인 자체 창에서 실행됩니다. URL 표시줄과 같은 표준 브라우저 UI 요소를 숨깁니다.
minimal-ui 이 모드는 standalone와 유사하지만 사용자에게 탐색을 제어하기 위한 최소한의 UI 요소 집합 (예: 다시 로드)으로 설정할 수 있습니다.
browser 표준 브라우저 환경

이러한 표시 모드는 잘 정의된 대체 체인을 따릅니다. ("fullscreen""standalone""minimal-ui""browser"). 브라우저가 특정 URL을 지원하지 않는 경우 체인의 다음 표시 모드로 대체됩니다.

display 속성의 단점

이 하드웨어에 내장된 대체 체인 접근 방식의 문제 3가지는 다음과 같습니다.

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

display_override 속성

이러한 문제는 브라우저가 이전에 고려하는 display_override 속성으로 해결됩니다. display 속성 값은 순서대로 간주되는 문자열의 시퀀스이고 먼저 지원되는 표시 모드가 적용됩니다. 아무것도 지원되지 않는 경우 브라우저에서 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 속성은 다음과 같이 형식화되었습니다. 대니얼 머피