[React] 카카오톡/라인 인앱 브라우저에서 외부 브라우저로 열기

카카오톡, 라인에서 인앱 브라우저에서 외부 브라우저로 열기할 때 사용하려고 한다.

GA utm 파라미터를 잃게되거나 혹은 다른 url로 변경될 때 전달되지 않은 값이 있을 수 있으니 이걸로 처리하는게 좋을 듯 싶다.

 

import React, { useEffect } from 'react';

const InAppBrowserRedirect = () => {
  useEffect(() => {
    const copyToClipboard = (val) => {
      const textarea = document.createElement('textarea');
      document.body.appendChild(textarea);
      textarea.value = val;
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
    };

    const inAppBrowserOut = () => {
      copyToClipboard(window.location.href);
      alert(
        'URL주소가 복사되었습니다.\n\nSafari가 열리면 주소창을 길게 터치한 뒤, "붙여놓기 및 이동"를 누르면 정상적으로 이용하실 수 있습니다.'
      );
      window.location.href = 'x-web-search://?';
    };

    const userAgent = navigator.userAgent.toLowerCase();
    const targetUrl = window.location.href;

    if (userAgent.match(/kakaotalk/i)) {
      // 카카오톡 외부 브라우저로 호출
      window.location.href = `kakaotalk://web/openExternal?url=${encodeURIComponent(targetUrl)}`;
    } else if (userAgent.match(/line/i)) {
      // 라인 외부 브라우저로 호출
      const urlWithParam =
        targetUrl.indexOf('?') !== -1
          ? `${targetUrl}&openExternalBrowser=1`
          : `${targetUrl}?openExternalBrowser=1`;
      window.location.href = urlWithParam;
    } else if (
      userAgent.match(
        /inapp|naver|snapchat|wirtschaftswoche|thunderbird|instagram|everytimeapp|whatsApp|electron|wadiz|aliapp|zumapp|iphone(.*)whale|android(.*)whale|kakaostory|band|twitter|DaumApps|DaumDevice\/mobile|FB_IAB|FB4A|FBAN|FBIOS|FBSS|trill|SamsungBrowser\/[^1]/i
      )
    ) {
      if (userAgent.match(/iphone|ipad|ipod/i)) {
        // iOS: Safari로 이동 안내
        const mobileMeta = document.createElement('meta');
        mobileMeta.name = 'viewport';
        mobileMeta.content = 'width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui';
        document.head.appendChild(mobileMeta);

        const fontLink = document.createElement('link');
        fontLink.href = 'https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap';
        fontLink.rel = 'stylesheet';
        document.head.appendChild(fontLink);

        document.body.innerHTML = `
          <style>
            body {
              margin: 0;
              padding: 0;
              font-family: 'Noto Sans KR', sans-serif;
              overflow: hidden;
              height: 100%;
            }
          </style>
          <h2 style="padding-top: 50px; text-align: center;">인앱브라우저 호환 문제</h2>
          <article style="text-align: center; font-size: 17px; color: #999;">
            아래 버튼을 눌러 Safari를 실행해주세요.<br />
            Safari가 열리면, 주소창을 길게 터치한 뒤,<br />
            '붙여놓기 및 이동'을 누르면 정상적으로 이용할 수 있습니다.<br /><br />
            <button
              onclick="(${inAppBrowserOut.toString()})()"
              style="min-width: 180px; margin-top: 10px; height: 54px; font-weight: 700; background-color: #31408E; color: #fff; border-radius: 4px; font-size: 17px; border: 0;"
            >
              Safari로 열기
            </button>
          </article>
          <img style="width: 70%; margin: 50px 15% 0 15%;" src="https://tistory3.daumcdn.net/tistory/1893869/skin/images/inappbrowserout.jpeg" />
        `;
      } else {
        // Android: Chrome으로 이동
        window.location.href = `intent://${targetUrl.replace(/https?:\/\//i, '')}#Intent;scheme=http;package=com.android.chrome;end`;
      }
    }
  }, []);

  return null;
};

export default InAppBrowserRedirect;

 

이 분의 글을 참고하였습니다.

https://burndogfather.com/271