<div id="readability-page-1" class="page"><div><img src="https://velog.velcdn.com/images/skyepodium/post/f086daab-f6cb-4cf2-bdc5-b9032b788008/image.gif">
<h2 id="1-상황">1. 상황</h2>
웹에 JavaScript SDK 만 적용된 <a href="https://developers.kakao.com/docs/latest/ko/message/js-link">카카오 공유하기</a>는 하이브리드 앱(웹뷰)에서 동작하지 않습니다.
<ul>
<li>PC 브라우저(크롬, 사파리 등) - (O)</li>
<li>Mobile 브라우저(크롬, 사파리 등) - (O)</li>
<li>웹뷰 - (X)</li>
</ul>
<blockquote>
<a href="https://devtalk.kakao.com/t/topic/125117">카카오톡 devtalk 문의</a> 결과 네이티브 App의 수정없이는 절대 동작하지 않습니다.
</blockquote>
<h2 id="준비사항">준비사항</h2>
카카오 공유하기 <a href="https://developers.kakao.com/docs/latest/ko/sdk-download/js">JavaScript SDK V2</a>가 연동된 웹 (주의: V1은 동작안함)
저는 웹으로 이것을 사용합니다. 
AWS S3에 배포한 kakao 공유하기 예제 (vue2) - <a href="http://kakao-share.s3-website.ap-northeast-2.amazonaws.com/">http://kakao-share.s3-website.ap-northeast-2.amazonaws.com/</a>
<img src="https://velog.velcdn.com/images/skyepodium/post/ad440885-6c57-4f3d-b645-76e4fe583d19/image.png">
<blockquote>
swift 프로젝트 생성부터 최소한의 코드 진행합니다.
<ul>
<li>참고사항: <a href="https://developers.kakao.com/docs/latest/ko/getting-started/sdk-js#dev-guide-ios">iOS 하이브리드 앱 - 카카오 가이드</a></li>
</ul>
</blockquote>
<h2 id="1-xcode-프로젝트-생성">1. xcode 프로젝트 생성</h2>
1) Create a new Xcode project 
<img src="https://velog.velcdn.com/images/skyepodium/post/a05b384c-378f-487d-b777-7ef13a93bdf8/image.png">
2) Multiplatform - iOS - App 선택 
<img src="https://velog.velcdn.com/images/skyepodium/post/5896e978-a6e0-468d-9ca1-af05b1d6e22c/image.png">
3) 입력 
Product Name - KakaoShare 
Interface - SwiftUI 
Language - Swift 
<img src="https://velog.velcdn.com/images/skyepodium/post/6e5611b0-d2e5-4fe4-ab49-c0a4b383e643/image.png">
<h2 id="2-plist-설정">2. plist 설정</h2>
웹뷰에서 네트워크를 사용한다는 설정을 추가합니다.
1) info 진입 
좌측 패널 - project name 클릭 - info 클릭 
<img src="https://velog.velcdn.com/images/skyepodium/post/6e16743d-5544-40c5-8e97-6a308086e720/image.png">
2) App Transport Security Settings 추가
info 영역 제일 하단 클릭 하고 엔터를 누르면 새로운 row가 추가됩니다. 
<img src="https://velog.velcdn.com/images/skyepodium/post/b13cd59a-29c9-4272-8505-2e90208dc67b/image.png">
<code>App Transport Security Settings</code> 입력 
<img src="https://velog.velcdn.com/images/skyepodium/post/3bb7d017-059b-4158-ac1a-626300baafa3/image.png">
2) Allow Arbitrary Loads 추가 
추가된 <code>App Transport Security Settings</code> 좌측 화살표를 눌러서 아래로 향하도록 만듭니다. 
<img src="https://velog.velcdn.com/images/skyepodium/post/1a9e2136-e74c-48a9-90a3-f89f7ddf0cc9/image.png">
Add Row 클릭 
<img src="https://velog.velcdn.com/images/skyepodium/post/a898624c-125e-485f-b144-87397720288f/image.png">
<code>Allow Arbitrary Loads</code> 입력
<img src="https://velog.velcdn.com/images/skyepodium/post/caa868d8-a1b1-483b-b487-389b6feb4b77/image.png">
<h2 id="3-코드-입력">3. 코드 입력</h2>
<h3 id="1-webviewswfit-파일-생성">1) WebView.swfit 파일 생성</h3>
경로: /KakaoShare/WebView.swfit
<pre><code>import Foundation
import SwiftUI
import WebKit

struct webView:UIViewRepresentable {
 
 let url: URL
 
 func makeUIView(context: Context) -&gt; some UIView {
 let webView = WKWebView()
 let request = URLRequest(url: url)
 webView.load(request)
 return webView
 }
 
 func updateUIView(_ uiView: UIViewType, context: Context) {
 
 }
 
