네이티브
Ios webview에서 javascript를 통해 ios 기능 호출하기 ℡
WKWebView와 UiWebView의 차이점 원래 UiWebView가 존재하였지만 ios8에서 WKWebView가 등장하였습니다. 이 과정에서 UiWebView는 deprecated 되었습니다. WKWebView는 UiWebView 보다 성능이 좋고 효율적으로 동작합니다. WKWebView는 javascript를 비동기 적으로 처리합니다. Javascript와 네이티브 코드 간의 통신은 비동기 적으로 처리되고 일반적으로 더 빠르게 실행이 됩니다. 하지만 WKWebView에서는 쿠키를 직접 관리해야 합니다. 쿠키 설정이 필요해서 쿠키를 설정하는 스크립트를 시작시에 실행시켜 주어서 원했던 동작을 구현했던 경험이 있습니다. (이 부분은 좀 더 develop 예정입니다.) Ios의 Webview를 이용할때 w..
Android webview에서 javascript로 함수 호출하기 ℡
Android에서 WebView의 용도는 무엇인가요? WebView는 어플리케이션 내부에 웹 페이지를 보여주는 view 입니다. 안드로이드 에서는 'Acitivity 내부에서 웹 브라우저나 온라인 컨텐츠를 보여주기 위한 기반이 되는 클래스'라고 설명이 되어있습니다. 웹 페이지를 보여주기 위해 웹킷 렌더링 엔진을 사용하고 history를 통한 앞으로 가기 뒤로가기 메소들르 포함하고, zoom in,out, text 찾기외 다양한 것을 포함하고 있습니다. 어플리케이션에 Webview를 추가하기 위해서는 xml Layout file에 요소를 추가하여야 합니다. WebChromeClient를 통해 chrome 핸들러를 추가할 수 있습니다. alert, preload, confirm등의 표시와 액션을 제어할 수 ..
Android splash image 띄우기 (Renewal)
2022.03.01 - [네이티브/IOS] - ios splash image 띄우기 에 스플래시 이미지에 대한 간략한 설명이 있습니다. 먼저 읽으신다면 어떠한 이유에서 사용하는지 간략히 알수 있을 것입니다. ios splash image 띄우기 앱이 시작될때 스플래시 이미지를 노출시킬수 있습니다. 스플래시 이미지를 사용하는 이유는 다양할 것입니다. 1. 앱이 켜지자 마자 스플래시 이미지가 노출되므로 반응이 빠르다라는 느낌을 dkrnfls.tistory.com Android의 기능을 이용하여 splash image를 띄워보겠습니다. splash image를 띄우는 법은 다양하게 있을수 있습니다. 여기서 소개하는 방식은 그중 하나 입니다. 1. Splash Activity 생성 2. 앱 실행시 실행되는 in..
Ios splash image 띄우기 (Renewal)
앱이 시작될때 스플래시 이미지를 노출시킬수 있습니다. 스플래시 이미지를 사용하는 이유는 다양할 것입니다. 1. 앱이 켜지자 마자 스플래시 이미지가 노출되므로 반응이 빠르다라는 느낌을 줄수도 있고(앱의 반응성) 2. 스플래시 이미지를 노출시켜주는 동안 앱에 필요한 데이터를 불러올 수도 있습니다. 3. 앱의 간략한 정보를 제공하려도 사용할 수 있을 것입니다. 이러한 스플래시 이미지는 어떻게 노출시켜줄 수 있을까요? 앱을 웹뷰로 만든다면 웹에서 이미지를 전체화면으로 노출시켜줄수 있을것이고 네이티브의 기능을 이용하여 띄어줄수도 있을것입니다. 저는 좀 더 빠른 반응을 위하여 네이티브의 기능을 이용하는것을 선호합니다. 아래는 ios에서 splash image를 노출시켜주는 방법에 관한 내용입니다. 1. 필요한 이미..
Android 웹뷰 alert, confirm 띄우기
안드로이드 웹뷰 에서는 alert 와 confirm을 따로 커스텀 하지 않아도 띄워주긴 합니다. 아래의 내용은 좀 더 입맛에 맞게 브라우저에서 alert와 confirm을 띄워줄 때 액션을 다루기 위한 내용 입니다. WebView webview; WebChromeClient webClient = new WebChromeClient() { // 여기에서 메서드들을 override 해주면 됩니다 } webview.setWebChromeClient(webClient); 은 WebChromeClient의 객체를 생성해주는 부분인데 이 클래스 안에 정말 많은 기능들이 숨어있습니다. (제가 봤을때는 19개의 메소드가 있었고 alert, confirm, prompt, geolocation 승인 등등 다양한 내용이 있..
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..
Android 웹뷰 쿠키 native에서 세팅
프로젝트를 진행하던 중 앱의 설치된 버전을 웹뷰에서 판단하여 다른 화면을 렌더링 해줘야 하는 경우가 있었습니다. 설치된 앱의 버전은 네이티브에서만 접근할 수 있어 이것을 get하여 웹뷰의 쿠키에 값을 넣어주었습니다. 아래의 내용은 안드로이드에서 웹뷰에 쿠키를 추가해주고자 하는 내용입니다. 1. 설치된 앱 버전 가져오기 * 설치된 앱 버전은 아래의 예시 코드에는 나오지 않습니다. PackageInfo pInfo; // onCreate 안에 추가 try { pInfo = getPackageManager().getPackageInfo(getPackageName(), 0); } catch (PackageManager.NameNotFoundException e) { e.printStackTrace(); } 2. ..
Android 웹뷰 디버깅
안드로이드 디버깅은 간단하면서도 체크해야할게 많습니다. 휴대폰에서 체크해야 할 내용 시스템 > 개발자 옵션에서 usb 디버깅을 활성화 해줍니다. (개발자 설정이 되어있지 않으면 시스템 > 휴대전화 정보 > 빌드번호를 10번 정도 눌러줍니다.) 코드 추가해주어할 내용 아래의 코드 내용을 MainActivity의 Oncreate안에 추가해줍니다. if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true); } 크롬 접속 주소창에 chrome://inspect 검색후 휴대폰이 나오면 inspect를 클릭해줍니다. 아래 이미지처럼 inspector가 나온것을 볼수 있습니다 * secre..
Ios 웹뷰 디버깅
웹뷰 개발시 디버깅은 필수 입니다. 이 방법을 모를때는 일일히 alert로 데이터를 출력했던 기억이 나네요.... 디버깅 방법은 엄청 간단합니다 1. xcode에서 개발중인 앱을 휴대폰에 연결후 실행시켜줍니다. 2. safari를 mac에서 실행시켜줍니다 3. develop > 핸드폰 이름 > ip를 선택해줍니다. (safari에서 안뜨면 Safari Technology Preview.app 에서 출력되는 경우도 있습니다.) 4. 웹 inspector가 등장한 모습을 볼 수 있습니다. 이제 에러 로그를 볼수 있고 자바스크립트 실행도 가능합니다! 출처: https://d0gf00t.tistory.com/41