2-1. iOS 앱에서 JavaScript 함수 실행하기

먼저 구현에 앞서 URL을 통해 웹페이지를 연결해야 하므로 Info.plist를 설정해준다. (taeminator1.tistory.com/11 참고)

 

ContentView에서 앱과 웹페이지를 연결하기 위해, WKWebView와 URLRequest의 객체를 생성한다. 

그리고 init() 함수를 추가해, 앱과 웹페이지를 연결한다. 

 

ContentView.swift

import SwiftUI
import WebKit
import Foundation

struct ContentView: View {

    static let url: String = "http://taeminator1.iptime.org"
    static let wkWebView = WKWebView()
    static let request: URLRequest = URLRequest.init(url: NSURL.init(string: AppDelegate.url)! as URL)
    
    var body: some View {
        ...
    }
    
    init() {
        ContentView.wkWebView.load(ContentView.request)
    }
    
    ...
}

 

그러고 나서 toggle의 상태가 변경될 때마다 동작하는 함수(toggleAction)를 수정해주면 된다. 

wkWebView 변수를 ContentView에서 static변수로 선언한 이유는, 웹페이지는 앱이 실행되고 한 번만 연결되면 되기 때문이다. 만약 ToggleView에서 실행하게 되면 Toggle이 만들어질 때마다 선언이 되기 때문에 불필요한 동작이라고 생각했다. 

 

ToggleView에서 문제가 몇 가지 생겼다. (추후 해결해야 한다..)

• 아이폰 앱에서 Toggle을 아주 빠르게 변경하면, JS 함수를 전달 못하는 경우가 발생한다. 
• 그리고 초기에 Toggle을 만들면서 JS 함수를 실행하게 되는데, 이때 웹페이지와 연결되기 전이여서 에러가 발생한다. 

ToggleView.swift

import SwiftUI
import WebKit

struct ToggleView: View {
    
    ...
    
    var body: some View {
        ...
    }
    
    func toggleAction(state: String, index: Int) -> String {
        
        // 버튼을 연속적으로 빠르게 누를 때, 먹히는 경우가 생김
        print("button\(index + 1) is \(state)")
        javaScriptFunction(index: index)
        
        return ""
    }
    
    func javaScriptFunction(index: Int) -> Void {
        
        // 초기 버튼 상태가져올 때 눌림
        // 웹페이지 로딩 중에 일어나기 때문에 에러로 처리 됨
        ContentView.wkWebView.evaluateJavaScript("btn\(index + 1)ButtonClicked();", completionHandler: { (result, error) in
            if let anError = error {
                print("evaluateJavaScript infoUpdate Error \(anError.localizedDescription)")
            }
        })
    }
}

 

이렇게 작성하고 실행을 하면, Toggle의 상태를 변경시킬 때마다 JS 함수를 실행시킨다. 작성하고 보니 굉장히 간단한데, 테스트 과정에서 시간이 많이 걸렸다.

왜인지는 모르겠지만, iOS 앱에서 연결시킨 웹페이지의 alert() 함수가 제대로 동작하지 않아 JS 함수가 실제로 동작 안 하는 줄 알고 한참을 헤맸다. Safari에서도 alert() 함수가 안 되는 걸 보면, iOS 앱의 웹페이지도 Safari 기반인 것 같다. 또 크롬에서는 된다. 

 

이제 HTML에서 정보를 가져와 초기 상태를 결정할 일이 남았다.