안녕하세요 에밀리입니다
오늘은 하이브리드 앱을 만들기 위한 모든 것을 알아보도록 하겠습니다
기본적인 wkwebview 세팅이 아니라
관련 메소드들 중심으로 알아보겠습니다
WKWebView 기본
첫번째는 웹뷰 기본 동작입니다
아래 그림처럼 툴바를 이용하여 뒤로가기, 앞으로가기, 새로고침 등의 네비게이션 기능을 사용합니다
툴바 아이템마다 IBAction을 연결하여
webview의 뒤로가기, 앞으로가기, 새로고침, 로딩 중지 등을 수행합니다
이건 아주 기본적인 웹뷰 동작이고
하이브리드 앱을 만들경우 반드시 들어가야 합니다!
(하지만 해당 툴바만 있을 경우, minimum design으로 리젝당합니다)
WKNavigationDelegate
웹뷰에는 네비게이션을 컨트롤 해주는 delegate가 두 개 있습니다
- webView(_: decidePolicyFor navigationAction:)
- webView(_: decidePolicyFor navigationResponse:)
요 두 가지인데요 주로 쓰는건 1번입니다
1번은 화면이 해당 url로 이동하기 전 이동을 할지 말지 결정하는 메소드입니다
decisionHandler(.allow)의 경우 url 이동이 이루어지고
decisionHandler(.cancel)의 경우 이동이 취소됩니다
따라서 특정 url에서 이동을 할지말지 분기처리를 해줄때 굉장히 많이 사용합니다
2번은 1번과 굉장히 유사하지만 다른점은 url에 대한 응답값을 받은 뒤,
이동을 할지 말지 결정합니다
마찬가지로 decisionHandler()를 이용하여 결정합니다
WebView Alert 띄우기
웹뷰에서 알럿창을 띄울때 쓰는 코드입니다
javaScript로 보내는 alert창을 네이티브로 나타내줍니다
runJavaScriptAlertPanelWithMessage 메소드의 경우 OK 버튼 하나만
runJavaScriptConfirmPanelWithMessage 메소드 경우 OK와 Cancel 버튼이 나타납니다
웹뷰 창 여러개 띄우기
웹뷰도 창이 여러개 뜰 수 있습니다
웹뷰가 여러개 뜨는거죠
그러기 위해서 새로운 웹뷰를 나타낼 wkwebView 프로퍼티를 가지고 있어야 합니다
코드에서는 popupWebView로 만들어줬습니다
createWebViewWith 메소드로 새로운 웹뷰 창을 만들어줍니다
이 때 해당 웹뷰에 대한 configuration을 popupWebView에 담아 나타내주면 됩니다
새로 뜬 웹뷰가 닫히면 popupWebView도 nil로 만들어줍니다
Native에서 JavaScript 코드주입
네이티브와 웹이 서로 상호작용하기 위해
네이티브에서 웹에 javaScript 코드를 보내줄 때가 있습니다
그러려면 다음과 같은 작업을 수행해야 합니다
- 웹뷰와 네이티브 간의 브릿지 설정
코드를 주고받을 통로(=브릿지)의 이름을 정해야 합니다
그리고 아래처럼 브릿지 이름을 네이티브에 알려줍니다
2. webView(_:didFinish:) 메소드에서 javaScript 코드를 주입합니다
어디서 코드를 주입해야할지 굉장히 헷갈렸는데 webView(_:didFinish:)였습니다
이정도만 해도 간단한 하이브리드 앱의 대부분은 구현이 가능합니다
더 나아가, 쿠키 저장이나 알림 같은 경우는 다음에 더 써보도록 하겠습니다…
끝.
