모바일 브라우저에서 앱 실행하기 대작전(Android, iOS)

이 문서의 최종 수정일: 2020.12.24 Merry Christmas

웹개발자의 칼퇴근을 늦추는 원흉 중에 같은 코드 OS/Browser 별 다른 동작이 있다. 예전에는 최악의 브라우저 Internet Explorer 때문에 발생하는 경우가 많았다. IE가 거의 사장된 지금은 예전보다 다변화된 디바이스 환경 때문에 가끔 발생한다.

앱 랜딩 페이지가 하나 있는데, OS와 브라우저 별로 다르게 동작해서 골치였다. 어떤 OS와 브라우저 조합에서는 마음대로 앱을 실행시킬 수 없다. 그래서 앱 실행하기 버튼을 추가해야 했다.

OS + Browser 조합별 테스트 결과

• Android + Chrome: 페이지 로딩 시 코드로 앱을 실행시킬 수 없으며, 반드시 사용자의 액션(클릭 등)이 있어야 한다.
• Android + 기본 브라우저: 페이지 로드 시 앱이 즉시 실행된다. 단, 제조사마다 기본 브라우저가 다를 것이므로 그냥 안된다고 생각하기로 했다.
• iOS + Safari: 페이지 로드 시 앱 실행이 호출 되지만 'OO을 실행하시겠습니까?' 컨펌 창이 뜨고 확인을 눌러야 실행된다. 또한 앱이 실행 되었는지 여부를 판단할 방법이 없으므로 화면 로딩 후 3초 뒤에 앱스토어로 연결되게 했다.
• iOS + Chrome: 페이지 로드 시 앱이 즉시 실행된다.

해결

모든 OS와 브라우저를 대응하기 위해서 어쩔 수 없이 다음처럼 진행했다. 다음은 대충 슈도코드이다.

if (android) {
  // Android
  if (chromeBrowser) {
    $('#appLinkButton').on('click', () => {
      location.href = androidIntentUrl;      
    });
  } else {
    location.href = androidPlayStoreUrl;
  }
} else {
  // iOS
  location.href = iosAppScheme;
  setTimeout(function(){
    location.href = iosAppStoreUrl;
  }, 3000); // 너무 빨리 앱스토어를 실행할 경우, 사파리에서 앱 실행 확인 컨펌을 하기 전에 실행되어 앱스토어와 앱이 동시에 실행된다. 그래서 사용자 입장에서는 앱스토어만 열린 것처럼 보인다.
}