[Kotlin] WebView 사용 방법

WebView

WebView란 프레임워크에 내장된 웹 브라우저 Component로써 View 형태로 App에 임베딩 하는 것이 가능합니다.

 

이러한 WebView는 App 안에서 HTML을 호출하여 App을 구현하는 Hybrid 형태의 App을 개발하는데 주로 사용됩니다. 다만, PC환경과 OS가 다르기 때문에 HTML5 호환성 등 일부 기능의 제약을 가지고 있습니다.

 

WebView 사용 방법

먼저 WebView를 사용하기 위해서는 인터넷에 대한 권한을 부여해야 합니다.

 

Manifest.xml

<uses-permission android:name="android.permission.INTERNET"/>

 

이후, WebView를 사용할 Activity와 해당 Activity의 Layout에 WebView 관련 코드를 추가합니다.

 

activity_main.xml

<WebView
         android:id="@+id/webView"
         android:layout_width="match_parent"
         android:layout_height="match_parent"/>

 

MainActivity.kt

val webView = findViewById<WebView>(R.id.webView)
        webView.settings.apply{
            // Enable Javascript Via WebView, Default is disabled
            javaScriptEnabled = true
        }

webView.webViewClient = WebViewClient()
webView.loadUrl("http://192.168.45.222:8081")

 

여기서 주의해야할 점이 WebView의 경우 javascript가 기본적으로 비활성화 되어 있기 때문에 WebView가 정상적으로 동작하지 않는다면 "javascriptEnabled = true"를 통하여 javascript를 활성화 해주어야 합니다.

WebView 실행 화면

 

JavascriptInterface

Android에서 WebView를 사용하는 App의 경우 Client 측 javascript와 Android Code 간에 Interface를 만들 수 있는데 이를 JavascriptInterface라고 부릅니다.

 

먼저 WebView에서 실행할 Android Code가 담겨 있는 JavascriptInterface Code를 작성합니다.

 

MainActivity.kt

public class A{
    var flag = "hacksmsFlag"
}

class WebAppInterface(private val mContext:Context){
    val a = A()
    
    @JavascriptInterface
    fun showAlert(){
        Toast.makeText(mContext, a.flag, Toast.LENGTH_SHORT).show()
    }
}

 

그리고 WebView를 사용하는 Activity에서 addJavascriptInterface() 메서드를 이용하여 WebAppInterface 내 JavascriptInterface Code를 사용할 수 있도록 권한을 부여해줍니다.

val webView = findViewById<WebView>(R.id.webView)
webView.settings.apply{
    // Enable Javascript Via WebView, Default is disabled
    javaScriptEnabled = true
}

// 2rd Argument is Selector Name
webView.addJavascriptInterface(WebAppInterface(this),"Hacksms")

 

참고로 addJavascriptInterface의 2번째 인자로 부여하는 문자열이 Android Code에 접근할 수 있는 선택자가 됩니다.

(ex: Hacksms.showAlert)

 

마지막으로 WebView에 호출한 웹 서버에 Android Code에 접근할 수 있는 javascript Code를 작성합니다.

<button class="btn btn-lg" onclick="Hacksms.showAlert();">Test</button>

 

이후 WebView에 접근하여 해당 버튼을 클릭할 경우 JavascriptInterface 내 Code가 실행되는 것을 확인할 수 있습니다.

JavascriptInterface 실행 화면