코딩뚠뚠

[AWS] 카톡분석 프로젝트-15 / React / 카톡 인앱 브라우저 전환 본문

공부/AWS

[AWS] 카톡분석 프로젝트-15 / React / 카톡 인앱 브라우저 전환

로디네로 2022. 8. 23. 23:45
반응형

 

서비스 배포는 이미 완료했으며 개발간 자잘한 팁들을 포스팅한다.

 

카톡분석 서비스 주소

https://www.advancer-katalk.click

 

카톡분석 왕 테스트

 

www.advancer-katalk.click

 

 

개요

 

카톡으로 링크를 공유받았을때 그 링크는 카톡의 인앱 브라우저로 열리게 된다.

 

인앱브라우저의 경우 대부분 구동 간 제약이 존재한다

- 글자깨짐, 간격 등의 UI 이슈

- 여러 탭이 열리지 않는 이슈 등

 

이런 제약들을 우회하고자 페이지를 열었을 때 인앱브라우저이면

-> 크롬, 사파리로 브라우저를 자동전환하는 방법을 알아보고자 한다.

 

 

코드로 설명

- index.html

<head>
  <script>
  
    /* [브라우저 ready 상태 정의 : 최초 호출 상태] */
    document.addEventListener("DOMContentLoaded", ready);
    function ready() {
      console.log("");
      console.log("[window ready] : [start]");
      console.log("");
      
      // [현재 접속된 url 정보 및 접속 브라우저 확인]
      // [카카오톡 인앱 브라우저 >> 안드로이드 모바일 기종 인 경우 >> 크롬 브라우저 이동 실시]
      var Url = location.href;
      var Agent = navigator.userAgent.toLowerCase();
      console.log("");
      console.log("[window ready] : [접속 Url] : " + Url);
      console.log("[window ready] : [접속 Agent] : " + Agent);
      console.log("");
      
      //alert(Agent);
      // if (Agent.includes("kakao")) { // 카카오, 인스타 인앱 브라우저로 실행 시킨 경우
      if((Agent.indexOf("kakao")>-1)||Agent.indexOf('instagram')>-1){
        // 먼저, 카카오 인앱 브라우저 닫기
        if (Agent.includes("kakao")){
          location.href = 'kakaotalk://inappbrowser/close';
        }
        // 인스타 인앱 브라우저 닫기
        else if (Agent.includes("instagram")){
          location.href = 'instagram://inappbrowser/close';
        }
        if (navigator.userAgent.match(/iPhone|iPad/i)) { // 아이폰 접속 경우
          console.log("");
          console.log("[window ready] : [접속 모바일] : " + "[아이폰]");
          console.log("");
          // 아이폰의 경우 현재 방법이 막혔습니다..
        }
        else { // 안드로이드 접속 경우
          console.log("");
          console.log("[window ready] : [접속 모바일] : " + "[안드로이드]");
          console.log("");
          // 크롬으로 새창 열기
          location.href = 'intent://' + location.href.replace(/https?:\/\//i, '') + '#Intent;scheme=http;package=com.android.chrome;end';
        }
      }
    };
  </script>
  
  ...
  
</head>

 

 

 

 

카카오톡이 아니더라도 인스타그램, 페이스북도 인앱 브라우저가 존재한다.

 

따라서 위 코드에서는 인스타인앱까지 탈출시켜봤다

 

 

 

끝

 

 

반응형

'공부 > AWS' 카테고리의 다른 글

[AWS] 내 사이트 구글 서치콘솔 등록하기  (1) 2023.01.16
[AWS] 재벌집 막내아들 테스트 - 런칭  (0) 2022.12.28
[AWS] 카톡분석 프로젝트-14 / React / 카톡으로 공유하기  (1) 2022.08.22
[AWS] 카톡분석 프로젝트-13 / React / 폰트 적용  (0) 2022.08.21
[AWS] 카톡분석 프로젝트-12 / CSS 배경 관련 속성  (0) 2022.08.06
'공부/AWS' Related Articles more