안드로이드 , iOS에서 네이티브로 하이브리드 앱을 만들 경우 웹(JS)와  앱(ios , android)양쪽에서 서로의 함수를 실행해야 하는 경우가 생긴다. 


본 글에는 웹 <-> 앱간 함수를 실행해야 될 경우 자바스크립트에서 준비해야할 함수를 정리해둔다.


(앱에서 자바스크립트를 실행하는 코드와 자바스크립트로 앱 함수를 실행할 경우 앱에서 선언해야 하는 앱(ios / android)의 함수는 따로 다루도록 한다.)




1. 자바스크립트에서 iOS 함수 실행


 자바스크립트에서 iOS의 함수를 실행하는 방법은 두가지이다. 이는 기존에 사용되던 웹뷰 UIWebView에 더해 iOS8부터 WKWebView가 추가되었기 때문이다. 두 함수의 자바스크립트 코드와 objective c (OR Swift)코드가 다르기 때문에 유의하여야 한다. 


1.1 UIWebView

location.href = YOUR_PROTOCOL://YOUR_METHOD_NAME?PARAM_1_NAME=PARAM_2_VALUE&PARAM_2_NAME=PARAM_2_VALUE....

 UIWebView에서는 주소를 호출하는 방식을 사용한다. http 대신 임의로 지정한 이름을 프로토콜로 사용하고 도메인이 위치하는 곳에는 함수 이름을 , 쿼리스트링으로 함수의 변수들을 넘겨준다. 이렇게 실행 후 iOS 코드 내에서는 웹뷰의 주소가 변경되는 것을 감지하는 함수내에서 각 값들을 분리하여 사용하도록 한다. 


1.2 WKWebview 

 

window.webkit.messageHandlers[YOUR_HANDLER_NAME].postMessage(PARAMS)


 WKWebView에서는 전역변수로서 자동으로 webkit이라는 변수를 생성한다. 그리고 웹 -> 앱간 통신이 필요한 경우 위의 webkit 변수를 통해 이루어진다. webkit.messageHandlers에 앱에서 임의로 결정한 값이 추가로 생성되며, 그 자식 함수로 postMessage라는 함수가 생성된다. 여기서 postMessage라는 함수를 스크립트에서 실행할 경우 자바스크립트 함수를 처리하는 WKWebView의 딜리게이트 함수에서 'PARAMS'을 dictionary형태로 넘겨 받게 된다. PARAMS는 자바스크립트 객체 형태로 넘겨주어도 무방하다. 


2. 자바스크립트에서 Android 함수 실행


window[YOUR_HANDLER_NAME][YOUR_METHOD_NAME](PARAMS)

 안드로이드에서는 임의로 설정한 HANDLER이름으로 전역 변수를 생성하고 그 아래에 함수를 선언하는 형식이 된다. 일반적으로 전역 변수로서 네임스페이스로 함수들을 묶어두는 방식과 동일하다. 





위의 기능들을 사용하는데 매번 문자열을 더하거나 확인해가면서 작업할 수는 없는 노릇이라, 웹 <-> 앱간의 통신을 담당하는 스크립트 함수들을 묶음으로 만들어두고 실제로 사용하였다. 가지고 있는 기능은 아래와 같다. 

// 0. 최초 로드시

// 반드시 HY_BRIDGE.config 함수로 ios 및 안드로이드의 핸들러 / 프리픽스를 초기화 해주어야 합니다.

HY_BRIDGE.config({

ios : { prefix : 'PREFIX' , handler : 'HANDLER' },

android : { handler : 'HANDLER' }

})


// 1.1 기기 타입 가져오기

HY_BRIDGE.tools.device() // iOS / Android / Unknown

// 1.2 iOS 확인

HY_BRDIGE.tools.isiOS() // true or false

// 1.3 Android 확인

HY_BRIDGE.tools.isAndroid() // true or false



// 2 웹-> 어플리케이션 함수

// 2.1 생성

HY_BDIRGE.app.extend({

method_1 : function(foo,bar){

HY_BDRIDGE.app.dispatch({

method : "METHOD_NAME_IN_APP",

params : { foo : 0 , bar : 1 }

});

},

method_2 : function(){

..

}

})

// 2.2 실행

HY_BRIDGE.app.call(method_1 , foo , bar);


// 2.3 특정 이벤트일때

// 2.3.1 생성

HY_BRIDGE.app.evt.insert(HY_BRIDGE_app.IDENTIFIER.ON_LOAD_FINISHED, function(){

// 함수 내용

})

// 2.3.2 (앱에서) 실행 (선언된 순서대로 실행됩니다.)

HY_BRIDGE.app.evt.flush(HY_BRIDGE.app.IDENTIFIER.ON_LOAD_FINISHED);


// 3 어플리케이션 -> 웹

// 어플리케이션에서 자바스크립트는 쉽게 실행할 수 있지만, 파편화 되는 것을 방지하기 위해 선언 및 사용부를 통일해두었다.

// 3.1.1 함수 생성

HY_BRIDGE.web.extend({

method_1 : function(foo){

console.log("Hello " + foo)

}

});

// 3.1.2 함수 실행

HY_BRIDGE.web.call('method_1' , foo)

// 3.2.1 변수 생성

HY_BRIDGE.web.declare({ value_1 : 0 , value_2 : 1 })

// 3.2.2 변수 가져오기

HY_BRIDGE.web.get('value_1')




'DEV > JavaScript' 카테고리의 다른 글

문자열 관련 함수 묶음  (0) 2017.10.17
쿠키 관리 함수 묶음  (0) 2017.10.17
주소의 쿼리스트링을 조작하는 함수 모음  (0) 2017.10.17

+ Recent posts