How to check if an app is installed from a web-page on an iPhone? - stackoverflow
Window setTimeout() Method - w3schools
Notion의 Theory & Technique : React.js 페이지 바로가기
이번에 맡은 실무 역할 중, 브라우저로 사이트에 접속한 후 주문하기 버튼을 클릭했을 때 해당 사이트의 어플리케이션으로 이동시키는 기능을 구현할 일이 생겼다. 특히, 1. 어플리케이션이 설치 되어있지 않으면 설치 화면으로 이동하고 2. 설치 된 경우라면 어플리케이션의 해당 페이지로 이동시켜주되, Android/ios로 플랫폼 분기 또한(동일한 deeplink로 어플리케이션의 상세페이지 이동이 불가하므로) 처리해야 했다. 이 중, ios에 해당하는 경우에 대해 알아본다.
생소한 내용이라 다소 헤맸지만, 작성법은 다음과 같다:
setTimeout
을 선언하고, 인자로 또 다른 함수를 하나 받는다.window.location.href ="";
setTimeout
의 두 번째 인자로 시간을 전달한다. 참고로 단위는 ms이다.setTimeout
의 후위에 어플리케이션의 해당 페이지의 deep link로 이동하는 코드를 작성해 준다. window.location.href="";
this.function-name
의 형태로 대입한다. Stackoverflow에서 참고한 바에 따르면, 그 문법은 다음과 같다:
// legacy-js version setTimeout(function(){ window.location = "appstore-path-on-here"; }, 25); window.location = "deeplink-on-here";
차근차근 이해해보면 아주 쉬운 원리다. setTimeout
을 통해 처리하면 되는데, 이 setTimeout의 2가지 인자는 다음과 같은 것을 받는다: 1. timeout이 실행되었을 때 실행할 동작 2. timeout의 기준 시간이다. 이는 곧, 25ms가 지나면 setTimeout의 첫 번째 인자로 전달한 함수가 실행된다는 의미이다. 즉 위의 코드작성을 통해 이 setTimeout의 후위에 작성한 window.location = "deeplink-on-here"
링크 이동이 이루어지지 않는 경우, 25ms 이후에 앱스토어로 이동하는 링크가 setTimeout에 전달된 첫 번째 인자 함수에 의해 작동하게 된다.
나는 이 코드를 react의 Component, 그 중 특정 구성 요소에 대입하기 위해 ES6 문법을 사용하여 재 작성 및 호출하는 것이 필요했고, 이를 위해서 다음과 같이 코드를 변형하고 대입하였다 :
... ios(){ setTimeout( { isNotExistIOS(){ window.location.href="appstore-path-on-here"; } }, 25 ); window.location.href="deep-link-on-here" } ... {/* CONDITIONAL RENDERING FROM HERE */} {(() => { // CONDITION 1: MOBILE-IOS if (isMobile && isIOS) { return ( <div className="order-btn-wrapper" onClick={ this.ios } > <div className="order-btn" id="order-btn">run the app or install</div> </div> ) ...
따라서 위의 코드는 다음과 같이 작동한다:
isNotExistIOS
를 받으며 두 번째 인자로 25를 받아 25ms 이후 앱스토어로 이동하게 한다.window.location.href=""
를 대입하여 해당 어플리케이션의 deeplink로 이동하는 구문을 입력 해 준다.window.location.href=""
를 통해 앱스토어로 이동하게 된다.