네이티브/Ios
Ios webview에서 javascript를 통해 ios 기능 호출하기 ℡
WKWebView와 UiWebView의 차이점 원래 UiWebView가 존재하였지만 ios8에서 WKWebView가 등장하였습니다. 이 과정에서 UiWebView는 deprecated 되었습니다. WKWebView는 UiWebView 보다 성능이 좋고 효율적으로 동작합니다. WKWebView는 javascript를 비동기 적으로 처리합니다. Javascript와 네이티브 코드 간의 통신은 비동기 적으로 처리되고 일반적으로 더 빠르게 실행이 됩니다. 하지만 WKWebView에서는 쿠키를 직접 관리해야 합니다. 쿠키 설정이 필요해서 쿠키를 설정하는 스크립트를 시작시에 실행시켜 주어서 원했던 동작을 구현했던 경험이 있습니다. (이 부분은 좀 더 develop 예정입니다.) Ios의 Webview를 이용할때 w..
Ios splash image 띄우기 (Renewal)
앱이 시작될때 스플래시 이미지를 노출시킬수 있습니다. 스플래시 이미지를 사용하는 이유는 다양할 것입니다. 1. 앱이 켜지자 마자 스플래시 이미지가 노출되므로 반응이 빠르다라는 느낌을 줄수도 있고(앱의 반응성) 2. 스플래시 이미지를 노출시켜주는 동안 앱에 필요한 데이터를 불러올 수도 있습니다. 3. 앱의 간략한 정보를 제공하려도 사용할 수 있을 것입니다. 이러한 스플래시 이미지는 어떻게 노출시켜줄 수 있을까요? 앱을 웹뷰로 만든다면 웹에서 이미지를 전체화면으로 노출시켜줄수 있을것이고 네이티브의 기능을 이용하여 띄어줄수도 있을것입니다. 저는 좀 더 빠른 반응을 위하여 네이티브의 기능을 이용하는것을 선호합니다. 아래는 ios에서 splash image를 노출시켜주는 방법에 관한 내용입니다. 1. 필요한 이미..
Ios 웹뷰 alert, confirm 띄우기
웹뷰에서 javascript로 된 alert와 confirm을 띄우려면 코드를 추가해주어야 합니다. alert와 confirm의 경우 각각 webview에 정의되어 있는 인스턴스 메소드들을 선언해주어야 합니다. viewController 내부에 선언해주면 됩니다. UIAlertController에서 preferredStyle을 커스텀 해줄수 있습니다. .alert와 .actionSheet 두개의 형식이 있습니다. 원하는 형식을 선택해서 보여주고 싶은 형식을 보여주면 됩니다! alert func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, ..
Ios 웹뷰 쿠키 native에서 세팅
ios의 웹뷰에서 쿠키를 세팅해주고 싶었습니다. ios에서는 안드로이드 같이 cookie만 관리해주는 도구를 찾지 못했습니다. 그래서 찾은 방법은 웹뷰가 실행될때 js script를 실행시켜주자 였습니다. 브라우저에서 setCookie(key, value)를 통해 특정 도메인에 원하는 쿠키 값을 세팅해줄수 있습니다. 이걸 웹뷰가 실행될때 실행시켜주자는 생각이였습니다. var webView: WKWebView! override func viewDidLoad() { ~~~~~ let config = WKWebViewConfiguration() let atDocumentStartScript = WKUserScript(source: "alert('start')", injectionTime: .atDocument..
Ios 웹뷰 디버깅
웹뷰 개발시 디버깅은 필수 입니다. 이 방법을 모를때는 일일히 alert로 데이터를 출력했던 기억이 나네요.... 디버깅 방법은 엄청 간단합니다 1. xcode에서 개발중인 앱을 휴대폰에 연결후 실행시켜줍니다. 2. safari를 mac에서 실행시켜줍니다 3. develop > 핸드폰 이름 > ip를 선택해줍니다. (safari에서 안뜨면 Safari Technology Preview.app 에서 출력되는 경우도 있습니다.) 4. 웹 inspector가 등장한 모습을 볼 수 있습니다. 이제 에러 로그를 볼수 있고 자바스크립트 실행도 가능합니다! 출처: https://d0gf00t.tistory.com/41
Ios Apple Native Login
TL;DR: 웹뷰의 애플 로그인만 네이티브 로그인으로 구현합니다. 14.5.1 이상 버전에서는 apple sign in with js가 동작하지 않습니다. safari의 이슈 때문에 안되는것으로 추측합니다. 적용해주시고 예외상황이 발생한다면 말씀해주세요 안드로이드는 애플로그인 apple sign in with js로 잘 됩니다. ios쪽 부분만 네이티브로 변경합니다. apple login은 ios 13.0 이상에서만 가능합니다. 문제 원인 파악 apple sign in with js 에서는 로그인 시도시 'https://appleid.apple.com/auth/authorize?client_id=[service_url]&redirect_uri[service_url]Fapple_redirect&respon..
Ios App Memory Check
Device에서 어플리케이션이 갑자기 멈추면서 꺼질때가 있는데 이때 app이 crash 났다고 합니다. 이유는 여러가지가 있을수 있는데 그 중 하나는 메모리를 너무 많이 사용하는 경우 입니다. 아래의 내용은 xcode로 현재 실행중인 어플리케이션의 memeory를 확인하고 더 나아가 디바이스에서 실행중인 모든 프로세스의 메모리 사용량을 체크하는 방법입니다. 나중에 언젠가 필요할 날이 있지 않은까 싶어서 기록합니다. 현재 실행중인 앱의 메모리 사용량 체크 어플리케이션을 실행시키고 빨간 네모안의 스프레이 같은 버튼을 누르시면 됩니다. 디바이스에서 현재 실행중인 프로세스 및 cpu, memory 사용량 아래 빨간 네모박스 안에 내용이 녹화 버튼인데 이걸 누르면 아래의 사진처럼 내용이 출력되기 시작합니다.
Ios html5 Geolocation 웹뷰 적용
ios에서 html5 geolocation 기능을 사용하여 현재위치를 가져오는 방법입니다. 안드로이드에 대한 설명은 아래의 링크에서 참고하실수 있습니다. https://dkrnfls.tistory.com/87 html5 Geolocation 웹뷰 적용 웹의 api중 geolocation api가 있습니다. http에서는 사용이 불가능하고 https에서만 사용이 가능합니다. 따라서 테스트 할때도 ngrok으로 세팅을 하는등 별도의 툴을 이용해야 합니다. ngrok으로 로컬서버 dkrnfls.tistory.com ios 웹뷰에서 html5 geolocation 을 사용하기 위해서 현재 위치를 가져오는 것에대한 권한을 승인해주어야 합니다. ios는 안드로이드에 비해 훨씬 간단합니다. 바로 본론으로 들어갈게요 ..
Ios 프리로더 띄우기
WKWebview에서 웹뷰가 로드되기전 preload를 띄워서 사용자의 Ux를 개선해 봅시다 UIkit에 포함된 UIIndicatorView와 ios WKWebView에서 탐색 요청을 수락, 로드 및 완료하는 과정에서 트리거 되는 WKNavigationDelegate를 이용할것입니다. 선언부에 아래의 코드를 추가해줍니다. // 선언부에 추가 var activityIndicator: UIActivityIndicatorView = UIActivityIndicatorView() ViewController.swift내에 WKNavigationDelegate를 이용합니다. // 로드 시작 func webView(_ webView: WKWebView, didStartProvisionalNavigation navig..
Ios 스플래쉬 화면 띄우기
ios에서는 LaunchScreen이라 지칭합니다 웹뷰가 로드되기전 하얀화면이 뜨게 되고 그 간극을 줄이기 위한 것입니다. 원하던 목적을 완벽히 이루지는 못하였지만 제일 기본 형태의 스플래쉬 띄우는 법을 문서화 하겠습니다. 웹뷰랑 javascriptInterface로 소통하거나 하는 방법들을 입맛에 맞게 사용하시면 됩니다. 사전준비 1. 스플래쉬로 띄우고 싶은 이미지를 준비합니다. IOS 1. 스플래쉬 이미지를 프로젝트 폴더 하위에 추가해줍니다. 아래와 같이 Assets.xcassets에 추가하는 법도 있는데 이건 이용하지 않아서 모르겠습니다. 아시면 댓글로 남겨주세요 아래의 방법은 deprecated 되었답니다 2. 아래의 launch screen file에서 launchScreen 추가 3. laun..