Swift 스키마(scheme) 처리 및 웹뷰 처리(WKWebView evaluateJavaScript)

안녕하세요.

오늘은 Swift WKWebView에서 웹 to 앱, 앱 to 웹 연결된 데이터 처리를 위한 방법에 대해서 고찰해 보겠습니다.

일단 Swift 웹뷰를 만드는 부분은 전에 아티클( https://nplayground.tistory.com/49 )를 참고를 하면 되고

WKWebView를 만들었다는 전제 아래 데이터 전달 방법에 대해서 생각해 보았다.

가장 기본적인 방법은 스키마(scheme)인 통한 데이터 전달이다.

그럼 스키마(scheme)는 무엇인가?

Swift에서 scheme(스키마)은 URL과 유사한 문자열을 사용하여 iOS 애플리케이션 간의 상호작용을 가능하게 하는 메커니즘을 의미합니다. 이는 특정 앱을 열거나, 앱 내의 특정 뷰로 이동하거나, 심지어 다른 앱을 실행하는 데 사용됩니다. 이러한 스키마은 URL 스키마이라고도 불리며, 특히 딥 링크(Deep Linking)나 애플리케이션 간 통신(Inter-App Communication)에 자주 활용됩니다.

URL 스키마의 주요 개념:

1. 커스텀 URL 스키마(Custom URL Schemes):
2. 유니버설 링크(Universal Links):

커스텀 URL 스키마 예시:

앱에서 특정 뷰(예: 프로필 페이지)로 이동하는 스키마을 만들고 싶다고 가정할 때, 다음과 같이 할 수 있습니다.

1. URL 스키마을 Info.plist에 등록:

1. 앱에서 URL 처리: 앱이 URL 스키마을 통해 열릴 때 응답하는 코드를 AppDelegate의 application(_:open:options:) 메서드에 구현합니다.

스키마의 활용 사례:

• 딥 링크(Deep Linking): 앱 내 특정 콘텐츠로 이동.
• 애플리케이션 간 통신(Inter-App Communication): 다른 앱 열기 또는 앱 간 데이터 전송.
• 커스텀 액션(Custom Actions): 앱 내 특정 기능 실행 (예: 채팅 열기, 구매하기 등).

결론적으로, Swift의 스키마은 앱 간의 상호작용을 원활하게 하고, 웹과 앱 간의 원활한 내비게이션 경험을 제공하는 강력한 도구입니다.

 

자 이제 예를 들어, Swift의 WKWebView를 사용하여 특정 스키마를 처리하는 코드를 살펴보겠다.

설명

• WKNavigationDelegate를 구현하여 웹뷰의 탐색 동작을 제어합니다.
• webView(_:decidePolicyFor:decisionHandler:) 메서드에서 URL의 스키마를 확인하고, 특정 스키마(myapp://)가 감지되면 이를 처리합니다.
• 커스텀 스키마를 처리하는 handleCustomScheme(url:) 메서드에서는 URL의 호스트와 쿼리 매개변수 등을 분석하여 특정 기능을 수행할 수 있습니다.

이 예시에서는 myapp://open?param=value와 같은 URL이 감지될 때 이를 처리하고, 그에 맞는 동작을 수행하도록 코드를 작성했다.

이러한 방식으로 앱에서 웹뷰를 통해 특정 스키마를 처리할 수 있다. 이는 앱 내에서 특정 기능을 호출하거나 데이터를 전달하는 데 유용하게 사용할 수 있다.

해당 부분을 통해서 웹 to 앱으로 데이터를 전달할 수 있다는 것을 알 수 있다.

그럼 앱 to 웹 로 데이터 전달 하려면 무엇을 하면 될까?

그것은 바로 WKWebView evaluateJavaScript이다.

WKWebView에서 JavaScript 코드를 실행할 수 있게 해주는 메서드이다.. 이를 사용하여 앱의 웹뷰 내에서 JavaScript 코드를 동적으로 실행하고, 그 결과를 Swift 코드로 가져올 수 있다.

주요 포인트

• JavaScript 코드 실행: 메서드에 전달된 문자열이 JavaScript 코드로 해석되어 실행됩니다.
• 결과 처리: JavaScript 실행 결과는 클로저의 result로 반환됩니다. 이 결과는 Optional 타입이며, 성공 시 해당 값이 result에 저장되고, 실패 시 error가 반환됩니다.
• 비동기 처리: 이 메서드는 비동기적으로 실행됩니다. JavaScript 코드가 완료되면 클로저가 호출되므로, 네트워크 호출이나 페이지가 로드될 때까지 기다리는 등의 비동기 작업에 적합합니다.
• 안전한 코드 실행: 이 메서드는 외부 소스에서 입력된 JavaScript 코드를 실행할 때 주의해야 합니다. 악의적인 코드 실행을 방지하려면 신뢰할 수 있는 JavaScript 코드만 실행하는 것이 좋습니다.

활용 예시

• 페이지 데이터 가져오기: 웹 페이지의 제목, HTML 요소의 내용 등을 가져올 수 있습니다.
• 웹 페이지 조작: 웹 페이지의 특정 요소를 조작하거나, 사용자 인터페이스를 동적으로 변경할 수 있습니다.
• 디버깅: JavaScript와 Swift 간의 통신을 디버깅하거나 테스트할 때 유용합니다.

주의사항

JavaScript 실행 결과는 다양한 타입일 수 있습니다. 예를 들어, 문자열, 숫자, 배열, 객체 등이 반환될 수 있으며, 클로저에서 적절한 타입으로 캐스팅해야 합니다.

evaluateJavaScript는 앱과 웹 콘텐츠 간의 상호작용을 강화하는 강력한 도구입니다. 이를 통해 웹뷰 내의 JavaScript 기능을 활용할 수 있습니다.

웹 개발자와 맞춰서 webView.evaluateJavaScript(해당 function)을 사용하면 원활하게 데이터를 전달할 수 있다.

하나의 예로 

- 스키마로 데이터를 받아 웹에서 요청하는 항목을 전달하면

myapp://play_list?param=JsonData

 

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {

if let url = navigationAction.request.url {

     if url.scheme == "myapp" {- 스키마 처리 시작

- 스키마 host 항목을 축출 후 param JsonData 데이터를 가져온 후 가공해서 다시 웹에서 설정한 공통 function으로 evaluateJavaScript 이용하여 값을 삽입 후 전달 할 수 있다.

           if scheme_host == "play_list" { - 스키마 호스트

             if let param = url.query {- 스키마 파라미터

                print("Custom Scheme Param: \(param)")

                webView.evaluateJavaScript("List_mode(\(JsonData));")- 가공 JsonData 웹뷰 function으로 Value 삽입 이후  완료

                decisionHandler(.cancel)

                return

             }

           }

       }

     }

}

 

-- 즉 요약을 하자면

공통 스키마 구조를 정리한 뒤 웹, 앱에서 각각 공통 구조 설정 하고

웹 to 앱 -  스키마 전달 myapp://play_list?param=JsonData

앱 to 웹 

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {

안에 항목에서 스키마 항목 가져온 후 필요에 따라 

evaluateJavaScript 통해서 웹에 작업 수행 

완료!