Vue.js | PWA | uri scheme 가 없을 경우

uri scheme 를 통해서 다른 앱을 열려고 하지만, 앱이 없을 경우의 if 문을 작성하는 방법

상황

daumapp://을 통해서 지도앱을 열어서 위치를 검색하려고 하는데 앱이 없어서 다운받는 페이지로 이동

안드로이드

안드로이드 플레이스토어 접속 URL Scheme

market://details?id=[app id]
market://details?id=net.daum.android.map

브라우저를 통해서 설치시키고자하는 앱의 주소를 알 수 있다.
Play Store에서 다음맵을 검색하고, 앱을 눌러보면 상단에 https://play.google.com/store/apps/details?id=net.daum.android.map 와 같은 주소가 있다. 뒤에 id부분을 [app id] 부분에 추가하면 된다.

아이폰

애플 스토어의 URL Scheme

itms-apps://itunes.apple.com/app/[appName]/[appID]

개발자용 앱 URL Scheme

itms-apps://itunes.apple.com/developer/[developerName]/[developerID]

앱스토어는 브라우저에서 작동되는 사이트가 없으므로 구글링을 통해서 앱정보 페이지로 접속해야 합니다.

https://itunes.apple.com/kr/app/카카오맵-대한민국-no-1-지도앱/id304608425?mt=8

이런식의 주소를 찾을 수 있는데요. id304608425가 앱의 아이디입니다. 그럼 결과물은 아래과 앝은 형태가 됩니다.

items-apps://itunes.apple.com/app/id304608425

Javascript 코드

브라우저에서 기기 종류를 파악하는 코드

혹시 모를 안드로이드와, 아이폰 종류를 구분하기 위해서 아래의 코드를 작성했습니다.

getOS () {  
  let userAgent = window.navigator.userAgent  
  let platform = window.navigator.platform  
  let macosPlatforms = \['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'\]  
  let windowsPlatforms = \['Win32', 'Win64', 'Windows', 'WinCE'\]  
  let iosPlatforms = \['iPhone', 'iPad', 'iPod'\]  
  let os = null  
 if (macosPlatforms.indexOf(platform) !== -1) {  
    os = 'Mac OS'  
  } else if (iosPlatforms.indexOf(platform) !== -1) {  
    os = 'iOS'  
  } else if (windowsPlatforms.indexOf(platform) !== -1) {  
    os = 'Windows'  
  } else if (/Android/.test(userAgent)) {  
    os = 'Android'  
  } else if (!os && /Linux/.test(platform)) {  
    os = 'Linux'  
  }  
  return os  
}

URI 로 이동하는 function

goToUri (uri) {  
  window.location = uri // 앱이 있으면, 앱으로 이동. 없으면 다음줄 실행
  setTimeout( fucntion() => {  
    if (confirm('다음맵이 설치되어 있지 않습니다. 설치하시겠습니까')) {  
      if (this.os === 'Android') {  
        window.location = 'market://details?id=net.daum.android.map'  
  }  
      if (this.os === 'iOS') {  
        window.location = 'itms-apps:/itunes.apple.com/app/id304608425'  
  }  
    }  
  }, 100)  
}