swift WKWebView ios 하이브리드앱 기초 샘플

아이폰 하이브리드앱 제작 시 기초 설정을 해놓고 개발을 시작하면 편리합니다. 사실 아래 내용만 잘 따라해도 웬만한 하이브리드앱의 80%를 제작 가능합니다.

개발환경 

언어 : Swift

IDE : Xcode9

프로젝트 만들기

iOS > Single View App 선택

프로젝트 이름 세팅, Swift 선택

Main.storyboard 에 웹뷰 추가

① Main.storyboard

② ViewController Scene

③ Show the Object Library 버튼 클릭

④ we 로 검색해서 WebKit View 화면에 드래그 드랍 > 사이즈 조절 

https 뿐만 아니라 http 도 허용되도록 앱 보안 설정

① info.plist

② Bundle version 옆에 + 버튼 클릭

③ App Transport Security Setting  추가 > + 버튼 클릭

④ Allow Arbitrary Loads NO를 YES로 변경

 

ViewController.swift 에 코드 추가

//
//  ViewController.swift
//  myApp
//
//  Created by home on 2018. 8. 18..
//  Copyright © 2018년 home. All rights reserved.
//

import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate,WKNavigationDelegate {

    @IBOutlet weak var webView: WKWebView!
    
    override func loadView() {
        super.loadView()
        
        webView = WKWebView(frame: self.view.frame)
        webView.uiDelegate = self
        webView.navigationDelegate = self
        
        self.view = self.webView
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let url = URL(string: "http://work6.kr")
        let request = URLRequest(url: url!)
        webView.load(request)
        
        
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    
    //alert 처리
    func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo,
                 completionHandler: @escaping () -> Void) {
        let alertController = UIAlertController(title: "", message: message, preferredStyle: .alert)
        alertController.addAction(UIAlertAction(title: "확인", style: .default, handler: { (action) in
            completionHandler()
        }))
        
        self.present(alertController, animated: true, completion: nil)
    }
    
    
    //confirm 처리
    func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo,
                 completionHandler: @escaping (Bool) -> Void) {
        let alertController = UIAlertController(title: "", message: message, preferredStyle: .alert)
        alertController.addAction(UIAlertAction(title: "확인", style: .default, handler: { (action) in
            completionHandler(true)
        }))
        alertController.addAction(UIAlertAction(title: "취소", style: .default, handler: { (action) in
            completionHandler(false)
        }))
        
        self.present(alertController, animated: true, completion: nil)
    }
    
    
    //confirm 처리2
    func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo,
                 completionHandler: @escaping (String?) -> Void) {
        let alertController = UIAlertController(title: "", message: prompt, preferredStyle: .alert)
        alertController.addTextField { (textField) in
            textField.text = defaultText
        }
        alertController.addAction(UIAlertAction(title: "확인", style: .default, handler: { (action) in
            if let text = alertController.textFields?.first?.text {
                completionHandler(text)
            } else {
                completionHandler(defaultText)
            }
        }))
        
        alertController.addAction(UIAlertAction(title: "취소", style: .default, handler: { (action) in
            completionHandler(nil)
        }))
        
        self.present(alertController, animated: true, completion: nil)
    }
 
    
    
    // href="_blank" 처리
    func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {
        if navigationAction.targetFrame == nil {
            webView.load(navigationAction.request)
        }
        return nil
    }
    
    
    
    
    // 중복적으로 리로드 방지
    public func webViewWebContentProcessDidTerminate(_ webView: WKWebView) {
        
        webView.reload()
    }


}

빌드 후 테스트 (끝!)

① 에뮬레이터 설정

② 빌드 및 실행

[문의하기]

copyright ⓒ 2018. 워크식스