[Javascript] Web에서 App 이동 처리 로직

[ Web에서 App이 있으면 App, 없으면 마켓 이동 ]

 

1. 안드로이드 크롬 같은 경우에는 문제가 없었다.

 

2. iOS 같은 경우에는 일반적인 구현 방법으로 구현시 앱이 뜨고, 그 위에 App Store 가 한번 더 뜨는 불상사가 발생했다.

 

3. iOS 문제를 해결하기 위해서, 'blur focus'를 이용하였으나, Safari 브라우저는 Chrome 과 다르게 setTimeout이 너무나 잘 작동했으며, "주소가 유효하지 않기 때문에 Safari가 해당 페이지를 열 수 없습니다." 라는 메세지를 강제로 띄웠다.

메세지가 뜨면서 blur를 호출했고, '확인'을 누르면 focus가 호출되어, 의도된 로직이 수행되지 않았다.

 

4. iFrame으로 해보라는 인터넷 의견도 있었지만, 작동되지 않았다.

 

5. 결국은 나 자신과 합의를 보기로 했다.

 

6.

  (1) iOS는 2초 후까지 forcus 상태가 아니라면, App Store 를 띄우지 않기로했다,

  (2) iOS는 App 미설치시 "주소가 유효하지 않기 때문에 Safari가 해당 페이지를 열 수 없습니다." 메세지를 무조건 띄우게 되어 있는데, 사용자가 2초 안에 확인 버튼을 누른다는 가정을 두었다. (2초 안에 버튼을 누르면 앱 스토어 이동.)

 

<script type="text/javascript">
	var isiOS = navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone') || navigator.userAgent.match('iPod');
	var isAndroid = navigator.userAgent.match('Android');
	var appPath = "app에서 이동할 링크 url";
	var prevType = "";
    
    // 화면 밖으로 나가거나, 안으로 들어왔을때
	$(window).on("blur focus", function(e) {
		prevType = $(this).data("prevType");
		
		if (prevType != e.type) {   //  reduce double fire issues
			switch (e.type) {
				// 화면 밖으로 나갔을때
				case "blur":
					break;
				// 화면 안으로 들어왔을때
				case "focus":
					break;
			}
		}

		$(this).data("prevType", e.type);
		
	});

	// 이벤트 이동
	function moveAttendanceEvent(){

		if(isiOS) {
			// iOS 실행
			setTimeout(function () {
				if (prevType == undefined || prevType == 'focus'){
					window.location = "https://itunes.apple.com/kr/app/podcast/id{id코드}";
				}
			}, 2000);
			window.location = '{app 스키마}://{약속된 파라미터}=' + appPath;
		} else if(isAndroid) {
			setTimeout(function () {
				if (prevType == undefined || prevType == 'focus'){
					window.location = "https://play.google.com/store/apps/details?id={패키지명}"
				}
			}, 500);
			window.location = '{app 스키마}://{약속된 파라미터}=' + appPath;
		}
		
	}
</script>
<a href="javascript:moveAttendanceEvent()">테스트</a>