[Frontend] 웹 개발 시점의 iOS Native와 Webview, Javascript 통신 해결기

---

개요

 

이번에 개발중인 웹을 iOS Native로 이식하여, 하이브리드 어플을 개발하는 경험을 해 보았습니다. 개발중 주요 이슈 중 하나가 iOS Native 어플의 푸시 알림 서비스 였습니다.

 

푸시 알림은 Firebase Cloud Message를 이용하여 개발을 하였는데, 푸시 알림을 받을수 있는 디바이스의 Token을 기기로 부터 추출해야 되는 이슈가 있었습니다. 웹뷰에서 네이티브로 통신하는 부분도 있었고, 반대로 네이티브가 웹뷰의 함수를 호출하는 부분도 있었습니다. 해당 이슈를 해결한 방법 등에 대해 작성해 보았습니다.

---

Webview -> iOS Native 함수 호출

 

웹뷰에서 네이티브의 함수 호출은 postMessage 함수를 이용해서 통신 하였습니다.

postMessage는 window 객체를 사용해 호출하게 됩니다. 

// index.js
window.webkit.messageHandlers.{scriptHandler}.postMessage({parameter});

// 예시
window.webkit.messageHandlers.requestToken.postMessage(email);

iOS Native 개발에서 스크립트 핸들러와 어떤 파라미터를 받는지 알려주면 해당 부분에 삽입해 postMessage 함수를 사용할 수 있습니다.

 

참고 : MDN web docs - postMessage 함수 문서

---

iOS Native -> Webview 함수 호출

 

위와는 반대로 네이티브에서 웹뷰의 함수 호출을 하는 경우도 있습니다.

해당 통신의 경우 window 객체를 사용해 호출 하게 됩니다.

// index.js
window.{funcName} = ({parameter}) => {
	// Function 내용
};

// 예시 - iOS Native에서 setToken이라는 함수를 실행 한다.
window.setToken = (email, token) => {
	console.log(`${email}의 토큰은 ${token}입니다.`);
}

iOS Native에서 호출하는 함수의 이름과 파라미터를 알려주면, window 객체에 함수를 선언하면 네이티브에서 웹뷰의 함수를 호출 할 수 있습니다.

---

결론

 

iOS 개발자가 postMessage를 활용 하면 된다는 것 만 알려준 이후 나머지 정보를 검색하여 확인 해 보았습니다. 그런데 iOS 네이티브(Swift) 시점에서의 자료는 많았지만, 웹 개발(Javascript) 시점에서의 자료는 찾기 어려웠습니다. 이번 글이 저와 유사한 어려움을 겪는 웹 개발자 들에게 도움이 되었으면 좋겠습니다.