 func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -&gt; Void ) {
 print(navigationAction.request.url?.absoluteString ?? "")

 // 카카오 SDK가 호출하는 커스텀 URL 스킴인 경우 open(_ url:) 메서드를 호출합니다.
 if let url = navigationAction.request.url , ["kakaolink"].contains(url.scheme) {

 // 카카오톡 실행 가능 여부 확인 후 실행
 if UIApplication.shared.canOpenURL(url) {
 UIApplication.shared.open(url, options: [:], completionHandler: nil)
 }

 decisionHandler(.cancel); return
 }

 // 서비스에 필요한 나머지 로직을 구현합니다.
 decisionHandler(.allow)
 }
}</code></pre>
<h3 id="2-contentviewswfit-수정">2) ContentView.swfit 수정</h3>
연동할 웹뷰의 도메인을 입력합니다.
경로: /KakaoShaore/ContentView.swift
<pre><code>import SwiftUI

struct ContentView: View {
 var body: some View {
 VStack {
 // 연동할 웹뷰 도인 입ㅕㄱ
 webView(url: URL(string: "http://kakao-share.s3-website.ap-northeast-2.amazonaws.com/")!)
 }
 }
}

struct ContentView_Previews: PreviewProvider {
 static var previews: some View {
 ContentView()
 }
}</code></pre>
<h3 id="3-viewcontrollerswift-추가">3) ViewController.swift 추가</h3>
경로: /KakaoShaore/ViewController.swift
<pre><code>import Foundation
import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {

 // 웹뷰 목록 관리
 var webViews = [WKWebView]()

 /// ---------- 팝업 열기 ----------
 /// - 카카오 JavaScript SDK의 로그인 기능은 popup을 이용합니다.
 /// - window.open() 호출 시 별도 팝업 webview가 생성되어야 합니다.
 ///
 func webView(_ webView: WKWebView,
 createWebViewWith configuration: WKWebViewConfiguration,
 for navigationAction: WKNavigationAction,
 windowFeatures: WKWindowFeatures
 ) -&gt; WKWebView? {
 guard let frame = self.webViews.last?.frame else {
 return nil
 }

 // 웹뷰를 생성하여 리턴하면 현재 웹뷰와 parent 관계가 형성됩니다.
 return createWebView(frame: frame, configuration: configuration)
 }

 /// ---------- 팝업 닫기 ----------
 /// - window.close()가 호출되면 앞에서 생성한 팝업 webview를 닫아야 합니다.
 ///
 func webViewDidClose(_ webView: WKWebView) {
 destroyCurrentWebView()
 }

 // 웹뷰 생성 메서드 예제
 func createWebView(frame: CGRect, configuration: WKWebViewConfiguration) -&gt; WKWebView {
 let webView = WKWebView(frame: frame, configuration: configuration)
 
 // set delegate
 webView.uiDelegate = self
 webView.navigationDelegate = self
 
 // 화면에 추가
 self.view.addSubview(webView)

 // 웹뷰 목록에 추가
 self.webViews.append(webView)

 // 그 외 서비스 환경에 최적화된 뷰 설정하기

 
 return webView
 }

 // 웹뷰 삭제 메서드 예제
 func destroyCurrentWebView() {
 // 웹뷰 목록과 화면에서 제거하기
 self.webViews.popLast()?.removeFromSuperview()
 }

}</code></pre>
<h2 id="4-빌드">4. 빌드</h2>
<h3 id="1-빌드-타켓">1) 빌드 타켓</h3>
맥북이랑 연결된 아이폰 선택 
<img src="https://velog.velcdn.com/images/skyepodium/post/15469e48-c12b-4390-a091-4b29ad239a5d/image.png">
<h3 id="2-빌드">2) 빌드</h3>
<img src="https://velog.velcdn.com/images/skyepodium/post/87c995e5-be2f-4ba5-a7a4-fd0491360669/image.png">
<h2 id="5-확인">5. 확인</h2>
<img src="https://velog.velcdn.com/images/skyepodium/post/13e9127b-f401-430a-a177-e34cf1bcc317/image.gif">
<h2 id="6-사용한-코드">6. 사용한 코드</h2>
<ul>
<li>iOS 저장소 - <a href="https://github.com/skyepodium/kakao-share-hybrid-app-ios">https://github.com/skyepodium/kakao-share-hybrid-app-ios</a></li>
<li>vue 저장소 - <a href="https://github.com/skyepodium/kakao-share">https://github.com/skyepodium/kakao-share</a></li>
</ul>
<h2 id="7-소감">7. 소감</h2>
디질것 같다</div></div>

skyepodium.log

