실전 Xcode로 웹뷰 하이브리드 앱 만들기 (웹뷰, JS처리, target='_blank' 처리, Firebase 푸시 알림)

STUZM은 기획 단계에서 원래 PHP를 통한 웹, 코틀린을 사용한 웹뷰 안드로이드 앱, 스위프트를 사용한 웹뷰용 iOS 앱 이렇게 되기로 기획되었다. 난생 처음 스위프트를 써서 네이티브 앱을 구현하려 했으나, 초보인 만큼 자료를 찾기 어려웠었기 때문에 다른 초보자에게 도움이 되게 + 내가 다시 보고 쓸 수 있게 기록으로 남기고자 한다. 

import UIKit
import WebKit
import SystemConfiguration
import Foundation
import SafariServices

// 네트워크 오류 class
class Reachability {
    class func networkConnected() -> Bool {
        var zeroAddress = sockaddr_in(sin_len: 0, sin_family: 0, sin_port: 0, sin_addr: in_addr(s_addr: 0), sin_zero: (0, 0, 0, 0, 0, 0, 0, 0))
        zeroAddress.sin_len = UInt8(MemoryLayout.size(ofValue: zeroAddress))
        zeroAddress.sin_family = sa_family_t(AF_INET)
        
        let defaultRouteReachability = withUnsafePointer(to: &zeroAddress) {
            $0.withMemoryRebound(to: sockaddr.self, capacity: 1) { zeroSockAddress in
                SCNetworkReachabilityCreateWithAddress(nil, zeroSockAddress)
            }
        }
        
        var flags: SCNetworkReachabilityFlags = SCNetworkReachabilityFlags(rawValue: 0)
        
        if SCNetworkReachabilityGetFlags(defaultRouteReachability!, &flags) == false {
            return false
        }
        
        let isReachable = (flags.rawValue & UInt32(kSCNetworkFlagsReachable)) != 0
        let needsConnection = (flags.rawValue & UInt32(kSCNetworkFlagsConnectionRequired)) != 0
        
        return isReachable && !needsConnection
    }
}

class ViewController: UIViewController, WKNavigationDelegate, WKUIDelegate {
    @IBOutlet var myWebView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        myWebView.navigationDelegate = self
        myWebView.uiDelegate = self // WKUIDelegate 설정 추가
        myWebViewInit()
        setupWebViewConstraints()
        view.backgroundColor = UIColor.white
    }
    
    // 네트워크 오류
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        guard Reachability.networkConnected() else {
            let alert = UIAlertController(title: "NetworkError", message: "네트워크가 연결되어있지 않습니다.", preferredStyle: .alert)
            let okAction = UIAlertAction(title: "종료", style: .default) { _ in
                exit(0)
            }
            alert.addAction(okAction)
            present(alert, animated: true, completion: nil)
            return
        }
    }
    
    // 웹뷰 로드
    func myWebViewInit() {
        // 캐시 초기화
        WKWebsiteDataStore.default().removeData(ofTypes: [WKWebsiteDataTypeDiskCache, WKWebsiteDataTypeMemoryCache], modifiedSince: Date(timeIntervalSince1970: 0)) {}
        
        // 뒤로가기 제스쳐 설정
        myWebView.allowsBackForwardNavigationGestures = true
        
        // URL 설정
        if let url = URL(string: "https://mobile.stuzm.com?appversion=3") {
            let request = URLRequest(url: url)
            myWebView.load(request)
        }
    }
    
    // 웹뷰를 safe area에 맞춤
    func setupWebViewConstraints() {
        myWebView.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            myWebView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            myWebView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
            myWebView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
            myWebView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
        ])
    }
    
    // 인앱 브라우저 활성화
    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        guard let url = navigationAction.request.url else {
            decisionHandler(.allow)
            return
        }
        
        if let host = url.host, !host.contains("mobile.stuzm.com") {
            if navigationAction.targetFrame == nil {
                let safariViewController = SFSafariViewController(url: url)
                present(safariViewController, animated: true, completion: nil)
                decisionHandler(.cancel)
                return
            }
        }
        
        decisionHandler(.allow)
    }
    
    // JS 컨펌+alert 처리
    func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
        let alertController = UIAlertController(title: nil, message: message, preferredStyle: .alert)
        let okAction = UIAlertAction(title: "확인", style: .default) { _ in
            completionHandler()
        }
        alertController.addAction(okAction)
        present(alertController, animated: true, completion: nil)
    }
    
    func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void) {
        let alertController = UIAlertController(title: nil, message: message, preferredStyle: .alert)
        let okAction = UIAlertAction(title: "확인", style: .default) { _ in
            completionHandler(true)
        }
        let cancelAction = UIAlertAction(title: "취소", style: .default) { _ in
            completionHandler(false)
        }
        alertController.addAction(okAction)
        alertController.addAction(cancelAction)
        present(alertController, animated: true, completion: nil)
    }
    
    func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (String?) -> Void) {
        let alertController = UIAlertController(title: nil, message: prompt, preferredStyle: .alert)
        alertController.addTextField { textField in
            textField.text = defaultText
        }
        let okAction = UIAlertAction(title: "확인", style: .default) { _ in
            completionHandler(alertController.textFields?.first?.text)
        }
        alertController.addAction(okAction)
        present(alertController, animated: true, completion: nil)
    }
}

 

