웹뷰란?
우선 웹뷰에 대해서 간단하게 알아보자.
웹뷰는 애플리케이션 내에서 웹 콘텐츠를 표시하는 GUI 구성 요소이다. 이는 사실상 앱 내에 내장된 미니 웹 브라우저로, 앱을 나가지 않고 사용자가 웹 콘텐츠를 볼 수 있도록한다.
웹뷰는 폼, 지도 및 기타 인터랙티브 요소와 같은 웹 기반 콘텐츠를 표시하는 방법을 제공하여 모바일 앱 개발에서 일반적으로 사용됩니다. 데스크톱 애플리케이션 및 웹 콘텐츠를 표시해야하는 다른 소프트웨어 플랫폼에서도 사용된다.
웹뷰는 확대, 스크롤, 캐싱 등과 같은 다양한 설정 및 기능으로 사용자 정의 할 수 있습니다. 또한 JavaScript 인터페이스를 통해 호스트 애플리케이션과 상호 작용하여 네이티브 애플리케이션에 웹 기반 기능을 통합 할 수 있다.
전반적으로 웹뷰는 애플리케이션 내에서 웹 콘텐츠를 표시하는 편리한 방법을 제공하여 사용자가 다른 앱이나 플랫폼 간에 전환하지 않고도 웹 기반 기능에 액세스하고 상호 작용할 수 있도록한다.
웹뷰와 앱간 통신 방법은?
1. JavaScript CustomEvent를 이용하는 방법
JavaScript CustomEvent는 웹 플랫폼에서 사용자 정의 이벤트를 생성하고 발송하는 메커니즘이다. WebView와 앱 간의 통신 컨텍스트에서 WebView에서 발생한 이벤트를 기반으로 앱에서 작업을 트리거하는 데 CustomEvent를 사용할 수 있다.
CustomEvent를 사용하려면 CustomEvent 생성자를 사용하여 사용자 정의 이벤트를 만들고 dispatchEvent 메서드를 사용하여 전달해야 한다. 앱에서 addEventListener 메서드를 사용하여 사용자 지정 이벤트를 수신하고 이벤트 데이터를 기반으로 작업을 트리거할 수 있다.
2. React에서 ios,Android 함수를 사용하는 방법
iOS/Android 함수는 React에서 앱에 정의된 기본 함수를 호출하여 WebView와 앱 간에 통신하기 위해 React에서 사용할 수 있다.
iOS의 경우 postMessage 메서드를 사용하여 WebView에서 앱으로 메시지를 보낼 수 있다. 앱에서 WKScriptMessageHandler 프로토콜을 사용하여 메시지를 수신하고 메시지 데이터를 기반으로 작업을 트리거할 수 있다.
Android 컨텍스트에서 addJavascriptInterface 메소드를 사용하여 JavaScript에서 호출할 수 있는 WebView에 Java 객체를 삽입할 수 있다. 앱에서 WebView에서 데이터를 수신하고 데이터를 기반으로 작업을 트리거하는 Java 개체의 메서드를 정의할 수 있다.
전반적으로 두 방법 모두 WebView와 앱 간의 통신을 활성화하는 데 사용할 수 있으며 방법 선택은 특정 사용 사례 및 요구 사항에 따라 다르다. CustomEvent는 WebView에서 발생한 이벤트를 기반으로 앱에서 이벤트를 트리거하는 데 유용하며, iOS/Android 기능은 React와 앱 간의 보다 직접적인 통신을 허용한다.
웹 앱간 통신 예제
React 코드
ios , Android 분기처리
import { IMobileClient } from "../types/MobileClient";
import { AndroidBehavior } from "../utils/AndroidBehavior";
import { IosBehavior } from "../utils/IosBehavior";
import { checkDevice } from "./mobile";
export function useMobile() {
const mobilePlatform = checkDevice();
let mobile: IMobileClient;
switch (mobilePlatform) {
case "iOS":
mobileBehavior = new IosBehavior();
break;
case "Android":
mobileBehavior = new AndroidBehavior();
break;
}
return mobile;
}
// JavaScript CustomeEvent이용 방법
useMemo(() => {
window.addEventListener("NativeEvent", event =>
mobile.getInfo(dispatch, event)
);
return () => {
window.removeEventListener("NativeEvent", event =>
mobile.getInfo(dispatch, event)
);
};
}, []);
//Android,Ios 함수 이용방법
useMemo(() =>{
mobile.getInfo()
},[]);export class AndroidBehavior implements IMobileClient {
//JavaScript CustomeEvent
getInfo(dispatch: any, event: any) {
const Token = event.detail.accessToken;
const UserId = event.detail.userId;
localStorage.setItem("token", Token);
localStorage.setItem("userId", UserId);
}
//Android 함수 이용방법
getInfo() {
window.Android.getInfo();
}
}
IOS 액션
export class IosBehavior implements IMobileClient {
//JavaScript CustomEvent이용방법
getInfo(dispatch: any, event: any) {
const Token = event.detail.accessToken;
const UserId = event.detail.userId;
localStorage.setItem("token", Token);
localStorage.setItem("userId", UserId);
}
//Ios 함수 이용방법
getInfo() {
window.webkit.messageHandlers.getInfo.postMessage('getInfo');
}
}
-
CustomEvent 사용시
접근 토큰과 사용자 ID가 포함 된JavaScript CustomEvent를 통해 웹 뷰에서 데이터를 수신한다. -
Android,Ios 함수 사용시
Android 및 iOS 구현에서 getInfo 함수를 호출하는 방법이 다르다.Android 구현에서는window.Android.getInfo()를 사용하여 Android 함수를 호출한다. 반면iOS 구현에서는window.webkit.messageHandlers.getInfo.postMessage('getInfo')를 사용하여 앱으로 메시지를 전송한다.
Android 코드
//JavaScript CustomeEvent이용 방법
private String NativeEvent(String NativeEvent, String data) {
StringBuffer buffer = new StringBuffer()
.append("window.dispatchEvent(\n")
.append(" new CustomEvent(\"").append(NativeEvent).append("\", {\n")
.append(" detail: {\n")
.append(" data: ").append(data).append("\n")
.append(" }\n")
.append(" }\n")
.append(" )\n")
.append(");");
return buffer.toString();
}
//Android 함수 이용방법
mWebView.addJavascriptInterface(new WebBridge(), "Android");
fun getInfo(message: String) {
// your native code
...
}Ios 코드
class WebViewController: UIViewController, WKUIDelegate, WKNavigationDelegate, WKScriptMessageHandler {
// ...
lazy var webview: WKWebView = {
let controller = WKUserContentController()
controller.add(self, name: "getInfo") // 추가!
let config = WKWebViewConfiguration()
config.userContentController = controller
let tempWebView = WKWebView(frame: .zero, configuration: config)
tempWebView.uiDelegate = self
tempWebView.navigationDelegate = self
return tempWebView
}()
//IOS 함수 이용방법
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
if (message.name == "getInfo") {
//user정보 Return해주는 코드
...
}
}
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(webview)
// ...
}
//CustomEvnet사용방법
webView.evaluateJavascript("window.dispatchEvent(new CustomEvent("NativeEvent", {
detail: {
accessToken:'' ,
userId: ''
}
}))") { (result, error) in }정리
웹뷰와 앱간 통신시 고려해야할 부분
-
다양한 플랫폼 처리: Android와 iOS는 WebView통신을 처리하는 API와 방법이 다르다. 개발자는 차이점을 잘 알고 그에 따라 코드를 수정해야 한다. -
보안 관리: WebView통신을 제대로 관리하지 않으면 보안 위험이 발생할 수 있다. 개발자는 데이터가 안전하게 전송되고 악용될 수 있는 취약점이 없는지 확인해야 한다. -
데이터 동기화: WebView와 앱 간의 데이터 전송은 양쪽에서최신 정보에 액세스할 수 있도록 동기화되어야 한다. -
충돌 해결: WebView와 앱 모두에서데이터를 편집하거나 업데이트하는 경우 해결해야 하는 충돌이 발생할 수 있다. -
오류 처리: 데이터 전송 중예상치 못한 오류가 발생할 수 있다. 개발자는 사용자 경험에 대한 중단을 최소화하는 방식으로 이러한 오류를 처리해야 한다.
웹뷰 도입시 장점
-
교차 플랫폼 호환성: WebView 기반 앱은 일반적으로 교차 플랫폼과 호환된다. 즉, 단일 코드베이스를 여러 플랫폼 및 장치에 사용할 수 있습니다. 이를 통해개발 시간을 절약하고 비용을 절감할 수 있다. -
향상된 기능: WebView 기반 앱은 웹 기술을 활용하여 대화형 웹 콘텐츠, 실시간 데이터 업데이트 및 타사웹 서비스와의 통합과 같은 고급 기능을 제공할 수 있다. -
손쉬운 업데이트: WebView 기반 앱은 네이티브앱과 달리 별도의 스토어 리뷰 없이 코드 푸시를 통해 쉽고 빠르게 업데이트할 수 있다. 이를 통해 앱을 최신 상태로 유지하고 사용자 요구에 응답할 수 있다. -
향상된 사용자 경험: WebView 기반 앱은 웹과 앱의 장점을 결합하여 보다매끄럽고 통합된 사용자 경험을 제공할 수 있다. 사용자는 앱을 떠나지 않고 웹 콘텐츠에 액세스할 수 있으며 앱은 웹의 기능을 활용하여 풍부하고 동적인 콘텐츠를 제공할 수 있다. -
개발 시간 및 비용 감소: WebView를 사용하여 앱을 개발하는 것이 처음부터 완전한 기본앱을 구축하는 것보다 빠르고 비용이 적게 드는 경우가 많다. 많은 웹 기반 기술과 도구를 쉽게 사용할 수 있고 앱에 쉽게 통합할 수 있기 때문이다.
전반적으로 앱에서 WebView를 개발하면 다양한 이점을 제공할 수 있으며 개발자가 여러 플랫폼 및 장치와 호환되는 보다 기능적이고 매력적인 앱을 만드는 데 도움이 될 수 있다.
