고객센터어드민

웹뷰 연동

콘텐츠사(Web -> WebView)

콘텐츠 웹에서 매체사 네이티브 앱(웹뷰 호스트)을 호출하기 위한 자바스크립트 인터페이스 명세입니다.

초기설정

  • 데이터는 단일 데이터의 경우 해당 값을 String으로 전달. 다중 데이터는 JSON 형태의 String으로 전달한다.
javascript
// 네이티브 요청 함수
function callNative(method, message) {
  // Android — @JavascriptInterface 직접 호출
  if (window.addedBridge?.[method]) {
    addedBridge[method](message || '');
    return;
  }

  // iOS
  if (window.webkit?.messageHandlers?.addedBridge) {
    window.webkit.messageHandlers.addedBridge.postMessage({
      method: method,
      message: message || ''
    });
    return;
  }

  // Flutter
  if (window.addedBridge?.postMessage) {
    addedBridge.postMessage(JSON.stringify({
      method: method,
      message: message || ''
    }));
    return;
  }
}

callNative('interfaceName','value');

// 요청 데이터 받기
window.addedBridgeCallback = {};

addedBridgeCallback.interfaceName = function (data) {
	console.log( 'addedBridgeCallback :: ' + data);
};

필수

openExternalBrowser()

  • 콘텐츠사에서 요청 받은 URL을 외부 브라우저로 연결합니다.
  • @param {string} url
javascript
callNative('openExternalBrowser','Https://...');

finish()

  • 현재 웹뷰를 종료합니다.
javascript
callNative('finish');

registerBackKey()

  • 시스템 뒤로가기(제스처/버튼)가 호출되면 네이티브에서 addedBridgeCallback.onBackKeyListener() 를 호출합니다.
  • @param {string} true|false
javascript
addedBridgeCallback.onBackKeyListener = function () {
	console.log( 'addedBridgeCallback :: onBackButtonListener()');
	if (history.length > 1) {
		history.back();
	} else {
		callNative('finish'); //필수연동 finish()
	}
};

registerBackButton()

  • 앱바 영역에 백버튼이 존재하는 경우에만 필요합니다.
  • 앱바의 백버튼이 터치되면 네이티브에서 addedBridgeCallback.onBackButtonListener() 를 호출합니다.
  • @param {string} true|false
javascript
addedBridgeCallback.onBackButtonListener = function () {
	console.log( 'addedBridgeCallback :: onBackButtonListener()');

	if (history.length > 1) {
		history.back();
	} else {
		callNative('finish'); //필수연동 finish()
	}
};

선택

getAppVersion()

  • 네이티브 앱의 현재 버전 정보를 조회합니다.
  • 응답은 addedBridgeCallback.getAppVersion(version) 으로 전달됩니다.
javascript
//호출
callNative('getAppVersion');

//콜백
addedBridgeCallback.getAppVersion = function (data) {
	console.log( 'addedBridgeCallback :: getAppVersion() -> ' + data);
};

getADID()

  • 디바이스 광고 식별값(ADID)을 조회합니다.
  • 응답은 addedBridgeCallback.getADID(adId) 으로 전달됩니다.
javascript
//호출
callNative('getADID');

//콜백
addedBridgeCallback.getADID = function (data) {
	console.log( 'addedBridgeCallback :: getADID() -> ' + data);
	// ex) XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
};

getIsAgeUnder14()

  • 유저의 나이가 14세 미만인지 여부를 조회합니다.
  • 구글/네이버 등 광고 정책으로 14세 미만에게는 타겟 광고 노출이 불가능합니다.
  • 응답은 addedBridgeCallback.getIsAgeUnder14(isUnder14)으로 전달됩니다. ("true" | "false")
javascript
//호출
callNative('getIsAgeUnder14');

//콜백
addedBridgeCallback.getIsAgeUnder14 = function (data) {
	console.log( 'addedBridgeCallback :: getIsAgeUnder14() -> ' + data);
	// "true" (14세 미만) | "false"
};

getDeviceInfo()

  • 기기 정보(network / model / manufacturer / osVersion)를 조회합니다.
  • 응답은 addedBridgeCallback.getDeviceInfo(deviceInfoJson) 으로 전달됩니다.
  • ex) {"network":"wifi","model":"SM-S911N","manufacturer":"Samsung","osVersion":"14"}
javascript
//호출
callNative('getDeviceInfo');

//콜백
addedBridgeCallback.getDeviceInfo = function (data) {
	const info = JSON.parse(data);
	console.log(info.network, info.model, info.manufacturer, info.osVersion);
};

pushUrl()

  • 현재 웹뷰를 재사용하여 URL을 변경합니다.
  • @param {string} JSON string { url, replace? }
javascript
callNative('pushUrl', JSON.stringify({
	url: 'https://...',
	replace: false
}));

openInternalBrowser()

  • 새로운 앱 화면(Activity / UIViewController)에 웹뷰를 띄우는 인터페이스.
  • @param {string} url
javascript
callNative('openInternalBrowser', 'https://...');

setTitle()

  • 앱바 영역을 앱에서 관리하고, 해당 영역에 타이틀이 존재하는 경우 사용합니다.
  • 앱바 영역 타이틀을 수정합니다.
  • @param {string} title
javascript
callNative('setTitle', '제목');

관련 문서