JavaScript Bridge

SDK의 오퍼월은 WebView로 작동하며, WebView와 네이티브 앱 간 통신을 위해 JavaScript Bridge를 사용합니다.

개요

일반적으로는 JavaScript Bridge를 직접 다룰 필요가 없습니다. SDK가 자동으로 처리합니다. 하지만 고급 사용자나 커스터마이징이 필요한 경우 알아두면 유용합니다.

지원하는 메시지 타입

WebView에서 네이티브로 보낼 수 있는 메시지 타입:

  • openWebView: 서브 WebView 열기

  • close: WebView 닫기

  • trackEvent: 이벤트 추적

  • customEvent: 커스텀 이벤트 (v1.0.24+)

  • dataRequest: 데이터 요청 (v1.0.24+)

  • missionCompleted: 미션 완료 알림

  • missionProgressed: 미션 진행 알림

  • quizCompleted: 퀴즈 완료 알림

커스텀 메시지 처리

WebView에서 특정 메시지를 보냈을 때 앱에서 처리하려면:

Android:

val offerwallView = findViewById<AdchainOfferwallView>(R.id.offerwallView)

offerwallView.setJavaScriptBridgeListener(object : JavaScriptBridgeListener {
    override fun onMessage(type: String, data: Map<String, Any>) {
        when (type) {
            "customEvent" -> {
                // 커스텀 이벤트 처리
                val eventName = data["eventName"] as? String
                println("커스텀 이벤트: $eventName")
            }
            "dataRequest" -> {
                // 데이터 요청 처리
                val requestId = data["requestId"] as? String
                // 데이터 응답
                offerwallView.sendDataResponse(requestId, mapOf(
                    "result" to "success",
                    "data" to myData
                ))
            }
        }
    }
})

iOS:

offerwallView.setJavaScriptBridgeDelegate(self)

extension ViewController: JavaScriptBridgeDelegate {
    func onMessage(type: String, data: [String: Any]) {
        switch type {
        case "customEvent":
            let eventName = data["eventName"] as? String
            print("커스텀 이벤트: \(eventName ?? "")")
        case "dataRequest":
            let requestId = data["requestId"] as? String
            // 데이터 응답
            offerwallView.sendDataResponse(requestId: requestId, data: [
                "result": "success",
                "data": myData
            ])
        default:
            break
        }
    }
}

보안 고려사항

JavaScript Bridge는 WebView와 앱 간 통신을 가능하게 하지만, 보안에 주의해야 합니다:

  • 민감한 데이터(토큰, 비밀번호 등)를 전달하지 마세요

  • 사용자 입력을 검증하세요

  • HTTPS만 사용하세요

SDK는 기본적으로 안전하게 설정되어 있습니다.

디버깅

JavaScript Bridge 메시지를 로그로 보려면:

Android:

AdchainSdk.setLogLevel(LogLevel.DEBUG)

iOS:

AdchainSdk.shared.setLogLevel(.debug)

그러면 Logcat/Console에 모든 Bridge 메시지가 출력됩니다.

React Native에서의 사용

React Native 앱에서는 JavaScript Bridge를 직접 구현할 필요가 없습니다.

자동 처리

React Native SDK가 WebView ↔ Native 통신을 자동으로 처리합니다:

// React Native에서는 다음과 같이 구현합니다
import { AdchainSdk } from '@1selfworld/adchain-sdk-react-native';

await AdchainSdk.openOfferwall('main_offerwall');

내부적으로 React Native 브릿지를 통해 Android/iOS의 네이티브 JavaScript Bridge가 작동합니다.

커스텀 이벤트 처리

WebView에서 보내는 커스텀 이벤트를 처리하려면:

import { AdchainOfferwallView } from '@1selfworld/adchain-sdk-react-native';

<AdchainOfferwallView
  style={{ flex: 1 }}
  placementId="custom_offerwall"
  onCustomEvent={(eventType, payload) => {
    console.log('커스텀 이벤트:', eventType, payload);
    // 예: 결제 이벤트, 인증 이벤트 등
  }}
  onDataRequest={(requestId, requestType, params) => {
    console.log('데이터 요청:', requestType);
    // 네이티브 데이터를 WebView로 전달
    return { result: 'success', data: myData };
  }}
/>

네이티브 커스터마이징

더 복잡한 커스터마이징이 필요하면 네이티브 레벨에서 구현하세요:

  • Android: 위의 Android 예시 참고 (JavaScriptBridgeListener)

  • iOS: 위의 iOS 예시 참고 (JavaScriptBridgeDelegate)

React Native에서 네이티브 모듈을 통해 접근할 수 있습니다.

다음 단계

Previous커스텀 이벤트Next오프라인 지원

Last updated