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"
에 관한 세부정보는 이 도움말에서 다루지 않습니다.
"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
속성은 다음과 같이 형식화되었습니다.
대니얼 머피