모바일 웹에서 app으로 이동(딥링크)

모바일 웹을 이용하다 보면 "앱에서 보실래요?"라는 팝업과 함께 앱 설치를 유도한다

이때 모바일 웹에서 앱으로 이동하기 위해서는 두 가지 경우로 나뉘는데

• 앱이 있는 경우
  앱에서 해당 링크 페이지를 보여준다
• 앱이 없는 경우
  구글 스토어나 앱 스토어로 이동해 앱 설치를 유도한다

앱의 설치 여부를 알 수 있는 방법은 없다!

그래서 살짝의 꼼수를 써서 구현했다

 

function deeplinker(url) {
    let isChange = false;
    const userAgent = navigator.userAgent;

    if (userAgent.match(/Android/i)) { // 안드로이드일 때
        setTimeout(()=>{
            if (!isChange) { 
                gotoappstore();
            } 
        } ,100);
    } else if (userAgent.match(/iPhone/i)) { // 아이폰일 때
    	setTimeout(()=>{
            if (!isChange) { 
                gotoappstore();
            } 
        } ,2000);
    }

    window.location.href = `test://main?deep_link_value=${url}`;
    window.onblur = () => { // blur라면 앱으로 이동한 것
        isChange = true;
    };
    window.onfocus = () => { // 앱으로 이동하지 못하고 남아 있는 것
        isChange = false;
    }
}

 

함수 실행 시
setTimeout으로 지연 줘서 조건에 따라 앱스토어로 이동한다
window.location.href로 딥링크로 이동한다
이때 앱이 있다면 모바일 웹에서 앱으로 이동하기 때문에 oblur가 실행되고 isChange를 true로 변경해 줘서 setTimeout에서 아무 일도 일어나지 않는다
앱이 없다면 앱으로 이동할 수 없기 때문에 계속 focus 된 상태이고 setTimeout에서 앱스토어로 이동하게 한다

 

안드로이드와 아이폰을 나눈 이유는 테스트 해봤을때 아이폰은 2초 이내로 setTimeout을 주면 작동이 안 됐었다
(안드로이드의 경우에는 알아서 앱이 있으면 앱으로 이동하고 없다면 구글 스토어로 간다는 글들이 있었으나.... 나는 앱이 없다면 아무 일도 일어나지 않았다...! 🤔)

 

아직 끝이 아니다... ㅎㅎ 또 다른 문제가 생겼다
강제적으로 setTimeout으로 해주니...


+ safari에서 앱 스토어로 이동이 안된다면 safari 자체 팝업이 차단된 것이 아닌지 확인해 보자!
(이미지: 팝업 차단, 허용)

 

 

최종 전체 소스

function deeplinker(url) {
    let isChange = false;
    const userAgent = navigator.userAgent;

    if (userAgent.match(/Android/i)) { // 안드로이드일 때
        setTimeout(()=>{
            if (!isChange) { 
                gotoappstore();
            } 
        } ,100);
    } else if (userAgent.match(/iPhone/i)) { // 아이폰일 때
        // safari에서 안 될 경우 팝업이 차단되어 있는지 확인!
        const interval = setInterval(() => {
            if (!isChange) { 
                gotoappstore();
                isChange = true;
                clearInterval(interval)
            }
        }, 2000);
    }

    window.location.href = `test://main?deep_link_value=${url}`;
    window.onblur = () => { // blur라면 앱으로 이동한 것
        isChange = true;
    };
    window.onfocus = () => { // 앱으로 이동하지 못하고 남아 있는 것
        isChange = false;
    }
}

// 디바이스에 따라서 구글 스토어, 앱 스토어로 이동
function gotoappstore() {
  switch (checkDevice()) {
    case "android":
      window.open("market://details?id=com.webview.test", "_blank");
      break;
    case "ios":
      window.open("https://apps.apple.com/kr/app/test");
      break;
    default:
      alert("해당 기능은 안드로이드, 애플(iOS) 기기만 지원하고 있습니다.\n스마트폰에서 시도해주세요.");
      break;
  }
}

 

 

참고 자료 -  https://stackoverflow.com/questions/56528191/how-to-fix-deep-linking-in-ios-when-the-application-has-not-installed-in-the-dev