투케이2K

88. (javascript/자바스크립트) userAgent 디바이스 확인 및 WebView (웹뷰) 로드 시 앱 마켓 이동 실시 본문

JavaScript

88. (javascript/자바스크립트) userAgent 디바이스 확인 및 WebView (웹뷰) 로드 시 앱 마켓 이동 실시

투케이2K 2021. 7. 7. 16:47
반응형

/* =========================== */

[ 개발 환경 설정 ]

개발 툴 : Edit++

개발 언어 : javascript

/* =========================== */

/* =========================== */

[자바스크립트 소스 코드]

    <script>

    	/*
    	[JS 요약 설명]
    	1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다
    	2. navigator.userAgent : 접속한 디바이스 기기를 확인합니다
    	3. 안드로이드 package 명이 필요 / ios는 id 값이 필요합니다
    	4. 참고 : 웹뷰로 브라우저 로드 시 ios는 즉시 마켓으로 이동하지만, android는 추가 네이티브 구현이 필요합니다    	
    	*/

   	
    	
    	/* [html 최초 로드 및 이벤트 상시 대기 실시] */
    	window.onload = function() {
    		console.log("");
    		console.log("[window onload] : [start]");
    		console.log(""); 

    		// [이벤트 함수 호출]
    		var aos = "market://details?id=" + "com.kakao.talk"; //안드로이드 마켓 주소
    		var ios = "https://itunes.apple.com/kr/app/" + "id362057947"; //ios 마켓 주소
    		goAppStore(aos, ios);
    	};



    	/* [마켓 이동 수행 이벤트 함수] */
    	function goAppStore(android_url , ios_url){
    		var result_mo_chk = mobileCheck();
    		if(result_mo_chk!="pc"){
    			if(result_mo_chk == "ios"){
    				location.href = ios_url;
    			}
    			else {
    				location.href = android_url;
    			}
    		}
    		else {
    			alert("please mobile webview connect");
    		}

    	};




    	/* [접속한 모바일 버전 체크 함수] */
    	function mobileCheck() {
    		var os;
    		var mobile = (/iphone|ipad|ipod|android/i.test(navigator.userAgent.toLowerCase()));  
    		if (mobile) {
    			var userAgent = navigator.userAgent.toLowerCase();
    			if (userAgent.search("android") > -1){
    				return os = "android";
    			}
    			else if ((userAgent.search("iphone") > -1) || (userAgent.search("ipod") > -1) || (userAgent.search("ipad") > -1)){
    				return os = "ios";
    			}
    			else {
    				return os = "other";
    			}
    		}
    		else {
    			return os = "pc";
    		}
    	};
    	
    </script>

[안드로이드 소스 코드]

//TODO [새로운 URL이 webview에 로드되려 할 경우 컨트롤을 대신할 기회를 줌]
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
	Log.d("---","---");
	Log.w("//===========//","================================================");
	Log.d("","\n"+"[A_Main > shouldOverrideUrlLoading() 메소드 : [웹 클라이언트]]");
	Log.d("","\n"+"[기본 주소 : "+String.valueOf(url)+"]");
	Log.d("","\n"+"[getUrl 주소 : "+String.valueOf(main_webview.getUrl())+"]");
	Log.d("","\n"+"[getOriginalUrl 주소 : "+String.valueOf(main_webview.getOriginalUrl())+"]");
	Log.d("","\n"+"[설 명 : "+String.valueOf("새로운 URL이 webview에 로드 [1]")+"]");
	Log.w("//===========//","================================================");
	Log.d("---","---");

	//TODO [구글 마켓 이동 이동 실시 : if(url.startsWith("market://details")]
	if(url.startsWith("market://details")){
		Log.d("---","---");
		Log.w("//===========//","================================================");
		Log.d("","\n"+"[A_Main > shouldOverrideUrlLoading() 메소드 : [웹 클라이언트]]");
		Log.d("","\n"+"[주 소 : "+String.valueOf(url)+"]");
		Log.d("","\n"+"[타 입 : "+String.valueOf("구글 마켓 이동 이동 실시")+"]");
		Log.d("","\n"+"[설 명 : "+String.valueOf("새로운 URL이 webview에 로드 [1]")+"]");
		Log.w("//===========//","================================================");
		Log.d("---","---");
		// 패키지 명 파싱 실시
		String packages = String.valueOf(url);
		packages = packages.replaceAll("market://details?id=", "");

		goGooglePlayStore(url, packages); // 전체 마켓 url 과 패키지명 전송
		return true;
	}

	//TODO [새로운 웹뷰 로드 수행]
	view.loadUrl(url);

	//TODO [종 료]
	return true;
}





//TODO [구글 플레이 스토어 이동 소스 코드]
public void goGooglePlayStore(String marketUrl, String packgeNames){
	Log.d("---","---");
	Log.w("//===========//","================================================");
	Log.d("","\n"+"[A_Main > goGooglePlayStore() 메소드 : 구글 마켓 이동 실시]");
	Log.d("","\n"+"[marketUrl : "+marketUrl+"]");
	Log.w("//===========//","================================================");
	Log.d("---","---");
	try {
		//TODO 구글 플레이스토어 앱에서 이동한다.
		Intent marketLaunch = new Intent(Intent.ACTION_VIEW);
		marketLaunch.addFlags(Intent.FLAG_ACTIVITY_NO_ANIMATION);
		marketLaunch.setData(Uri.parse(marketUrl));
		startActivity(marketLaunch);
		overridePendingTransition(0,0);
	}
	catch (Exception e){
		//TODO 구글 플레이스토어 앱이 없을 경우 홈페이지에서 이동한다.
		Intent marketLaunch = new Intent(Intent.ACTION_VIEW);
		marketLaunch.addFlags(Intent.FLAG_ACTIVITY_NO_ANIMATION);
		marketLaunch.setData(Uri.parse("https://play.google.com/store/apps/details?id="+packgeNames));
		startActivity(marketLaunch);
		overridePendingTransition(0,0);
		e.printStackTrace();
	}
}

/* =========================== */

/* =========================== */

[결과 출력]

/* =========================== */

/* =========================== */

[요약 설명]

/*

[JS 요약 설명]

1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다

2. navigator.userAgent : 접속한 디바이스 기기를 확인합니다

3. 안드로이드 package 명이 필요 / ios는 id 값이 필요합니다

4. 참고 : 웹뷰로 브라우저 로드 시 ios는 즉시 마켓으로 이동하지만, android는 추가 네이티브 구현이 필요합니다

*/

/* =========================== */

반응형
Comments