웹뷰 작업시 고려해야 할 부분

뷰포트

safe area 는 항상 염두해 두어야 한다.
safe area영역의 너비나 높이는 css에서 환경변수로 접근할 수 있다.

/* iOS 11.0 버전 */
constant(safe-area-inset-top)
constant(safe-area-inset-bottom)
constant(safe-area-inset-left)
constant(safe-area-inset-right)

/* iOS 11.2 이상 */
env(safe-area-inset-top)
env(safe-area-inset-bottom)
env(safe-area-inset-left)
env(safe-area-inset-right)

만약 제대로 접근이 안된다면 네이티브개발자분께 여쭤보거나, document의 메타태그가 제대로 작성되어있는지 확인해보자 (참고)

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

Alert

Web API를 이용하여 네이티브 Alert을 띄울경우, 간단한 메세지만 세팅이 가능하다.
아래처럼 타이틀과 메세지으로 나뉘어진 Alert을 띄우고 싶을 경우, 네이티브개발자에게 인터페이스를 뚫어달라고 해야 한다.

또한 Native Alert이 아닌 Browser에서 Modal형태로 무언가를 보여줄 경우, Dimmed가 웹뷰 영역에만 적용됨을 항상 기억하자.

네이티브와의 통신

전직장에서도 경험했지만, 네이티브의 기능을 사용할 수 있도록 통신할 수 있는 방법은 크게 2가지다

• 딥링크 url을 활용한 통신
• 웹뷰 window 객체에 별도의 인터페이스를 뚫어준다.

후자가 깔끔하다.
다양한 데이터 포맷을 전달할수도 있기떄문에, 콜백과 같은 방식도 활용이 가능하기 때문이다.