[Android][kotlin] User-Agent Mobile 인식하게 만들기(ex. 갤럭시 폴드 카카오톡 공유하기 대응)

안녕하세요~ 챠니입니다! :)

개발을 진행하면서 Android 갤럭시 폴드 단말기기에서 pc모드일때 카카오톡 공유가 안되는 이슈가 있었습니다.

원인을 확인을해보니 갤럭시 폴드 pc모드 단말에서는 User-Agent가 모바일로 인식이 되는 것이 아니라 pc로 인식되기때문에 카카오톡 SDK내부에서 모바일로직실행이 아닌 PC로직실행이 되면서 오류가 발생하는것을 확인했습니다.

 

그럼 해당내용을 어떻게 처리하면 되는지 알아보도록 하겠습니다.

 

 

(확인) WebView User-Agent 모바일로 인식하는 조건은 무엇일까?

먼저 적용건 다음 아래의 JavaScript 코드를 통하여 User-Agent에서 모바일조건을 확인하는 코드가 있습니다.

if(navigator.userAgent.match(/Mobile|iP(hone|od)|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/)){

  //스마트폰으로 인식하여 실행 될 스크립트
  //User agent에는 사용자 기기에대한 정보가 포함되어있습니다. 즉 모바일환경을 인식 가능
  
  //태블릿을 제외한 스마트폰에서만 실행 가능한 스크립트 작성

}

 

 

 

다음은 모바일 기기와 안드로이드 태블릿 및 아이패드 조건이 포함되어있습니다.

 

if(navigator.userAgent.match(/Android|Mobile|iP(hone|od|ad)|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/)){

  //모바일기기(스마트폰+태블릿)에서 실행 될 스크립트
  //안드로이드 태블릿, 아이패드 정보조건이 포함되어 있습니다.

}

 

 

 

(적용) Android WebView User-Agent 모바일로 인식하게 만들기

갤럭시폴드 pc모드에서 카카오톡 공유하기가 정상적으로 작동이되려면 User-Agent가 모바일이라는 값이 인식되어야 합니다.

 

그렇다면 Android WebView의 User-Agent를 어떻게 수정하면 되는지 알아보도록 하겠습니다.

다음 코드는 Android WebView의 User-Agent를 수정하는 코드입니다.

//case1. 일반적인 User-Agnet 셋팅
binding.webview.settings.userAgentString = "${WebView(this).setting.userAgentString};"


//case2. 해당 앱의 User-Agent를 모두 Mobile로 인식하게 만들기
binding.webview.settings.userAgentString = "${WebView(this).setting.userAgentString};Mobile"

 

case2처럼 User-Agent에 "Mobile"이라는 인식값을 추가하여 WebView User-Agent를 체크하는 부분에서 Mobile로 인식될  수 있도록 추가하였습니다.

 

"android"가 될 수도 있고 해당 부분은 처음 이야기했었던 JavaScript에서 모바일 및 해당 기기에서 인식 될 수 있도록 체크하는 구문을 이해하시고 추가하시면 되겠습니다.

 

다음과 같은 WebView의 User-Agent를 추가함으로써 갤럭시폴드 pc모드에서도 카카오톡 공유하기가 정상적으로 작동하는 것을 볼 수 있습니다.

 

 

끝!

 

 

 

 

 

 

 

 

질문 또는 궁굼한 부분은 댓글을 남겨주세요! 친절하게 답변드리겠습니다!

응원의 댓글은 저에게 큰 힘이 된답니다! :)

즐거운 하루되세요!

 

깃허브 보러 놀러오세요 👇 (맞팔환영)

https://github.com/younminchan

younminchan - Overview