1. 상황
웹에 JavaScript SDK 만 적용된 카카오 공유하기는 하이브리드 앱(웹뷰)에서 동작하지 않습니다.
PC 브라우저(크롬, 사파리 등) - (O)
Mobile 브라우저(크롬, 사파리 등) - (O)
웹뷰 - (X)
카카오톡 devtalk 문의 결과 네이티브 App의 수정없이는 절대 동작하지 않습니다.
준비사항
카카오 공유하기 JavaScript SDK V2가 연동된 웹 (주의: V1은 동작안함)
저는 웹으로 이것을 사용합니다. 
AWS S3에 배포한 kakao 공유하기 예제 (vue2) - http://kakao-share.s3-website.ap-northeast-2.amazonaws.com/
swift 프로젝트 생성부터 최소한의 코드 진행합니다.
참고사항: iOS 하이브리드 앱 - 카카오 가이드
1. xcode 프로젝트 생성
1) Create a new Xcode project
2) Multiplatform - iOS - App 선택
3) 입력
Product Name - KakaoShare
Interface - SwiftUI
Language - Swift
2. plist 설정
웹뷰에서 네트워크를 사용한다는 설정을 추가합니다.
1) info 진입
좌측 패널 - project name 클릭 - info 클릭
2) App Transport Security Settings 추가
info 영역 제일 하단 클릭 하고 엔터를 누르면 새로운 row가 추가됩니다.
App Transport Security Settings 입력
2) Allow Arbitrary Loads 추가
추가된 App Transport Security Settings 좌측 화살표를 눌러서 아래로 향하도록 만듭니다.
Add Row 클릭
Allow Arbitrary Loads 입력
3. 코드 입력
1) WebView.swfit 파일 생성
경로: /KakaoShare/WebView.swfit
import Foundation
import SwiftUI
import WebKit
struct webView:UIViewRepresentable {
    let url: URL
    func makeUIView(context: Context) -> some UIView {
        let webView = WKWebView()
        let request = URLRequest(url: url)
        webView.load(request)
        return webView
    }
    func updateUIView(_ uiView: UIViewType, context: Context) {
    }
    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void ) {
        print(navigationAction.request.url?.absoluteString ?? "")
        // 카카오 SDK가 호출하는 커스텀 URL 스킴인 경우 open(_ url:) 메서드를 호출합니다.
        if let url = navigationAction.request.url , ["kakaolink"].contains(url.scheme) {
            // 카카오톡 실행 가능 여부 확인 후 실행
            if UIApplication.shared.canOpenURL(url) {
                UIApplication.shared.open(url, options: [:], completionHandler: nil)
            }
            decisionHandler(.cancel); return
        }
        // 서비스에 필요한 나머지 로직을 구현합니다.
        decisionHandler(.allow)
    }
}
2) ContentView.swfit 수정
연동할 웹뷰의 도메인을 입력합니다.
경로: /KakaoShaore/ContentView.swift
import SwiftUI
struct ContentView: View {
    var body: some View {
        VStack {
            // 연동할 웹뷰 도인 입ㅕㄱ
            webView(url: URL(string: "http://kakao-share.s3-website.ap-northeast-2.amazonaws.com/")!)
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
3) ViewController.swift 추가
경로: /KakaoShaore/ViewController.swift
import Foundation
import UIKit
import WebKit
class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {
    // 웹뷰 목록 관리
    var webViews = [WKWebView]()
    /// ---------- 팝업 열기 ----------
    /// - 카카오 JavaScript SDK의 로그인 기능은 popup을 이용합니다.
    /// - window.open() 호출 시 별도 팝업 webview가 생성되어야 합니다.
    ///
    func webView(_ webView: WKWebView,
                 createWebViewWith configuration: WKWebViewConfiguration,
                 for navigationAction: WKNavigationAction,
                 windowFeatures: WKWindowFeatures
    ) -> WKWebView? {
        guard let frame = self.webViews.last?.frame else {
            return nil
        }
        // 웹뷰를 생성하여 리턴하면 현재 웹뷰와 parent 관계가 형성됩니다.
        return createWebView(frame: frame, configuration: configuration)
    }
    /// ---------- 팝업 닫기 ----------
    /// - window.close()가 호출되면 앞에서 생성한 팝업 webview를 닫아야 합니다.
    ///
    func webViewDidClose(_ webView: WKWebView) {
        destroyCurrentWebView()
    }
    // 웹뷰 생성 메서드 예제
    func createWebView(frame: CGRect, configuration: WKWebViewConfiguration) -> WKWebView {
        let webView = WKWebView(frame: frame, configuration: configuration)
        // set delegate
        webView.uiDelegate = self
        webView.navigationDelegate = self
        // 화면에 추가
        self.view.addSubview(webView)
        // 웹뷰 목록에 추가
        self.webViews.append(webView)
        // 그 외 서비스 환경에 최적화된 뷰 설정하기
        return webView
    }
    // 웹뷰 삭제 메서드 예제
    func destroyCurrentWebView() {
        // 웹뷰 목록과 화면에서 제거하기
        self.webViews.popLast()?.removeFromSuperview()
    }
}
4. 빌드
1) 빌드 타켓
맥북이랑 연결된 아이폰 선택
2) 빌드
5. 확인
6. 사용한 코드
iOS 저장소 - https://github.com/skyepodium/kakao-share-hybrid-app-ios
vue 저장소 - https://github.com/skyepodium/kakao-share
7. 소감
디질것 같다

[하이브리드 웹 - iOS] 카카오 공유하기 웹뷰

댓글