Webview 연동

앱에서 웹뷰를 사용하여 연동하는 경우, 특정 동작들에 대해서 브릿지를 구현하여 연동하는 방식입니다.

링크 이동과 관련된 동작들은 반드시 브릿지 구현이 필요합니다.

브릿지 정의에 대해서는 소스클립 브릿지 payload 정의 를 참고해주세요

Android

안드로이드의 경우 "sauceclip" 이름을 가진 브릿지 중 해당 브릿지가 있는 경우 메시지를 전달하게 되며, 기본 동작은 취소됩니다.

import android.os.Handler
import android.webkit.JavascriptInterface
import android.widget.Toast
 
class AndroidBridge(private val activity: MainActivity) {
    private val handler = Handler()
 
    @JavascriptInterface
    fun sauceclipEnter() {
        handler.post {
            Toast.makeText(activity, "sauceclipEnter", Toast.LENGTH_SHORT).show()
        }
    }
 
    @JavascriptInterface
    fun sauceclipMoveExit() {
        handler.post {
            Toast.makeText(activity, "sauceclipMoveExit", Toast.LENGTH_SHORT).show()
        }
    }
 
    @JavascriptInterface
    fun sauceclipMoveProduct(message: String) {
        handler.post {
            Toast.makeText(activity, "sauceclipMoveProduct \\n $message", Toast.LENGTH_SHORT).show()
        }
    }

    @JavascriptInterface
    fun sauceclipAddCart(message: String) {
        handler.post {
            Toast.makeText(activity, "sauceclipAddCart \\n $message", Toast.LENGTH_SHORT).show()
        }
    }

    @JavascriptInterface
    fun sauceclipMoveCart() {
        handler.post {
            Toast.makeText(activity, "sauceclipMoveCart", Toast.LENGTH_SHORT).show()
        }
    }
 
    @JavascriptInterface
    fun sauceclipOnShare(message: String) {
        handler.post {
            Toast.makeText(activity, "sauceclipOnShare \\n $message", Toast.LENGTH_SHORT).show()
        }
    }

    @JavascriptInterface
    fun sauceclipPlayerError(message: String) {
        handler.post {
            Toast.makeText(activity, "sauceclipPlayerError \\n $message", Toast.LENGTH_SHORT).show()
        }
    }
 
}

📘
Android Webview에서 재생 아이콘 표시 없이 영상이 재생되는 것을 원하실 경우에는 아래 코드를 활용해주세요. (해당 가이드는 파트너사 AOS앱 개발팀에서 진행)

override fun getDefaultVideoPoster(): Bitmap? { return Bitmap.createBitmap(10,10, Bitmap.Config.ARGB_8888) }

iOS

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

            case "sauceclipMoveCart":
                print("sauceclipMoveCart")
                break

            case "sauceclipOnShare":
                print("sauceclipOnShare")
                print(message.body)
                break

            case "sauceclipPlayerError":
                print("sauceclipPlayerError")
                print(message.body)
                break
 
            default:
                print("message.name \\(message.name) not handled.")
        }
    }
}

📘
iOS X 이상의 기기에서 플레이어 화면 잘림 현상을 방지하기 위해 SafeArea 영역 설정을 필히 진행해 주시기 바랍니다.