휴대폰 전체화면과 서비스 워커 없는 홈 화면 앱

휴대폰에서 주소창과 상태 표시줄이 화면을 잡아먹는 문제를 손봤다. 커밋은 두 개다.

한 일

• 터치 모드에서 출발 버튼을 누를 때 전체화면을 시도하고, 전체화면이면 가로 고정도 시도한다. 메뉴와 터치 HUD 에 전체화면 버튼도 따로 두었다. 아이폰 Safari 와 이미 설치된 앱에서는 이 버튼을 숨긴다
• 홈 화면에 추가하면 앱처럼 열리게 웹 앱 매니페스트(전체화면·가로·아이콘)를 넣었다. 아이폰은 처음 한 번 “공유 → 홈 화면에 추가” 를 안내하고, 안드로이드는 설치 제안이 오면 “앱으로 설치” 버튼을 보여 준다
• 설치한 앱에서 위쪽 버튼이 상태 표시줄 밑에 가려지지 않게 safe-area 여백을 줬다
• 캐릭터 순서를 바꿔 처음 온 사람은 머겅이로 시작한다. 이미 고른 캐릭터는 그대로 유지된다. 앱 아이콘도 머겅이로 코드에서 그렸다

기술 메모

서비스 워커를 일부러 넣지 않았다. 하루에도 여러 번 배포하는데 서비스 워커가 옛 파일을 붙잡고 있으면 배포 뒤에도 옛 버전이 열릴 수 있다. 게임은 서버와 클라이언트가 같은 규약을 써야 해서 이게 특히 곤란하다. 홈 화면 추가와 전체화면만 원했기 때문에 매니페스트와 아이폰용 meta 태그만으로 해결했다. 아이콘 파일 이름은 해시 붙은 파일을 오래 캐시하는 규칙에 걸리지 않게 짧게 지었다.