[JS] 웹 모바일에서 App 실행

Web Mobile 에서 APP 을 실행 할수 있다! 이를 앱링크 or 딥링크 라고 한다.

아래 예제는 메타마스크 로그인에 관한 예제다.

    const LoginWallet = async () => {
        try {
            await ethereum.enable();
        }
        catch (e) {
            let pcDevice = "win16|win32|win64|mac|macintel";
            if (navigator.platform) {
                // 모바일 환경일 경우
                if (pcDevice.indexOf(navigator.platform.toLowerCase()) < 0) {
                    exeDeepLink();
                    checkInstallApp();
                } else {
                    window.open(`${process.env.REACT_APP_INSTALL_META_PC}`, '_blank');
                }
            }
        }
    }

PC버전이라면 try문으로 들어와 메타마스크를 연결창을 실행할 것이며, 아니라면 PC, 모바일 환경을 체크한다.

PC버전일 경우는 env에 설정된 URL 주소로 이동 해 메타마스크 설치 창을 띄울 것이고

모바일일 경우 DeppLink, CheckInstallApp 함수를 실행시킬 것이다.

    const checkInstallApp = () => {
        function clearTimers() {
            clearInterval(check);
            clearTimeout(timer);
        }

        function isHideWeb() {
            if (document.webkitHidden || document.hidden) {
                clearTimers();
            }
        }
        const check = setInterval(isHideWeb, 200);

        const timer = setTimeout(function () {
            redirectStore();
        }, 500);
    }

    const redirectStore = () => {
        const ua = navigator.userAgent.toLowerCase();

        if (window.confirm("스토어로 이동하시겠습니까?")) {
            window.location.href =
                ua.indexOf("android") > -1
                    ? process.env.REACT_APP_INSTALL_META_ANDROID
                    : process.env.REACT_APP_INSTALL_META_IOS
        }
    };

    const exeDeepLink = () => {
        let url = process.env.REACT_APP_DEPP_LINK_META;
        window.location.href = url;
    }

만약 메타마스크를 설치한 사용자라면 해당 메타마스크 앱을 바로 실행 시켜 URL 주소에 해당하는 화면을 띄울 것이고

아니라면 OS 버전에 맞는 Install 페이지를 띄울 것이다.

메타마스크 Deep Link에 관한 문서는 아래 공식문서에 잘 나와있으니 참고 하면 좋다.

https://docs.metamask.io/guide/mobile-best-practices.html#deeplinking

Best Practices | MetaMask Docs

https://metamask.github.io/metamask-deeplinks/

MetaMask deep link generator