[iOS, SwiftUI] 하이브리드(Hybrid) 앱이란 ? 웹뷰<->네이티브 통신 구현하기, (SwiftUI + WebView evaluateJavaScript + javascript messagehandler)

하이브리드 앱(Hybid Application) ?

그전에 먼저 알아야 할 것:

 

1. 네이티브 앱(Native App)

:  Android 또는 iOS 같은 어떤 구체적인 플랫폼만을 위해 만들어진 응용 프로그램을 네이티브 앱(Native App)으로 디바이스에 다운로드하여 설치할 수 있는 앱

• 장
  • 각 운영체제에 최적화된 방식으로 만들어지므로 앱의 구동 속도가 빠르고 안정적
  • 높은 사양의 그래픽으로 원하는 디자인을 구현 가능
• 단 
  • 다른 운영체제에서 호환이 되지 않기 때문에 안드로이드와 iOS 앱을 별도로 개발해야 함
  • 앱에 수정사항이 생기는 경우 앱 마켓의 심사를 거치고 전체 업데이트를 진행

 

2. 웹 앱(Web App)

:  데스크톱 또는 모바일 디바이스의 브라우저에서 액세스 할 수 있는 앱

• 장
  • 인터넷 브라우저를 기반으로 작동하기 때문에 별도의 앱을 설치하지 않아도 됨
  • 표준 웹 언어로 만들 수 있기 때문에 상대적으로 제작 비용이 저렴하고 개발 기간도 짧은 편
• 단 
  • 디바이스에 접근 권한이 없기 때문에 카메라나 음성 인식 등의 기능을 활용할 수 없음
  • 네이티브 앱에 비해 상대적으로 구동 속도가 느리고 안정성도 떨어짐

 

하이브리드 앱은 이 두 가지를 짬뽕한 것, 100% 웹앱, 100% 네이티브 앱이 아닌 앱이다.

즉, JavaScript, HTML 및 CSS와 같이 잘 알려진 언어와 프레임 워크를 사용하여 다양한 플랫폼에서 사용할 수 있는 하이브리드 앱을 빠르게 만들 수 있다.

비용도 시간도 덜 들고 유지 보수도 쉽고 기본 API 기능도 사용 가능하나 오프라인(offline)으로는 작동하지 않고 똑같은 코드를 베이스로 하기 때문에 안드로이드나 아이폰 등 각 디바이스의 특정 기능을 사용하는 데 문제가 발생할 수도 있다.

 

• 장
  • 웹 개발이 완료되어 있는 경우 개발 소요시간이 적다.
    이미 웹으로 개발되어 있는 서비스를 앱으로 출시하기만 하면 되기 때문에 네이티브 앱에 비하여 좀 더 빠르게 제작할 수 있음
  • 모바일 웹에 푸시 알림, 위치기반 기능을 확장할 수 있다.
    하이브리드로 제작된 앱은 네이티브와 마찬가지로 푸시 알림, 외부 앱 연동, 위치기반 기능을 구현할 수 있음
  • 업데이트 시 매번 심사받을 필요가 없다.
    플랫폼 개발 시 초기에 발생하는 UI 변경 및 기능개편이 자주 발생하게 되는데
    하이브리드 앱은 네이티브와 관련된 기능이 변경된 것이 아니라면 매번 앱을 심사받을 필요가 없음
• 단
  • 네이티브에 비해 매끄럽지 못한 UI
    하이브리드 앱은 내부 구현을 전부 웹으로 하기 때문에 네이티브 앱처럼 부드러운 UI전환을 구현하기가 힘듦
  • 네트워크가 연결된 상태에서만 사용 가능하다.
    우리가 흔히 사용하는 앱들은 네트워크 연결 상태와는 별개로 앱을 사용 가능
    하이브리드 앱에 경우 네트워크가 연결돼있지 않은 경우 앱에 일부 기능들을 이용하게끔 할 수는 있지만
    대부분에 기능들을 웹으로 구현되기 때문에 네트워크 상태에 따라 원활한 서비스 제공이 안될 수 있음