ViewController.swift 파일이다. 일단 기본적으로 웹뷰 로드 및 JS Alert, Confirm을 처리하는 코드, a href target='_blank'를 처리하는 코드가 있다. 기본적으로 JS Alert와 Confirm같은 요소들은 기본적으로 지원되지 않기 때문에 따로 추가해줘야한다. 또한 a href target='_blank'도 보통 새로운 웹뷰를 여는 식으로 처리를 많이 하는데, 그런 방식을 좋아하지 않아서 인앱 브라우저를 열게 해줬다.

그리고 웹뷰를 Safe area에 맞춰서 자동으로 사이즈를 조정해주는 코드가 들어가 있다. 그래서 웹뷰의 사이즈는 중요하지 않다. 다만, 실행 할때의 자연스러움을 위해 색은 투명으로 해두는 것이 좋겠다.

iOS/Xcode 14X - Firebase 푸시 알림 설정#1

푸시 알림을 구현하는 것은 글로 쓰긴 너무 복잡하고, 난 저 방법을 따라해서 성공하였다. 

import UIKit
import FirebaseCore
import FirebaseMessaging
import UserNotifications

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        FirebaseApp.configure()
        
        // Register for remote notifications
        registerForRemoteNotifications(application)

        // Set up Firebase Messaging delegate
        Messaging.messaging().delegate = self

        return true
    }

    // MARK: - Register for Remote Notifications

    private func registerForRemoteNotifications(_ application: UIApplication) {
        if #available(iOS 10.0, *) {
            // For iOS 10 and later, request notification authorization
            UNUserNotificationCenter.current().delegate = self
            let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
            UNUserNotificationCenter.current().requestAuthorization(options: authOptions) { _, _ in }
        } else {
            // For iOS 9 and earlier, there is no need to register user notification settings
        }
        // Register for remote notifications
        application.registerForRemoteNotifications()
    }
}

// MARK: - UNUserNotificationCenterDelegate

// Handle presentation of notifications while the app is in the foreground
extension AppDelegate: UNUserNotificationCenterDelegate {
    func userNotificationCenter(_ center: UNUserNotificationCenter, willPresent notification: UNNotification, withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void) {
        completionHandler([.badge, .sound, .banner, .list])
    }

    // Handle user's response to a notification
    func userNotificationCenter(_ center: UNUserNotificationCenter, didReceive response: UNNotificationResponse, withCompletionHandler completionHandler: @escaping () -> Void) {
        print("Body: \(response.notification.request.content.body)")
        print("userInfo: \(response.notification.request.content.userInfo)")

        let userInfo = response.notification.request.content.userInfo

        // Notification handling based on userInfo
        if userInfo[AnyHashable("sesac")] as? String == "project" {
            print("SESAC PROJECT")
        } else {
            print("NOTHING")
        }

        completionHandler()
    }
}

// MARK: - MessagingDelegate

extension AppDelegate: MessagingDelegate {
    // Handle registration token refresh
    func messaging(_ messaging: Messaging, didReceiveRegistrationToken fcmToken: String?) {
        print("Firebase registration token: \(String(describing: fcmToken))")

        if let token = fcmToken {
            print("FCM Token : \(token)")
            UserDefaults.standard.set(token, forKey: "fcmToken")
            UserDefaults.standard.synchronize()
        }
        // TODO: If necessary, send the token to the application server.
        // Note: This callback is fired at each app startup and whenever a new token is generated.
    }

    // Handle data messages received via FCM
    func messaging(_ messaging: Messaging, didReceive remoteMessage: MessagingDelegate) {
        print("Received data message: \(remoteMessage.description)")
    }
}

AppDelegate.swift 파일이다. 저 링크에서 이부분에 대한 설명이 너무 생략되어서 직접 찾아다가 썼다(...) 

 

잘된다.