[React] 디퍼드 딥링크 구현

🔗 딥링크

딥링크 (Deep Link) ? 사용자를 특정 앱으로 이동시켜서 원하는 화면을 보여주거나, 사용자 액션을 유도함

• 대표적인 딥링크 : 커스텀 스킴 (Custom Scheme)

커스텀 스킴 (Custom Scheme)

{SCHEME}://{PATH1}/{PATH2}?{PARAM1}=1&{PARAM2}=2

SCHEME : 앱 스킴, 이동하고 싶은 앱을 특정함 (이건 앱에서 따로 지정해야 함)

BUT

• 앱이 설치되어 있지 않으면 동작하지 않음
• 커스텀 스킴을 실행해도 앱이 없으면 아무 반응이 없거나, 에러 화면으로 이동함

🔗 디퍼드 딥링크

디퍼드 딥링크 (Deferred Deep Link) ? 앱이 설치되지 않은 상태에서 링크를 클릭하더라도, 앱 설치 후 처음 실행할 때 원래 보려고 했던 화면으로 자동 이동시켜주는 딥링크 방식

• 유저가 앱이 없을 경우 → 앱스토어로 이동
• 설치 완료 후 → 유저가 클릭했던 딥링크 정보를 기억하고 있다가 자동 이동

원래는 appsflyer, supalink 등 유료 서비스를 사용하여 디퍼드 딥링크를 구현하는데, 코드로만 구현할 수 있을 것 같아서 일단은 코드로만 구현하기로 결정!

💻 구현

const appstoreLink = `https://apps.apple.com/kr/app/asdfs/id66242390?l=en-GB`;
const deepLink = `asdfs://inviteStudy?${queryString}`;

• appstoreLink : 앱스토어로 리다이렉트되는 링크
• deepLink : 커스텀 스킴을 통해 인앱으로 리다이렉트되는 딥링크

const handleClickJoin = () => {
    const userAgent = window.navigator.userAgent.toLowerCase();
    const isIOS = /iphone|ipad|ipod/i.test(userAgent);
    console.log(isIOS);
    if (isIOS) {
      setTimeout(() => {
        window.location.href = appstoreLink;
      }, 100); // 앱이 열릴 시간이 필요하므로 살짝 delay 줌
      window.location.href = deepLink;
    }
  };

• 우선 userAgent를 통해 iOS인지 확인
  • iOS라면 딥링크를 통해 리다이렉트
    • 앱이 열릴 시간을 100ms 줌 → 열리면 바로 앱으로 이동
    • 앱이 열리지 않는다면 앱이 없다는 의미! → 바로 앱스토어 링크로 이동