---

하이브리드 앱(Hybid Application)  웹뷰<->네이티브 통신 구조

---

하이브리드 앱(Hybid Application) 구현 GOAL

하이브리드 앱을 개발할 때는 네이티브(iOS)와 웹(JS) 간의 통신을 통해 웹에서 네이티브의 기능을, 네이티브에서 웹을 호출할 수 있는 것이 핵심이다. 물론 그 바탕은 웹뷰에서 이루어진다.

 

아래 스텝에 따라 js와 native 간 데이터를 주고받는 과정을 알아보자~

💚 Step1. js -> native 데이터 전송

1. webview와 js에 Bridge 세팅하기
   • WKUserContentController 사용하기
2. js에서 webview로 전송한 데이터 native에서 처리하기
   • messageHandlers 사용하기

💚 Step2. native -> js 데이터 전송

1. 웹 뷰에서 원하는 시점에 js 함수 호출하기
   • evaluateJavaScript(_:) 사용하기

---

💚 Step1. js -> webview 데이터 전송

js에서 webview에 데이터를 전송하기 위해서는 swift와 javascipt 사이 연결해 주는 Bridge가 필요하다. 핵심!

Bridge를 통해 웹 페이지의 이벤트를 받아서 native에서 처리가 가능하다!!!!

1. webview와 js에 Bridge 세팅하기

따라서 먼저, 웹 뷰(WKWebView) 초기화 + Webview와 js에 Bridge 등록을 해준다.

 

1) UIViewRepresentable을 준수(conform)하고 웹 뷰를 감싸는 WebView를 생성 + Webview에 Bridge 등록

웹 뷰(WKWebView) 생성하며, 메시지핸들러를 받기 위한 브릿지를 등록해 준다.

how? WKUserContentController을 생성하여 그 안에 사용할 Bridge 이름을 추가해 준다. 

내가 연결할 브릿지 이름 : WKBridge >> 이 부분은 앱과 웹에서 동일하게 맞추어야 정상 작동한다!*주의*

 

WKUserContentController에 해당 핸들러를 등록해 주고 

WKWebViewConfiguration을 생성하여 WKUserContentController을 userContentController로 넣어준다.

struct WebView: UIViewRepresentable {
    typealias UIViewType = WKWebView
    
    var url: URL?
    
