[Android] WebView 사용기

지난 프로젝트에서 WebView를 사용한 적이 있었다.

그래서 이번 포스팅을 통해서 WebView에 대해서 더욱 깊게 공부하고, 배워서 다음 프로젝트에서도 한번 사용해보자.

 

    @SuppressLint("SetJavaScriptEnabled")
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        viewModel.bind(url)

        webView.settings.apply {
            this.setSupportMultipleWindows(false) // 새창 띄우기 허용
            this.setSupportZoom(false) // 화면 확대 허용
            this.javaScriptEnabled = true
            this.javaScriptCanOpenWindowsAutomatically = true // 자바스크립트 새창 띄우기 허용
            this.loadWithOverviewMode = true // html의 컨텐츠가 웹뷰보다 클 경우 스크린 크기에 맞게 조정
            this.useWideViewPort = true // html의 viewport 메타 태그 지원
            this.builtInZoomControls = false // 화면 확대/축소 허용
            this.displayZoomControls = false
            this.cacheMode = WebSettings.LOAD_NO_CACHE // 브라우저 캐쉬 허용
            this.domStorageEnabled = true // 로컬 저장 허용
            this.databaseEnabled = true

            /**
             * This request has been blocked; the content must be served over HTTPS
             * https 에서 이미지가 표시 안되는 오류를 해결하기 위한 처리
             */
            mixedContentMode = WebSettings.MIXED_CONTENT_ALWAYS_ALLOW
        }

        webView.webViewClient = WebViewClient()
        webView.loadUrl(viewModel.uiState.value.url)

    }

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

 

WebView란?

안드로이드 WebView는 애플리케이션 내에서 웹 콘텐츠를 표시할 수 있는 뷰이다. 이는 전체 웹 브라우저를 애플리케이션 내에 포함시키는 것과 유사하며, HTML, CSS, 자바스크립트를 통해 웹 페이지를 렌더링하고 상호작용할 수 있으며, WebView는 안드로이드 애플리케이션에서 웹 기반 콘텐츠를 표시하고 상호작용할 수 있는 강력한 도구로, 다양한 사용 사례에 활용될 수 있다.

 

이제 하나씩 코드를 분석하고 또한 더 많은 메서드에 대해서 정리해보자.

 

 webView.settings.apply {
 //(생략)

 

webView.settings 는 WebView의 다양한 설정을 제어한다.

apply 확장함수를 사용함으로 가독성을 높여준다.

ex) 자바스크립트 허용, 줌 컨트롤, 캐시모드 등.

 

WebViewClient

• WebViewClient는 WebView에서 페이지 로딩, 링크 클릭 등의 이벤트를 처리하는 데 사용된다.
• 기본 동작을 변경하거나 추가 기능을 구현할 수 있습니다.

위 코드에서는 WebViewClient를 사용하였다.

        webView.webViewClient = WebViewClient()
        webView.loadUrl(viewModel.uiState.value.url)

또한 loadUrl 함수를 통해서 지정된 URL를 로드 하였다.

webView.webViewClient = object : WebViewClient() {
    override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
        view?.loadUrl(url)
        return true
    }
}

 

 

그외에도 WebChromeClient가 존재한다.

WebChromeClient

• WebChromeClient는 웹 페이지의 자바스크립트 경고, 팝업, 진행률 표시 등 브라우저와 관련된 다양한 기능을 처리한다.
• 예: 자바스크립트 경고 대화상자, 진행률 표시, 페이지 제목 변경 등.

webView.webChromeClient = object : WebChromeClient() {
    override fun onProgressChanged(view: WebView?, newProgress: Int) {
        // 진행률 표시 업데이트
    }
}

 

이제 함수에 대해서 하나하나 살펴보자.

 

WebView의 함수

자바스크립트 설정

• javaScriptEnabled: 자바스크립트 실행을 허용한다.
• javaScriptCanOpenWindowsAutomatically: 자바스크립트를 통해 새 창을 열 수 있게 한다.

webSettings.javaScriptEnabled = true
webSettings.javaScriptCanOpenWindowsAutomatically = true

 

줌 설정

• setSupportZoom: 화면 확대/축소를 허용한다.
• builtInZoomControls: 확대/축소 컨트롤을 사용할 수 있게 한다.
• displayZoomControls: 확대/축소 컨트롤을 화면에 표시한다.

webSettings.setSupportZoom(true)
webSettings.builtInZoomControls = true
webSettings.displayZoomControls = false

 

캐시  설정

• cacheMode: 캐시 사용 모드를 설정한다.
  • LOAD_DEFAULT: 기본 캐시 모드.
  • LOAD_CACHE_ELSE_NETWORK: 캐시를 우선 사용하고, 캐시가 없을 경우 네트워크 사용.
  • LOAD_NO_CACHE: 캐시를 사용하지 않음.
  • LOAD_CACHE_ONLY: 네트워크를 사용하지 않고 캐시만 사용.

webSettings.cacheMode = WebSettings.LOAD_NO_CACHE

 

콘텐츠 접근 설정

• allowFileAccess: 파일 시스템 접근을 허용한다.
• allowContentAccess: 콘텐츠 접근을 허용한다.

webSettings.allowFileAccess = true
webSettings.allowContentAccess = true

 

혼합 컨텐츠 설정

• mixedContentMode: HTTP와 HTTPS 콘텐츠를 혼합하여 로드할 때의 동작 방식을 설정한다.
  • MIXED_CONTENT_ALWAYS_ALLOW: 모든 혼합 콘텐츠를 허용.
  • MIXED_CONTENT_NEVER_ALLOW: 혼합 콘텐츠를 허용하지 않음.
  • MIXED_CONTENT_COMPATIBILITY_MODE: 일부 혼합 콘텐츠를 허용.

webSettings.mixedContentMode = WebSettings.MIXED_CONTENT_ALWAYS_ALLOW

 

기타 설정

• domStorageEnabled: DOM 저장소 사용을 허용
• databaseEnabled: 데이터베이스 사용을 허용
• loadWithOverviewMode: 콘텐츠가 WebView보다 클 경우 화면 크기에 맞게 조정
• useWideViewPort: HTML의 viewport 메타 태그를 지원
• mediaPlaybackRequiresUserGesture: 미디어 재생 시 사용자 제스처 필요 여부 설정

webSettings.domStorageEnabled = true
webSettings.databaseEnabled = true
webSettings.loadWithOverviewMode = true
webSettings.useWideViewPort = true
webSettings.mediaPlaybackRequiresUserGesture = false

 

그외의 함수와 설정

User Agent 설정

• 웹 페이지가 다양한 장치에서 어떻게 렌더링되는지를 제어할 수 있습니다.

webView.settings.userAgentString = "Custom User Agent"

 

JavaScript 인터페이스 추가

• 자바스크립트와 네이티브 코드 간의 상호작용을 가능하게 합니다.

webView.addJavascriptInterface(MyJavaScriptInterface(), "AndroidInterface")

 

Geolocation 사용 허용

• 위치 기반 서비스를 사용할 수 있게 합니다.

webView.settings.setGeolocationEnabled(true)

 

플러그인 사용 허용

• 플러그인(예: Flash) 사용을 허용할 수 있습니다.

webView.settings.setPluginState(WebSettings.PluginState.ON)

 

쿠키 관리

• 쿠키를 관리할 수 있게 설정합니다.

CookieManager.getInstance().setAcceptCookie(true)