딥링크

이상훈
상훈 Devlog
Published in
3 min readApr 28, 2024

정의

특정 주소를 입력하면 앱이 실행되거나 앱 내 특정 화면을 이동시키는 링크

종류

  • URI 스킴 방식 : 앱에 URI 스킴(scheme) 값을 등록하여 딥링크 사용
  • 앱링크(App Link) : Android 제공 — 도메인 주소를 이용한 딥링크 사용
  • 유니버셜 링크 (Universal Link) : iOS 제공 — 도메인 주소를 이용한 딥링크 사용

다이나믹 링크

  • 파이어베이스에서 제공하는 서비스
  • 하나의 링크가 각 플랫폼과 설치여부 등에 따라 다르게 수행되도록 설정이 가능

구현 방법

  • 모바일 웹뷰와 모바일 웹은 userAgent로 구분을 할 수 없다.
  • 따라서 안드로이드 코드에서 특정 userAgent를 심는다.(NNB_ANDROID_AGENT)
webView.settings.run {
javaScriptEnabled = true
javaScriptCanOpenWindowsAutomatically = true
allowFileAccess = true
cacheMode = WebSettings.LOAD_NO_CACHE
domStorageEnabled
userAgentString = "Mozilla/5.0 (Linux; Android 4.4; Nexus 4 Build/KRT16H) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/30.0.0.0 Mobile Safari/537.36 NNB_ANDROID_AGENT"
setSupportMultipleWindows(true)
}
  • 프론트엔드에서 디바이스 운영체제와 특정 userAgent(NNB_ANDROID_AGENT)가 포함되어 있는지 판단한다.
  • 모바일 웹뷰라면 다이나믹 링크가 담긴 모달을 띄워 앱으로 유도한다.
checkAndroidWeb(template) {
if (this.deviceService.getDeviceInfo().os === "Android" && !this.deviceService.getDeviceInfo().userAgent.includes('NNB_ANDROID_AGENT')) {
const config = {
class: 'modal-dialog-centered',
animated: true,
backdrop: true,
}
this.modalRef = this.modalService.show(template, config);
}
}

참고

--

--

이상훈
상훈 Devlog

Frontend Developer 😁😁 #angular #javascript #typescript #scala #node