    func makeUIView(context: Context) -> UIViewType {
        let contentController = WKUserContentController()
        contentController.add(self.makeCoordinator(),
                              name: "WKBridge")
        
        let configuration = WKWebViewConfiguration()
        configuration.preferences = preferences
        configuration.userContentController = contentController
        
        ...

생성한 webview에 원하는 remote url로 페이지를 로드한다.

지난 Firebase 기반 웹 호스팅 배포한 화면으로 하이브리드 앱을 만들었다.

    let hostURL = "https://hostingdemo-a9104.web.app/"
    var body: some View {
        VStack {
            WebView(url: hostURL, viewModel: viewModel)

 

2) js에 Bridge 등록

웹에서는 window.webkit.messageHandlers로 접근하여 앱에 메시지를 보낼 수 있다.

 

따라서 js에서는 "MessageHanlder"를 사용하여 등록한다.

• messageHandler란 javascript에서 native로 이벤트를 보내고 싶은 경우, javascript 쪽에서 정의한 메소드 window.webkit.messageHandlers.{메시지 핸들러 이름}.postMessage("전달할 메시지 입력")

<. js 파일 >

웹 뷰에서 설정한 브릿지 이름과 동일한 "WKBridge"로 Bridge 함수를 sendScriptMessage 함수 안에 선언했다. 

function sendScriptMessage(data) {
  // 웹뷰에서 네이티브로 메시지 전달
  const sendData = { message: data };
  window.webkit.messageHandlers.WKBridge.postMessage(sendData);
}

 

javascript 함수가 실행한 결과를 native에 전달하여 처리하는 로직을 위해

html에서 그린 할 일 추가하는 버튼 클릭 시 수행하는 함수(addTodo()) 안에서 sendScriptMessage를 불러주고 입력한 데이터를 파라미터로 넣어주었다.

<. js 파일 >

function addTodo(){
    ...
    sendScriptMessage(addValue.value)
    ...
}

<. html 파일 >

<button type="button" id = "btn" onclick="addTodo()"><i class="xi-plus xi-2x"></i></button>
        </div>

 

2.  js에서 webview로 보낸 데이터 native code로 처리하기

그럼 js에서 보낸 데이터가 잘 왔는지 확인해 보자~

 

연결한 버튼을 클릭해서 웹 페이지(js)에서 sendScriptMessage 함수가 호출했을 때 Bridge는 WKWebView에서 핸들링한다.

WKWebView에서 WKScriptMessageHandler프로토콜을 위임받은 후 userContentController 메서드를 생성한다.

웹뷰에서 호출한 sendScriptMessage이 실행되면, 네이티브에서 실행되는 부분이다.

 

message.name으로 어떤 브릿지가 들어왔는지 확인 가능하고,

브릿지 별로 들어온 message.body를 handling 해주면 된다!!!

나는 "WKBridge"로 들어온 브릿지를 분리하여 receivedJsonValueFromWebView 함수로 데이터를 전달했다.

 

extension WebView.Coordinator: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController,
                                 didReceive message: WKScriptMessage) {
        if message.name == "WKBridge" {
            delegate?.receivedJsonValueFromWebView(value: message.body as! [String:Any?])
        } else if let body = message.body as? String {
            delegate?.receivedStringValueFromWebView(value: body)
        }
    }
}

 

receivedJsonValueFromWebView 함수에서 전달받은 데이터를 핸들링해 준다~~!!

 

    func receivedJsonValueFromWebView(value: [String : Any?]) {
        if let data = value["message"] {
            print("JSON 데이터가 웹으로부터 옴: \(String(describing: data!))")
        }
    }

 

[구현 결과]

웹뷰에서 입력한 데이터가 브릿지 타고 native의 message.body에 도착한 데이터를 출력해 보았다.

---

💚 Step2. webview -> js 데이터 전송

반대로 native에서 처리한 값을 js로 보내보자 !

 

방법은 native code에서 javascript code에 정의되어 있는 함수 실행 시키고 데이터는 해당 함수에서 핸들링하면 된다.

그럼 먼저,

js 코드의 함수를 어떻게 부르냐 웹 뷰에서 evaluateJavaScript(_:)를 통해 호출 가능하다!!

아래 js에서 선언한 callFromNative(data) 함수를 호출하기 위해서

<. js 파일 >

function callFromNative(data){
    alert("Received :", data);
    return "OK";
}

 

해당 함수를 파라미터로 호출하면 된다.

let args: Any = "test"
webView.evaluateJavaScript("callFromNative('\(args)');") { result, error in
    if let error = error {
        print(error.localizedDescription)
    } else if let result = result {
        print(result)
    }
}

---

해당 evaluateJavaScript(_:)를 원하는 시점에 호출하려면? (with SwiftUI)

UIKit 단순히 버튼 이벤트로 호출하면 되지만, SwiftUI에서는 복잡하다ㅠ

 

ContentView의 버튼을 클릭해서 js에서 선언한 callFromNative(data) 함수를 호출해 보자!

 

1) ObservableObject을 상속받는 WebViewModel 클래스 생성

• functionCaller : send를 호출해서 구독자들에게 값을 전파하는 publisher 
• shouldUpldateView : updateView를 실행해야 하는지 여부를 알려주는 Bool 값

import Combine

class WebViewModel: ObservableObject {
    var functionCaller = PassthroughSubject<String, Never>()
    var shouldUpdateView = true
}

 

2) WebView 내에 위에서 만든 WebViewModel에 대한 상태 변수를 추가한다.

