seongchan/ExecuteAppOrGoStore.html

## ExecuteAppOrGoStore.html
<!--
 2015.10.29
 Hong SeongChan (seongchan116@gmail.com)
 -------------------------------------------
 모바일 웹 페이에서 개발하고 있는 앱이 실행이 안되길래 샘플코드를 작성해 봄.
 이 소스의 전제 조건은 uri scheme 방식이 적용된 앱을 기준으로 한다.
 Android 앱의 경우 intent를 이용한 방식을 주로 사용했겠지만, 모바일 웹을 고려한다면 uri scheme을 적용하는게 유리하다.
 (웹쪽 코드가 단순해 진다.)
 아래 코드는 이러한 전제로 작성되었다.
 -->

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name=”viewport” content=”initial-scale = 2.0″>
<style type="text/css">
 <!--
  body {
  	font-size:20pt;
  	margin: 10px;
  	}
 //-->
 </style>
<title>Execute App at (Mobile)WebPage</title>
<script>
var os = "";

// 아래는 OS 구분에 대한 부분은 예시 코드다.  모바일이 아닌 경우도 고려해야 한다.
// 각 플랫폼에 따라서 userAgent를 구분해서 처리는 서비스할 대상에 따라서 조정해야 함.
if(navigator.userAgent.toLocaleLowerCase().search("iphone") > -1){
	os = "ios";
}else{
	os = "android";
}

// 스토어 URL 정보는 각 패키지가 등록된 후에 확인 가능하다.
function goAppStoreOrPlayStore() {
	var storeURL ="";
	if (os == "ios") {
		// XXXXXXXX 해당하는 부분이 App ID값
		storeURL = "http://itunes.apple.com/app/idXXXXXXXXX";
	} else {
		// id 뒤에 앱 패키지명
		storeURL = "https://play.google.com/store/apps/details?id=com.example.test";
	}
	location.replace(storeURL);
}

/*앱을 실행하는 코드
 동일한 uri scheme을 Android 앱이나 iOS 앱에 적용을 시켜야 한다.
 uri scheme 은 목적에 맞게 정의한다.
 uri 값에 따라서 분기 목적이 다를 수 있으나, 여기에서는 단순히 샘플정도로만 이해 할 것!
 uri scheme이 정의되어 있다면 OS에 따른 구분을 별도로 할 필요가 없다.
 */
function executeApp() {
	var appUriScheme = "example://launch?version=1";
	document.location.href = appUriScheme;
}

// 이 코드는 대부분 사용하는 코드다.
function executeAppOrGoStore() {
	var openAt = new Date;
	 setTimeout(
	 	function() {
	 		if (new Date - openAt < 1000)
	 			goAppStoreOrPlayStore();
	 	}, 500);
	 executeApp();
}

</script>
</head>
<center>
웹에서 앱 실행이 안되길때 짜집기로 짠다. <br /><br />
<a href="#" onclick="javascript:goAppStoreOrPlayStore()">스토어 열기</a><br /><br />
<a href="#" onclick="javascript:executeApp()">앱 실행</a> <br /><br />
<a href="#" onclick="javascript:executeAppOrGoStore()">있으면 실행하고 없으면 스토어로 가자</a>
</center>
<body>
</body>
</html>
	<!--
	2015.10.29
	Hong SeongChan (seongchan116@gmail.com)
	-------------------------------------------
	모바일 웹 페이에서 개발하고 있는 앱이 실행이 안되길래 샘플코드를 작성해 봄.
	이 소스의 전제 조건은 uri scheme 방식이 적용된 앱을 기준으로 한다.
	Android 앱의 경우 intent를 이용한 방식을 주로 사용했겠지만, 모바일 웹을 고려한다면 uri scheme을 적용하는게 유리하다.
	(웹쪽 코드가 단순해 진다.)
	아래 코드는 이러한 전제로 작성되었다.
	-->

	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name=”viewport” content=”initial-scale = 2.0″>
	<style type="text/css">
	<!--
	body {
	font-size:20pt;
	margin: 10px;
	}
	//-->
	</style>
	<title>Execute App at (Mobile)WebPage</title>
	<script>
	var os = "";

	// 아래는 OS 구분에 대한 부분은 예시 코드다. 모바일이 아닌 경우도 고려해야 한다.
	// 각 플랫폼에 따라서 userAgent를 구분해서 처리는 서비스할 대상에 따라서 조정해야 함.
	if(navigator.userAgent.toLocaleLowerCase().search("iphone") > -1){
	os = "ios";
	}else{
	os = "android";
	}

	// 스토어 URL 정보는 각 패키지가 등록된 후에 확인 가능하다.
	function goAppStoreOrPlayStore() {
	var storeURL ="";
	if (os == "ios") {
	// XXXXXXXX 해당하는 부분이 App ID값
	storeURL = "http://itunes.apple.com/app/idXXXXXXXXX";
	} else {
	// id 뒤에 앱 패키지명
	storeURL = "https://play.google.com/store/apps/details?id=com.example.test";
	}
	location.replace(storeURL);
	}

	/*앱을 실행하는 코드
	동일한 uri scheme을 Android 앱이나 iOS 앱에 적용을 시켜야 한다.
	uri scheme 은 목적에 맞게 정의한다.
	uri 값에 따라서 분기 목적이 다를 수 있으나, 여기에서는 단순히 샘플정도로만 이해 할 것!
	uri scheme이 정의되어 있다면 OS에 따른 구분을 별도로 할 필요가 없다.
	*/
	function executeApp() {
	var appUriScheme = "example://launch?version=1";
	document.location.href = appUriScheme;
	}

	// 이 코드는 대부분 사용하는 코드다.
	function executeAppOrGoStore() {
	var openAt = new Date;
	setTimeout(
	function() {
	if (new Date - openAt < 1000)
	goAppStoreOrPlayStore();
	}, 500);
	executeApp();
	}

	</script>
	</head>
	<center>
	웹에서 앱 실행이 안되길때 짜집기로 짠다. <br /><br />
	<a href="#" onclick="javascript:goAppStoreOrPlayStore()">스토어 열기</a><br /><br />
	<a href="#" onclick="javascript:executeApp()">앱 실행</a> <br /><br />
	<a href="#" onclick="javascript:executeAppOrGoStore()">있으면 실행하고 없으면 스토어로 가자</a>
	</center>
	<body>
	</body>
	</html>