번개애비의 라이프스톼일

카카오, 네이버 인앱에서 외부 브라우저 띄우는 방법 정리 [Android/iOS] 본문

IT

카카오, 네이버 인앱에서 외부 브라우저 띄우는 방법 정리 [Android/iOS]

번개애비 2019. 6. 17. 21:46

더 쾌적하게?

웹 서비스를 개발하는 입장에서 클라이언트가 위와 같은

브라우저를 사용할때 정말 피곤합니다.

 

휴대폰 본인인증이나 PG결제등 여러가지 제약사항들이 생기기 마련입니다.

그렇다고 위와 같은 포털사들이 인앱 브라우저를 완벽하게 만드는것도 아니면서

외부 브라우저 사용을 엄격하게 제한하고 있습니다.

 

특히 windows.open 버그의 경우 카카오 인앱 브라우저는 정말 저질입니다.

이미 많은 개발자들 아우성을 치고 있죠...

 

https://devtalk.kakao.com/t/topic/27890

 

Kakao DevTalk_

카카오 데브톡. 카카오 플랫폼 서비스 관련 질문 및 답변을 올리는 개발자 커뮤니티 사이트입니다.

devtalk.kakao.com

 

그렇다고 카카오와 네이버등과 같은 포털사에서 인앱 브라우저에 신경을 써주지 않으니....

 

또하나의 문제점은 포털사들이 개발해놓은 이러한 인앱브라우저가

기본 웹표준은 고사하고 inner.height 값등과 같은 절대적인 값들 정말 그지같이 반환해주는 문제점이 있습니다.

 

 

 

 

 

 

 

네이버앱의 인앱브라우저에서

제 블로그를 띄운 모습....

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

카카오톡의 인앱 브라우저에서

제 블로그를 띄운 모습....

 

 

 

 

 

 

 

 

 

무엇이 문제인지 잘 모르시는 분들은 카카오톡의 인앱브라우저에서

상단 주소창이 숨겨지면서 생기는 각종 height 버그들을 직접 코딩하며 느껴보시길 바랍니다.

 


"이러한 문제점들을 해결하기위해"

 

그래서 위와 같은 인앱 브라우저에서 "강제"로 외부 브라우저를 호출할 수 있는 방법을 공개합니다.

 

 

 

 


먼저 안드로이드 기준입니다.

(안드로이드는 참 심플합니다.)

 

<script>
	location.href='intent://www.test.com#Intent;scheme=http;package=com.android.chrome;end'
</script>

위와 같이 페이지를 강제 이동시켜서 크롬으로 URL을 열게 하거나 onclick 이벤트를 통해 크롬브라우저로 URL을 강제로 열게 할 수 있습니다. 위의 소스중 www.test.com만 원하시는 URL로 변경하여 사용하면 됩니다.

위 방식은 안드로이드의 intent 속성을 통해 사용하는 방법입니다. 

브라우저를 크롬 패키지로 설정한 이유는 대부분... 거의 모든 안드로이드폰에 크롬이 이미 내장되어 있기 때문입니다.

 

 

 


 

iOS (iPhone) 기준입니다.

(안드로이드에 비해서 조금 복잡합니다.)

 

<script>
	location.href='ftp://www.test.com/bridge.html'
</script>

안드로이드와 비슷하게 사용하면 되나, 링크를 자세히 보시면 FTP를 호출하는것을 보실 수 있습니다.

iOS에서 FTP프로토콜을 호출하게 되면 자동으로 사파리가 열리게 되는 현상을 이용한 것입니다.

물론 저 FTP계정은 익명(anonymous)이 접근이 가능해야겠죠

 

위 FTP내 bridge.html의 소스내용은 다음과 같습니다.

<script>
        window.open("http://www.test.com", "_self");
</script>

원리가 참 간단합니다.

FTP프로토콜을 웹에서 실행함으로써 iOS운영체제에서 강제로 Safari를 실행시키게 되며, Safari가 해당 FTP내 html을 읽어들임으로써 강제로 페이지가 이동되게 됩니다.

물론 x-web-search://?[query] 와 같은 유니버셜링크를 활용하는 방법이 있지만,

쿼리만 던질수 있을뿐 URL을 던지질 못합니다.

 

 

 

이 글을 통해 많은 웹/앱 개발자분들이 네이버나 카카오, 페이스북등의 인앱 브라우저 지옥(?)에서 벗어나길 기원합니다.

잔기술을 이용한 방식이기 때문에 미션크리티컬한 서비스에 적용시 충분히 테스트후 적용하시는것을 권장해드립니다.

31 Comments
댓글쓰기 폼