웹뷰 설정 코드를 확인해주세요.
Android
샘플 프로젝트 환경 (샘플코드 다운로드)
AndroidManifest.xml에서 권한추가를 아래와 같이 설정해주세요.
<!-- AndroidManifest.xml 인터넷 사용권한 추가 -->
<manifest ...>
<uses-permission android:name="android.permission.INTERNET"/>
</manifest>
XML
복사
웹뷰 필수 설정값을 아래와 같이 설정해주세요.
자바 필수 웹뷰 설정값
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);
Java
복사
코틀린 필수 웹뷰 설정값
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
}
Kotlin
복사
안드로이드 갤러리 설정 가이드는 아래를 꼭 참고해주세요.
•
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;
}
}
Java
복사
웹 클라이언트에서 카카오톡 및 네이버톡톡 호출시 window.open() 을 사용하기 때문에 안드로이드 WebViewClient 설정 확인이 필요합니다.만약 WebViewClient 설정이 자사 앱내에서 사용되어야한다면 따로 분기 처리하셔서 개발하셔야합니다.
// Java
webView.setWebViewClient(new WebViewClient()); // 삭제
// kotlin
webView.webViewClient = WebViewClient() // 삭제
Java
복사
iOS
샘플 프로젝트 환경 (샘플코드 다운로드)
•
Xcode 13.4.1
•
IOS Deployment Target 13.0
WKPreferences 세팅
javaScriptCanOpenWindowsAutomatically = true
let preferences = WKPreferences()
preferences.javaScriptCanOpenWindowsAutomatically = true
Swift
복사
•
WKWebViewConfiguration 세팅
preferences = WKPreferences 세팅값 적용
•
processPool = WKProcessPool()
let configuration = WKWebViewConfiguration()
configuration.preferences = preferences
configuration.processPool = WKProcessPool()
Swift
복사
•
WKWebView 세팅
WKWebView Storyboard 세팅 (Default)
•
translateAutoresizingMaskIntoConstraints = false
•
UIDelegate
•
NavigationDelegate
extension ViewController: WKUIDelegate, WKNavigationDelegate {
self.wkWebView.translatesAutoresizingMaskIntoConstraints = false
self.wkWebView.uiDelegate = self
self.wkWebView.navigationDelegate = self
}
Swift
복사
•
카메라, 사진앨범 권한 요청 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: { result in
if (result) {
/* 웹브라우저 호출 이후 처리 */
}
})
decisionHandler(WKNavigationActionPolicy.cancel)
return
}
decisionHandler(WKNavigationActionPolicy.allow)
}
}
Swift
복사
리액트 네이티브
패키지 추가
yarn 사용
$ yarn add react-native-webview
JavaScript
복사
npm 사용
$ npm install --save react-native-webview
JavaScript
복사
Link native dependencies
$ react-native link react-native-webview
JavaScript
복사
iOS:
CocoaPods을 사용하는 경우 ios 디렉토리에서 실행해주세요.
$ pod install
JavaScript
복사
react-native-webview 속성 설정
<WebView
source={{ uri }} // 웹채팅창 URL
// 웹뷰 필수 속성
javaScriptEnabled
javaScriptCanOpenWindowsAutomatically
domStorageEnabled
cacheMode='LOAD_NO_CACHE'
/>
JavaScript
복사
카메라/앨범 사용해 업로드 하려면 권한 설정이 필요합니다.
플러터
패키지 추가
flutter 사용
$ flutter pub add webview_flutter
JavaScript
복사
pubspec.yaml에 추가
dependencies:
webview_flutter: ^3.0.4
JavaScript
복사
webview_flutter 추가
import 'package:webview_flutter/webview_flutter.dart';
Dart
복사
Widget build(BuildContext context) {
return const WebView(
initialUrl: url, // 웹채팅창 URL
javascriptMode: JavascriptMode.unrestricted, // javascript 사용 설정
);
}
// webview_flutter에는 웹뷰 필수 속성이 기본으로 추가되어 있습니다.
Dart
복사
카메라/앨범 사용해 업로드 하려면 권한 설정이 필요하고 안드로이드는 fileChooser의 구현이 필요합니다.