Zenga는 모바일을 겨냥한 서비스이다.
하지만 모바일 웹에서 실행시킬 경우 아래와 같이 상태표시줄(주소창, 브라우저 버튼)이 함께 보여서,
원하지 않는 스크롤이 생기며 불편한 사용자 경험을 제공했다.
이를 해결하기 위해 구글링을 하던 중 PWA에 대해 알게되었다.
PWA
PWA(Progressive Web App)는 웹을 데스크톱 및 모바일에서 설치 가능하고 앱과 유사한 환경을 제공합니다. 앱과 유사한 경험을 지원하기 위해 PWA(Progressive Web App)는 푸쉬 알림(Push notification), 설치(install), 오프라인 지원 등의 기능을 지원하고 있습니다.
요약하자면 PWA는 모바일에서 브라우저의 "홈 화면에 바로가기 추가" 와 같은 기능을 통해 설치를 하고 앱과 유사한 환경에서 사용할 수 있는 것이다.
manifest
manifest 는 웹을 데스크톱 및 모바일장치에 설치할때 이에 대한 아이콘, 이름, 시작시 시작해야하는 경로 등의 내용을 브라우저에게 알려주는 json파일 입니다. manifest 을 설정하게 되면 해당 웹을 설치할때의 아이콘을 설정할 수 있고 해당 앱을 들어갈때 스플래시 이미지를 보여주어 좀더 App과 가깝게 느낄수 있도록 해줄 수 있습니다.
그리고 manifest 파일을 통해 브라우저에게 아이콘, 이름 등 다양한 속성과 값을 알려줄 수 있다.
문제를 해결할 수 있는 속성은 display였다.
display
display 속성은 설치한 웹을 실행할 때 브라우저처럼 보일지 앱처럼 보일지 전체화면으로 보일지 등의 설정을 할 수 있습니다. 속성 옵션으로는 fullscreen, minimul-ui, standalone, browser가 있습니다.
| 속성 | 설명 |
|---|---|
| browser | 일반 브라우저와 동일하게 보입니다. |
| standalone | 다른 앱들처럼 최상단에 상태표시줄을 제외한 전체화면으로 보입니다. |
| fullscreen | 상태표시줄도 제외한 전체화면으로 보여줍니다.(ex. 게임) |
| minimul-ui | fullscreen 과 비슷하지만 뒤로가기, 새로고침등 최소한의 영역만 제공합니다.(모바일 크롬 전용) |
일반적인 앱처럼 보일 수 있는 standalone 값을 통해 아래와 같이 수정하였다.
