PWA - iOS Home indicator 대응

PWA로 윈도우 환경을 모방하는 프로젝트 중, 위와 같은 문제가 발생했다.

• 하단의 Home Indicator 영역을 잡지 못하는 것은 React-Native 였다면 기본 중의 기본이었겠지만 웹에서는 달랐다.

<meta name="viewport" content="viewport-fit=cover" />

.notch-safe {
  padding-bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

• 먼저 MDN을 따라 추가해 본다. 뷰포트를 모든 스크린을 차지하게 해주고, 브라우저에서 지정된 값으로 넣어주었지만, 웹에서는 문제 없이 작동하지만 설치된 PWA에서는 그대로였다.

• 어느 정도 서칭을 해본 결과 크롬 기반에서 실행되는 PWA에서는 설치 환경에서 먹히지 않는다는 이야기가 있어서, 결국 커스텀 코드로 해결하기로 했다.

//todo: 언젠가 바텀 패딩이 더 잡힌다면 notch-safe가 pwa를 지원하는 것임.
const { isMobile } = useIsMobile();
const { hasIOSBottomBar } = useHasIOSBottomBar();
return (

<nav
	style={{ paddingBottom: isMobile && hasIOSBottomBar ? 55 : 0 }}
			className={`fixed left-0 bottom-0 bg-primary-window-background w-full h-8 border-t-2 border-t-white flex justify-start gap-2 notch-safe pb-[55px]`}
>	
...
</nav>

여기서는 총 세 가지의 조건을 확인하고 있다.
1. 모바일 화면 크기인가?
2. PWA 설치 환경인가?
3. Iphone X 의 크기 이상인가?