[인생 그래프] 카카오톡 인앱 브라우저 탈출하기

그래프 이미지를 저장하는 기능을 html2canvas와 file-saver로 구현했다.

그런데 카톡에서 링크를 열어서 그래프를 그리고 저장 버튼을 누르면.. 아무일도 일어나지 않는다! 

아이폰 기준 사파리에서는 잘 되는데 ㅠㅡㅠ

찾아보니 이 문제로 이미 많은 개발자들이 고통받고 있었다. 

방법을 찾다가 카카오톡 브라우저에 대한 문제 제기해주신 글을 봤다.

https://medium.com/@sunyi233

 

위 글을 읽다가 여기서 솔루션을 찾을 수 있었다!

https://burndogfather.com/271

카카오톡/라인 인앱브라우저에서 외부브라우저 띄우기 (2023.09.21 최신 - inapp browser bypassing)

이 코드를 참조해서 사이트 접속 시 첫 페이지에서 아래 코드를 추가해주었다. 

  useEffect(() => {
    const userAgent = navigator.userAgent.toLowerCase();
    const isKakaoInApp = userAgent.includes("kakaotalk");

    // 카카오톡 인앱 브라우저일 경우에만 실행
    if (isKakaoInApp) {
      const targetUrl = "https://life-graph.vercel.app/";
      window.location.replace(`kakaotalk://web/openExternal?url=${encodeURIComponent(targetUrl)}`);
    }
  }, []);

브라우저의 정보가 담긴 navigator 객체의 userAgent 속성이 kakaotalk을 포함하는지 여부를 통해 외부 브라우저로 리다이렉트 해준다.

Do it 자바스크립트에서 배운 BOM 내용이어서 반가운 ㅎ

Navigator 객체는 렌더링 엔진의 이름을 보고 웹브라우저 종류를 구별한다.

 

잘 작동되는것을 확인했다!

다음으로 해결할 부분은 이미지 복사.. 이건 사파리에서도 안된다. 

 

이미지를 클릭하면 사이트로 이동합니다.