모바일 웹뷰 설정

웹뷰 설정 코드를 확인해주세요.

Android

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

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

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

// 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);

// 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
} 

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

• 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;
    }
}

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

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

// Java
webView.setWebViewClient(new WebViewClient()); // 삭제 

// Kotlin
webView.webViewClient = WebViewClient() // 삭제

iOS

샘플 프로젝트 환경

• Xcode 13.4.1

• IOS Deployment Target 13.0

  • WKPreferences 세팅

  • javaScriptCanOpenWindowsAutomatically = true

let preferences = WKPreferences()
preferences.javaScriptCanOpenWindowsAutomatically = true

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

let configuration = WKWebViewConfiguration()
configuration.preferences = preferences
configuration.processPool = WKProcessPool()

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

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

• 카메라, 사진앨범 권한 요청 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)
    }
}