header-bleepy-logo

DEVELOPERS

KO

웹뷰 구성하기

webview example image

간편하게 웹뷰 URL 호출만으로 런처를 실행하고 클라이언트 어드민에서 프로모션을 생성하여 발급받은 Secret Key에 연동된 게임을 실행합니다. 웹뷰를 구성하여 게임을 실행하고 클라이언트 어드민에서 등록한 프로모션을 진행해보세요.


WebView

IOS 가이드 문서는 swift UIKit을 기준으로 작성되었습니다.

1단계 : WebView Controller 생성

swift
import UIKit import WebKit class MainController: UIViewController,WKUIDelegate,WKNavigationDelegate,WKScriptMessageHandler { @IBOutlet weak var webView: WKWebView! override func loadView() { super.loadView() let contentController = WKUserContentController() let configuration = WKWebViewConfiguration() contentController.add(self, name: "closeLauncher") contentController.add(self, name: "moveActivity") configuration.userContentController = contentController webView = WKWebView(frame: .zero, configuration: configuration) webView.uiDelegate = self webView.navigationDelegate = self self.view = self.webView } override func viewDidLoad() { super.viewDidLoad() let userKey = "customUserKey"; let url = URL(string: "https://launcher.bleepy.io?userKey=(userKey)&secretKey=28880fff40a74bbc1192e7d1b752dca55b4361c7c0e09821b7a5b2ce164bc8ba&platform=ios") let request = URLRequest(url: url!) self.webView?.allowsBackForwardNavigationGestures = true //뒤로가기 제스쳐 허용 webView.configuration.preferences.javaScriptEnabled = true //자바스크립트 활성화 // ios 16.4 이상일때 설정 체크 webView.customUserAgent = "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36" if #available(iOS 16.4, *) { webView.isInspectable = true } webView.load(request) } // launcher interface func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) { if message.name == "closeLauncher" { print(message.body) } } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } //모달창 닫힐때 앱 종료현상 방지. //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(false) })) alertController.addAction(UIAlertAction(title: "확인", style: .default, handler: { (action) in completionHandler(true) })) 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 } }

블리피 런처와 IOS 클라이언트가 통신하는 경우는 아래 2가지 케이스가 있습니다.

Interface function

Description

closeLauncher()
블리피 런처의 Back 버튼 UI 클릭 시 (뒤로가기 처리)
moveActivity(url: String)
광고 플로팅 배너 클릭 시

2단계 : Storyboard 생성

ios image
  • 생성한 Controller를 class에 연동
  • Identity - Storyboard ID 명시

3단계 : WebView Controller 호출

swift
@objc func callWebViewBtn() { let storyboard = UIStoryboard(name: "Second", bundle: nil) let secondViewController = storyboard.instantiateViewController(withIdentifier: "MainController") // 화면 전환 애니메이션 설정 secondViewController.modalTransitionStyle = .coverVertical // 전환된 화면이 보여지는 방법 설정 (fullScreen) secondViewController.modalPresentationStyle = .fullScreen self.present(secondViewController, animated: true, completion: nil) }

개발에 대한 추가 설명이 더 필요하신가요?

"[Client Admin] 로그인 → 오른쪽 하단 채널톡 위젯" 클릭 후 개발 카테고리에 문의 남겨주시면 기술 개발팀에서 확인 후 연락드리겠습니다.


v1.0.2