[250318 TIL] 인앱에서 튕겨버리고 싶을때

😂 문제) 특정 기기 + 인앱에서 navigator안됨

안드로이드 옛 기종 등 특정 모바일 기기 중
인앱 브라우저에서는 navigator.share 가 안될 때가 있습니다.

이럴때 사용자를 인앱브라우저에서 아예 튕겨버리는 방법쓸 수 있다는 것을 알게 되었습니다.

☺️ 해결) 해결방법은 간단하나...

방법은 그냥 아래 코드를 App.tsx 혹은 Root 클라이언트 컴포넌트에 넣으면 됩니다.

// 안드로이드 웹뷰에서 navigator.share가 지원되지 않을 때 대체 공유 방법
const handleShareIntent = () => {
    const currentUrl = window.location.href; // 현재 페이지 URL
    const hostname = window.location.hostname; // 현재 호스트명

    // Intent URL 생성 - 동적 호스트명 사용 및 HTTPS 스킴 적용
    const intentUrl = `intent://${hostname}/#Intent;scheme=https;S.browser_fallback_url=${encodeURIComponent(currentUrl)};end;`;

    // 안드로이드 환경에서만 동작, 특정 앱으로 인텐트 호출
    window.location.href = intentUrl;
};

useEffect(() => {
    // navigator.share API가 없는 경우 intent 방식 사용
    if (!navigator.share) {
        handleShareIntent();
    }
}, []);

 

그렇지만 더 큰 문제는 이것이 잘되는지 실제로 테스트해 볼 때 발생합니다.

😭 테스트가 복잡한 편..

테스트의 원리는 이러합니다.
리액트든 뭐든 앱을 로컬에서 띄우는데
https 로 띄워야 합니다.

 

이 방법은 찾으면 많이 나오고 그다지 어렵다기 보단 귀찮은데
이렇게 띄워도 인증서 문제로 인해 실제 기기에서 테스트가 사실상 안됩니다.

 

인스타그램 플필에서 테스트용 링크를 임시로 넣고 들어가 봐도
인증서 문제로 아무것도 뜨지 않습니다.

 

이럴때 ngrok 을 쓰면 편리하게 테스트가 가능했습니다.

1️⃣ ngrok 설치 && 토큰

brew install ngrok

 

ngrok 설치후 브라우저에서 로그인 한후에

ngrok config add-authtoken YOUR_NGROK_AUTH_TOKEN

 

저 토큰 부분에 발급받은 토큰을 넣어 줍니다.

2️⃣ 포워딩

ngrok http 192.168.0.xx:5173

 

만약 5173 으로 실행되고 있는 앱을 포워딩하고 싶다면,
먼저 로컬에서 띄운 뒤 위처럼 하면 끝입니다.

 

그러면
어쩌구저쩌구.ngrok-free.app
같은 형태로 주소를 알려줍니다.

 

이 주소를 이용해서 테스트 하면 끝 입니다.