struct WebView: UIViewRepresentable {
// ... //
@StateObject var data: WebViewModel
// ... //
}

3) WebView 내에 코디네이터를 추가

• tieFunctionCaller(…)
  • WebViewData의 functionCalller를 소환하는 역할
  • functionCalller는 PassthroughSubject이므로 sink를 호출 가능
  • 어느 특정 조건이 되면(예: 버튼을 누른 경우) String 값이 배출
  • sink를 통해 배출된 js값(String 타입)을 webView?.evaluateJavaScript(js)로 실행

import Combine
// ... //
func makeCoordinator() -> Coordinator {
    return Coordinator(self)
}
class Coordinator: NSObject, WKNavigationDelegate {
    /// WebView Representable
    var parentWebView: WebView
    var webView: WKWebView? = nil
    
    private var cancellable: AnyCancellable?
    
    init(_ parentWebView: WebView) {
        self.parentWebView = parentWebView
        super.init()
    }
    
	//webViewmodel 의 functionCaller 를 소환
    func tieFunctionCaller(data: WebViewModel) {
        print("Passthrough:", #function)
        //functionCaller 는 PassthroughSubject이므로 Sink를 호출할 수 있다
        cancellable = data.functionCaller.sink(receiveValue: { js in
            self.webView?.evaluateJavaScript(js)
			print("js 내 \(js) 호출 완료")
        })
    }
}

 

4) WebView 내에 updateUIView를 작성

updateUIView는 웹뷰가 실행된 시점에 바로 실행되며, makeUIView 다음에 실행된다.

지정된 뷰의 상태를 담의 새 정보로 업데이트하는 메소드!

func updateUIView(_ uiView: UIViewType, context: Context) {
        guard data.shouldUpdateView else {
        data.shouldUpdateView = false
        return
    }
    context.coordinator.tieFunctionCaller(data: data)
    context.coordinator.webView = uiView
}

 

5) SwiftUI의 뷰(ContentView 등) 내부에 WebViewModel를 추가

struct ContentView: View {
    // ... //
    @StateObject var webViewData = WebViewModel()
    // ... //
}

 

6) SwiftUI의 뷰(ContentView 등) 내부에 WebView를 추가

위에서 만든 webViewData를 WebView의 파라미터로 추가

var body: some View {
	WebView(url: URL(string: "https://example.con"), data: webViewData)
}

 

7) webViewData를 이용하여 버튼을 누르면 특정 자바스크립트 함수가 실행되도록 한다!

let args: Any = "test"
...
Button {
    webViewData.functionCaller.send(
        """
        callFromNative('\(args)')
        """
    )
} label: {
    Image(systemName: "icloud.and.arrow.up.fill")
}

 

[구현 결과]

safari로 디버깅하여 값이 js에 제대로 들어왔음을 확인했다.

이제 js <-> webview 양뱡향으로 데이터를 주고받는 방법을 터득했습니다!!!!

---

*웹뷰 사파리로 디버깅하기

웹뷰 디버깅이 사파리에서 잘 되었었는데, 안돼서 확인해 보니

ios 16.4 이후  inspectable 함수가 추가되면서, webview에 설정해 줘야지 디버깅이 가능해졌다.

https://developer.apple.com/documentation/safari-developer-tools/enabling-inspecting-content-in-your-apps

@property(nonatomic, getter=isInspectable) BOOL inspectable;

1. 웹뷰 설정하는 부분에 아래 코드 추가해 준다.

if #available(iOS 16.4, *) {
	#if DEBUG
	webView.isInspectable = true  // webview inspector 가능하도록 설정
	#endif
}

 

이제, 사파리로 디버깅 가능~~

방법은

2. 빌드 > 사파리 실행 > 상단 메뉴의 '개발자용' 클릭 > 시뮬레이터 클릭!!

 

클릭하면 아래처럼 웹 디버깅할 수 있는 화면이 나옵니다~!