Mobile Web에서 javascript를 사용해서 APP 을 실행 할수 있다.
이를 앱링크 or 딥링크 라고 한다.
ex) 예를 들어 인스타 그램을 실행시키고자 한다면 아래와 같이 작성하자.
<a href="instagram://media" target="blank">
핸드폰 내에 설치되어져있는 인스타그랩 앱이 실행된다.
이슈 1 . Android 와 IOS 는 앱 실행 경로가 서로 다르다.
[Android 의 경우]
<a href="intent://instagram.com/#Intent;package=com.instagram.android;scheme=https;end" target="blank">
[IOS 의 경우]
<a href="instagram://media" target="blank">
위와 같이 구분해서 실행시켜야 한다.
이슈 2. 해당 앱이 나의 핸드폰에 설치가 되어져있지 않는경우
Android 의 경우 위에 적힌 경로를 그대로 사용하면 본인의 핸드폰에 인스타그램이 설치가 되어져있는 경우 인스타 그램이 실행 되어지고 만약 설치가 되어져있지 않다면 레이어 팝업 형태로 구글 앱스토어의 설치 화면이 뜨게 되어서 별다른 이슈가 없다.
IOS 의 경우 위에 적힌 경로를 그대로 사용하면 본인의 핸드폰에 인스타그램이 설치가 되어져있는 경우 인스타 그램이 실행 되지만 만약 설치가 되어져있지 않다면 아무런 일도 발생하지 않아서 사용자들이 이것이 제대로 실행이 되엇는가를 알 방법이 없다. 그래서 IOS 의 경우 별도의 개발이 필요하다.
<script>
function ios_go_url(){
var url = "instagram://media";
setTimeout( function() {
window.open("https://itunes.apple.com/kr/app/instagram/id389801252?mt=8");
}, 1000);
location.href = url;
}
</script>소스를 살펴보면 셋 타임아웃 1000을 걸어서 1초 이후에 아무일도 발생을 하지 않는다면 ios 앱스토어로 이동하게 소스를 작성하면 된다.
수정된 최종 소스를 보면 다음과 같다.
<html>
<head>
<script>
function mo_chk(){
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 = "otehr";
}
} else {
return os = "pc";
}
}
function action_app_instagram(android_url , ios_url , ios_appstore_url){
var result_mo_chk = mo_chk();
if(result_mo_chk=="pc"){
alert('not mobile');
}else if(result_mo_chk == "ios"){
setTimeout( function() {
window.open(ios_appstore_url);
}, 1500);
location.href = ios_url;
}else{
location.href = android_url;
}
}
</script>
</head>
<body>
<a href="#" onclick="action_app_instagram('intent://instagram.com/#Intent;package=com.instagram.android;scheme=https;end', 'instagram://media', 'https://itunes.apple.com/kr/app/instagram/id389801252?mt=8')">
Instagram App Start
</a>
</body>
</html>
출처 : gomest.tistory.com/7
'프론트엔드 개발 놀이터 > Javascript' 카테고리의 다른 글
| [JS] async/await으로 콜백지옥을 해결해보자 (0) | 2020.10.15 |
|---|---|
| 상단 URL bar 숨기기 (0) | 2020.09.23 |
| .clone() - 선택한 요소를 복제하는 메서드 (0) | 2020.07.17 |
| 자바스크립트 {...} [...] 문법 (비구조화 할당/구조분해 할당) (0) | 2020.07.16 |
| javascript 아날로그시계 소스 - css (0) | 2020.07.07 |