모바일 웹뷰 설정

모바일 웹뷰 설정이란?

해피톡 내에서 웹페이지를 불러오기 위해 웹뷰의 동작 방식과 보안, 기능 등을 설정하는 작업입니다.

Android

AndroidManifest.xml에서 권한 추가를 아래와 같이 설정해주세요.

<!-- AndroidManifest.xml 인터넷 사용권한 추가 -->
<manifest ...>
    <uses-permission android:name=”android.permission.INTERNET”/>
</manifest>
Plain Text
복사

웹뷰 필수 설정값을 아래와 같이 설정해주세요.

// Java
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();

// 필수 세팅값
webSettings.setJavaScriptEnabled(true);
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
webSettings.setDomStorageEnabled(true);

// optional 세팅값
webSettings.setLoadsImagesAutomatically(true);
webSettings.setBuiltInZoomControls(true);
webSettings.setUseWideViewPort(true);
webSettings.setDatabaseEnabled(true);
webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
Plain Text
복사

// Kotlin
val myWebView: WebView = findViewById(R.id.webview);

// 필수 세팅값
myWebView.settings.javaScriptEnabled = true;
myWebView.settings.javaScriptCanOpenWindowsAutomatically = true;
myWebView.settings.domStorageEnabled = true;

// optional 세팅값
myWebView.settings.builtInZoomControls = false;
myWebView.settings.loadWithOverviewMode = true;
myWebView.settings.useWideViewPort = true;
myWebView.settings.databaseEnabled = true;
myWebView.settings.cacheMode = WebSettings.LOAD_NO_CACHE;

// android os versin 5.0 이상
myWebView.mixedContentMode = WebSettings.MIXED_CONTENT_ALWAYS_ALLOW;

// webView LayerType 설정
myWebView.setLayerType(View.LAYER_TYPE_HARDWARE, null);

// https 에서 이미지가 표시 안되는 이슈 처리
if (Build.VERSION.SDK_INT >= Build.VERSION.CODES.LOLLIPOP) {
    mixedContentMode = WebSettings.MIXED_CONTENT_ALWAYS_ALLOW
}
Plain Text
복사

안드로이드 갤러리 설정 가이드는 아래를 꼭 참고해주세요.

•

Android WebView에서 해피톡 웹채팅 v2 사진 요청시 처리

•

WebChromeClient의 onShowFileChooser() 메소드 내에서 파일 선택 처리

•

filePathCallback.onReceiveValue(arrayOf(Uri)) 값 호출

•

위 URI 값은 디바이스 로컬 이미지 파일 Uri 값

/* 이미지 전송을 위한 처리 */
val chromeClient = object : WebChromeClient() {
    override fun onShowFileChooser(
        webView: WebView?,
        filePathCallback: valueCallback<Array<Uri>>?,
        fileChooserParams: FileChooserParams?
    ): Boolean {
        /*
         * 이곳에 카메라 호출 및 갤러리 호출 작성
         * filePathCallback.onReceiveValue(arrayOf(Uri)) 호출
         * Uri = 디바이스 로컬 이미지 파일 Uri 값
         * filePathCallback 은 재사용을 위해 반드시 onReceiveValue 호출하여야 함.
         * file 선택 없을 시 onReceiveValue(null)로 처리
         */
        return  true;
    }
}
Plain Text
복사

웹 클라이언트에서 카카오톡 및 네이버톡톡 호출시 window.open() 을 사용하기 때문에 안드로이드 WebViewClient 설정 확인이 필요합니다.

만약 WebViewClient 설정이 자사 앱내에서 사용되어야한다면 따로 분기 처리하셔서 개발하셔야합니다.

// Java
webView.setWebViewClient(new WebViewClient()); // 삭제
Plain Text
복사

// Kotlin
webView.webViewClient = WebViewClient() // 삭제
Plain Text
복사

iOS

샘플 프로젝트 환경

•

Xcode 13.4.1

•

IOS Deployment Target 13.0

◦

WKPreferences 세팅

◦

javaScriptCanOpenWindowsAutomatically = true

let preferences = WKPreferences()
preferences.javaScriptCanOpenWindowsAutomatically = true
Plain Text
복사

•

WKWebViewConfiguration 세팅
- preferences = WKPreferences 세팅값 적용
- processPool = WKProcessPool()

let configuration = WKWebViewConfiguration()
configuration.preferences = preferences
configuration.processPool = WKProcessPool()
Plain Text
복사

•

WKWebView 세팅
- WKWebView Storyboard 세팅 (Default)
- translateAutoresizingMaskIntoConstraints = false
- UIDelegate
- NavigationDelegate

extension ViewController: WKUIDelegate, WKNavigationDelegate {
    self.wkWebView.translatesAutoresizingMaskIntoConstraints = false
    self.wkWebView.uiDelegate = self
    self.wkWebView.navigationDelegate = self
}
Plain Text
복사

•

카메라, 사진앨범 권한 요청 Description 추가
- 프로젝트 내 info.plist 추가
- Information Property List 내 추가
- Privacy - Camera Usage Description 추가
- Privacy - Photo Library Usage Description 추가

•

카카오톡 채널 연동
- WKUIDelegate, WKNavigationDelegate 추가
- https://bizmessage.kakao.com/chat/mo/ 해당 페이지 load 시 웹브라우저 호출

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
    let requestUrl = navigationAction.request
    let requestUrlString = requestUrl.url!.absoluteString
    print("load url : \(requestUrlString)")
    /* (target="_blank" 동작 코드 (사파리 호출) */
    if (navigationAction.targetFrame == nil) {
        UIApplication.shared.open(requestUrl.url!, options: [:], completionHandler: nil)
        decisionHandler(WKNavigationActionPolicy.cancel)
        return
    } else {
        /* 카카오톡 연동 */
        if (requestUrlString.contains("https://bizmessage.kakao.com/chat/mo/")) {
             /* 웹브라우저 (사파리) 호출 */
            UIApplication.shared.open(requestUrl.url!, options: [:], completionHandler: nil)
            decisionHandler(WKNavigationActionPolicy.cancel)
            return
        }
        decisionHandler(WKNavigationActionPolicy.allow)
    }
}
Plain Text
복사