Android) WebView 정리
WebView
- 웹 탐색과 웹 브라우저는 Android, iOS, PC 모두 가진 기능입니다.
- WebView는 웹 브라우저를 구성하는 HTML과 같은 요소들을 받아들여 이를 브라우저와 동일한 형식으로 해석해서 표현해주는 뷰입니다.
- 그래서 WebView는 PC의 서버에서 response 한 웹 파일을 받아서 Android에서도 똑같이 보여주고 다룰 수 있고, 디바이스 상관없이 정보 공유가 가능한 하이브리드 앱을 쉽게 구현할 수 있도록 도와줍니다.
URL 웹 페이지 요청
- 단순히 WebView를 참조하고 loadUrl로 웹 브라우저를 실행하여 해당 url을 로드하는 방법입니다.
- loadUrl 메소드를 사용해서 해당 주소에 요청을 보내고, 응답받은 html 파일을 사용하여 웹 화면을 표시합니다.
- WebView에 WebViewClient를 제공함으로써 웹 페이지를 WebView에 띄울 수 있게 됩니다.
binding.webView.apply {
webViewClient = WebViewClient()
loadUrl("https://www.google.com/")
}
내부 html 요청
- 개발자가 가진 html 파일을 표시하려면, 이 파일이 assets 폴더 안에 존재해야 합니다.
- assets은 res폴더 처럼 리소스를 모아두는 곳인데, res에서 분류한 타입 외의 html, css, js 등을 사용할 때에 사용하는 폴더입니다.
- 아래와 같이 assets 폴더 안에 html 파일을 넣고 loadUrl 메소드를 사용하여 불러옵니다.
webView.loadUrl("file:///android_asset/www/index.html")
html을 parsing하여 보여주기
- 일반적으로 사용하는 loadUrl() 메소드로 html을 parsing 하여 필요한 부분만 보여줄 수 없습니다.
- 이러한 경우 loadData 메소드나 loadDataWithBaseURL 메소드를 이용하면 됩니다.
- loadData(String data, String mimeType, String encoding) -> data : encoding으로 작성된 data는 html 코드를 string 형태로 넣어서 사용할 수 있습니다. mimeType : 문서의 다양성을 알려주기 위함으로 "text/html" 등의 값을 가질 수 있습니다. encoding : data가 어떤 형태의 encoding으로 작성되었는지 알려줍니다.
- 하지만, loadData 메소드는 network 상의 content를 WebView에 보여줄 수 없습니다. 즉 html 내용 중 상대 경로로 있는 스타일이나 이미지 등을 못 가져오는 경우가 있습니다.
- 예를 들어 <link="stylesheet" href="/Content/Css/main.css?2016011909href="/Content/Css/main.css? 2016011909" /> 이런 css가 있다고 하면 /Content 폴더가 어디 경로를 기점인지 알 수가 없어 loadDataWithBaseUrl을 사용하여 해결합니다.
- loadDataWithURL(String baseUrl, String data, String mimeType, String encoding, String histroyUrl) -> baseUrl : 상대 경로를 해결하기 위해 사용됨. historyUrl : histroy entry로 사용됨.
loadData(url, "text/html; charset=utf-8", "UTF-8")
loadDataWithBaseURL(null, url, "text/html; charset=utf-8", "UTF-8", null)
java script 연동 (앱 -> 웹뷰 JavaScript 호출)
- 웹 브라우저는 java script를 사용합니다.
- 단순히 받아온 코드를 해석하는 것은 문제가 없을지 몰라도, 화면에 표시되는 웹 페이지와 안드로이드 코드가 유기적으로 동작하기 어려울 수 있습니다.
- 하지만, 이를 지원해주는 api가 존재합니다.
- loadUrl 메소드에 java script의 함수명을 적어주어, 정의된 함수를 실행시킬 수 있습니다.
- 앱의 동작에 연동하여 java script의 어떠한 동작을 하도록 이벤트를 걸 때 사용하면 좋습니다.
webView.loadUrl("javascript:alerthello()")
WebView와 앱 통신 (웹뷰 -> 앱 코드 호출)
- WebView는 보안상의 이유로 디바이스 자원을 100% 사용할 수 없습니다. 보통 안드로이드는 디바이스 유일 값으로 Android Id를 사용하는데 디바이스 영역으로 웹뷰에서 바로 접근하여 추출할 수 없습니다.
- 하지만, 네이티브에서는 해당 값을 자유롭게 추출 가능합니다. 이와 같은 경우 웹뷰와 네이티브의 연동을 통해 값을 전달합니다.
- 본 연동방식은 안드로이드 OS 4.1 JELLY_BEAN 이하 디바이스에서는 보안상 문제가 있어, 안드로이드 OS 4.2 이상에서 사용을 권장하고 있습니다. 안드로이드 OS 4.1 이하에서는 @JavaScriptinterface 어노테이션이 동작하지 않습니다.
- JavaScript에서 네이티브 코드 호출 -> 네이티브 코드가 JavaScriptInterface 어노테이션이 지정되었는지 확인하고 지정되어 있으면 네이티브 메소드를 실행 -> 네이티브 메소드의 실행결과를 반환.
- evaluteJavascript를 통해 JavaScript 호출 -> 실행결과를 반환.
웹뷰에서 앱 코드를 호출하는 예제를 보겠습니다.
- assets 폴더에 html 파일을 만들어줍니다. 안드로이드에서 선언한 함수를 호출할 수 있습니다.
<input type="button" value="WebView Test" onClick="showAndroidToast('Connection Success!')"/>
<script type="text/javascript">
function showAndroidToast(toast) {
Android.showToast(toast);
}
</script>- @JavascriptInterface 함수 생성.
webview.settings.javaScriptEnabled = true
webview.addJavascriptInterface(WebAppInterface(this), "Android")
webview.loadUrl("file:///android_asset/www/index.html")
/** Instantiate the interface and set the context */
class WebAppInterface(private val mContext: Context) {
/** Show a toast from the web page */
@JavascriptInterface
fun showToast(toast: String) =
Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show()
}
Full Screen Issue
- HTML video 태그 혹은 비디오 전체 화면 버튼 자체가 보이지 않을 때, 또한 전체화면 모드에서 가로모드로 플레이되지 않을 때.
binding.webView.settings.apply {
javaScriptEnabled = true
setAppCacheEnabled(true)
pluginState = WebSettings.PluginState.ON
}
binding.webView.webChromeClient = object : WebChromeClient() {
override fun onShowCustomView(view: View?, callback: CustomViewCallback?) {
super.onShowCustomView(
view,
callback
)
binding.webView.isVisible = false
}
override fun onHideCustomView() {
super.onHideCustomView()
binding.webView.isVisible = true
}
}
binding.webView.webChromeClient = FullscreenableChromeClient(this)
val html = getHTML(videoId)
binding.webView.loadData(html, "text/html", "UTF-8")
}
fun getHTML(videoId: String): String {
return ("<iframe class=\"youtube-player\" style=\"border: 0; width: 100%; height: 100%;padding:0px; margin:0px\" id=\"ytplayer\" type=\"text/html\" src=\"https://www.youtube.com/embed/$videoId?theme=dark&autohide=2&modestbranding=1&showinfo=0&autoplay=1&rel=0&enablejsapi=1\" frameborder=\"0\" allowfullscreen autobuffer controls onclick=\"this.play()\">\n</iframe>\n")
}
import android.app.Activity
import android.content.Context
import android.content.pm.ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE
import android.content.pm.ActivityInfo.SCREEN_ORIENTATION_PORTRAIT
import android.os.Build
import android.view.MotionEvent
import android.view.View
import android.view.ViewGroup
import android.view.WindowManager
import android.webkit.WebChromeClient
import android.widget.FrameLayout
import androidx.core.content.ContextCompat
class FullscreenableChromeClient(activity: Activity) : WebChromeClient() {
private var mActivity: Activity? = null
private var mCustomView: View? = null
private var mCustomViewCallback: WebChromeClient.CustomViewCallback? = null
private var mOriginalOrientation: Int = 0
private var mFullscreenContainer: FrameLayout? = null
companion object {
private val COVER_SCREEN_PARAMS = FrameLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT
)
}
init {
this.mActivity = activity
}
override fun onShowCustomView(
view: View,
callback: WebChromeClient.CustomViewCallback
) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
if (mCustomView != null) {
callback.onCustomViewHidden()
return
}
this.mActivity?.requestedOrientation =
SCREEN_ORIENTATION_LANDSCAPE
mOriginalOrientation = mActivity!!.requestedOrientation
val decor =
mActivity?.window?.decorView as FrameLayout
mFullscreenContainer =
FullscreenHolder(mActivity!!)
mFullscreenContainer!!.addView(
view,
COVER_SCREEN_PARAMS
)
decor.addView(
mFullscreenContainer,
COVER_SCREEN_PARAMS
)
mCustomView = view
setFullscreen(true)
mCustomViewCallback = callback
}
super.onShowCustomView(view, callback)
}
override fun onShowCustomView(
view: View,
requestedOrientation: Int,
callback: WebChromeClient.CustomViewCallback
) {
this.onShowCustomView(view, callback)
}
override fun onHideCustomView() {
if (mCustomView == null) {
return
}
setFullscreen(false)
val decor =
mActivity!!.window.decorView as FrameLayout
decor.removeView(mFullscreenContainer)
mFullscreenContainer = null
mCustomView = null
mCustomViewCallback!!.onCustomViewHidden()
mActivity?.requestedOrientation = SCREEN_ORIENTATION_PORTRAIT
}
private fun setFullscreen(enabled: Boolean) {
val win = mActivity!!.window
val winParams = win.attributes
val bits =
WindowManager.LayoutParams.FLAG_FULLSCREEN
if (enabled) {
winParams.flags = winParams.flags or bits
} else {
winParams.flags =
winParams.flags and bits.inv()
if (mCustomView != null) {
mCustomView!!.systemUiVisibility =
View.SYSTEM_UI_FLAG_VISIBLE
}
}
win.attributes = winParams
}
private class FullscreenHolder(ctx: Context) :
FrameLayout(ctx) { init {
setBackgroundColor(
ContextCompat.getColor(
ctx,
android.R.color.black
)
)
}
override fun onTouchEvent(evt: MotionEvent): Boolean {
return true
}
}
}
WebView Settings
binding.webView.settings.apply {
setSupportMultipleWindows(false) // 새창 띄우기 허용
setSupportZoom(false) // 화면 확대 허용
javaScriptEnabled = true // 자바스크립트 허용
javaScriptCanOpenWindowsAutomatically = false // 자바스크립트 새창 띄우기 허용
loadWithOverviewMode = true // html의 컨텐츠가 웹뷰보다 클 경우 스크린 크기에 맞게 조정
useWideViewPort = true // html의 viewport 메타 태그 지원
builtInZoomControls = false // 기본적으로 줌 기능이 되지 않습니다.
displayZoomControls = false // 화면 확대/축소 허용
layoutAlgorithm = WebSettings.LayoutAlgorithm.SINGLE_COLUMN // 컨텐츠 사이즈 맞추기
cacheMode = WebSettings.LOAD_NO_CACHE // 브라우저 캐쉬 허용
domStorageEnabled = true // 로컬 저장 허용
databaseEnabled = true
/**
* * This request has been blocked; the content must be served over HTTPS
* * https 에서 이미지가 표시 안되는 오류를 해결하기 위한 처리
* */
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
mixedContentMode = WebSettings.MIXED_CONTENT_ALWAYS_ALLOW
}
}
binding.webView.apply {
webViewClient = WebViewClient() // WebView 위젯을 사용해 여러 기능 사용
webChromeClient = WebChromeClient() // 브라우저 크롬에 특화
}