앱 웹뷰 수신

앱 웹뷰 수신 — 소스클립 플레이어

⏱ 예상 소요 시간: 20분

🔧 필수/선택: 앱 웹뷰에서는 필수

웹뷰에서 구현해야 하는 동작

웹 브라우저와 달리 웹뷰에서는 플레이어가 기본 이동을 수행하지 않습니다.

동작	이벤트
상품 페이지 이동	`sauceclipMoveProduct`
플레이어 닫기	`sauceclipMoveExit`
공유	`sauceclipOnShare`
채널 이동	`sauceclipMoveChannel`
링크 버튼 이동	`sauceclipMoveLinkButton`

📌 각 이벤트의 페이로드 필드는 브릿지 이벤트 레퍼런스에 있습니다.

웹뷰 설정

이 페이지는 브릿지 이벤트 수신 코드만 다룹니다. 웹뷰에 플레이어를 띄우는 세 가지 방식과 앱 설정은 별도 가이드에 있습니다.

플랫폼	가이드
Android	Android 웹뷰 연동 — 연동 방식 3종 · 권한 · 하드웨어 가속
iOS	iOS 웹뷰 연동 — 연동 방식 3종 · 앱 설정

Android

인터페이스 이름은 sauceclip 이고, 메서드 이름은 이벤트 이름과 같아야 합니다.

kotlin

import android.webkit.JavascriptInterface

class AndroidBridge(private val activity: MainActivity) {

    @JavascriptInterface
    fun sauceclipEnter() {
        // 클립 진입
    }

    @JavascriptInterface
    fun sauceclipMoveProduct(message: String) {
        // message 는 JSON 문자열이다
    }

    @JavascriptInterface
    fun sauceclipOnShare(message: String) {
    }

    @JavascriptInterface
    fun sauceclipMoveExit() {
    }
}

// 인터페이스 이름은 "sauceclip" 으로 등록한다

webView.addJavascriptInterface(AndroidBridge(this), "sauceclip")

⚠️ 값이 없는 이벤트(sauceclipEnter · sauceclipMoveExit · sauceclipTogglePlay)는 인자 없이 호출됩니다. 인자를 받는 시그니처로 선언하면 그 메서드는 호출되지 않고 플레이어가 기본 동작을 수행합니다.

📌 재생 아이콘 없이 영상이 재생되게 하려면 getDefaultVideoPoster() 가 빈 비트맵을 반환하도록 재정의합니다.

iOS

받을 이벤트 이름을 WKUserContentController 에 핸들러로 등록합니다.

swift

extension ViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController,
                               didReceive message: WKScriptMessage) {
        switch message.name {
        case "sauceclipEnter":
            break

        case "sauceclipMoveProduct":
            // message.body 는 JSON 문자열이다
            print(message.body)
            break

        case "sauceclipOnShare":
            break

        case "sauceclipMoveExit":
            break

        default:
            break
        }
    }
}

📍 값이 없는 이벤트도 전달되며 message.body 에는 null 문자열이 들어옵니다.

📍 플레이어 화면이 잘리지 않도록 웹뷰의 SafeArea 영역을 설정합니다.

앱 스킴이 등록된 상품

상품에 앱 스킴이 등록되어 있으면 sauceClipProductIosScheme · sauceClipProductAndroidScheme 가 먼저 전송됩니다. 두 이름만 sauceClip 으로 시작해 대소문자가 다릅니다.

💡 전송 조건과 필드는 상품 클릭 연동에 있습니다.

다음 단계

브릿지 이벤트 레퍼런스 — 이벤트 10종의 페이로드 목록

→