[Android] WebView (+ Chrome Custom Tabs)

 

 

 

근 한 달 간 웹뷰 이슈 다루며 지겹게 마주한 웹뷰에 대해서 차근차근 정리하고,

쿠키 공유 관련 정책에 대해서도 작성하고자 한다.

 

웹뷰의 난이도에 대해 생각해본 적이 없는데,

생각보다 많은 시간을 쏟게 되면서 개발의 길은

멀고도 험하구나 . . 를 다시 실감 . .

 

아자아자 파이팅 🏳‍🌈

 

 

---

 

네이티브앱 vs 하이브리드앱

현재 다루고 있는 프로젝트에서 차용하고 있는 방식은 웹을 토대로,

모바일 앱에서는 그를 보여주기 위해 웹뷰를 이용해 창을 띄워주는 형식을 사용한다.

 

이러한 하이브리드 앱을 다루는 것은 처음이라,

네이티브 앱과 정확히 어떠한 차이가 있는 지부터 찾아보게 되었다.

 

(1) 네이티브 앱

Native Application

모바일 기기에 최적화되어있는 스마트폰 앱으로 android, iOS 코드를 별도로 사용한다.

즉, 안드로이드ㆍiOS 각각의 플랫폼에서만 최적화되어있는 앱이다.

 

◾ 장점

 - 웹앱 , 하이브리드 앱에 비해 가장 높은 성능을 보인다.

 - 높은 사양의 그래픽과 성능을 자랑하면서도 구동 속도가 빠르며, 인터넷이 연결되어 있지 않아도 사용 가능하다.

 - 네이티브 API 를 호출하여 사용함으로써 플랫폼과 밀착되어 있다.

 - 기기에 저장된 주소록, 파일 등의 고유 정보를 사용할 수 있으며 카메라 등의 하드웨어 또한 제어가 가능하다.

 

◾ 단점

 - 해당 플랫폼에서 요구하는 언어에 제약적이며,

 - 해당 언어와 플랫폼의 API 를 다루는 데 익숙해야 한다.

 

 

(2) 하이브리드 앱

Hybrid Application

'네이티브앱 + 웹앱' 으로, 일반적으로 네이티브 앱에 웹뷰를 띄워 웹앱을 실행시키는 것이 보편적이다.

즉, 웹을 웹뷰로 감싼 후 이를 스토어 (App Store, Google Play) 로 보내는 것이다.

웹 개발 기술을 사용한 앱 개발이라 생각하면 된다.

 

◾ 장점

 - 네이티브 API 와 브라우저 API 를 이용한 다양한 개발이 가능하다.

 - 웹 개발 기술을 사용해 앱을 개발할 수 있다.

 - 한 번의 개발로 모든 OS (웹, iOS, Android) 에서의 구동이 가능하다.

 

◾ 단점

 - 해당 플랫폼에서 요구하는 언어에 제약적이며,

 - 해당 언어와 플랫폼의 API 를 다루는 데 익숙해야 한다.

 - 스마트폰의 기능을 자유롭게 활용하지 못한다. 하이브리드 앱으로 할 수 있는 것은 기본 카메라 기능, 위치 확인, 네트워크 정보, 연락처, 기본적 파일 시스템 확인이기 때문에 고급진 기능들은 어려울 수도 있다.

 

 

 

---

 

WebView

웹뷰란, 안드로이드 앱이 애플리케이션 내에서 직접 웹의 컨텐츠를 표시할 수 있도록 하는

안드로이드 OS (운영체제) 용 시스템 구성요소이다. ( 앱 안에 HTML iframe 넣어놓은 것 )

 

단순히 화면에 뿌려주는 것에 더해 웹과의 유연한 통신을 위해 추가적으로 제공되는

WebViewClient 와 WebChromeClient 에 대해서도 알아보자 !

 

▫ WebViewClient  / 공식

WebView 의 하위 클래스로서, WebView 위젯을 사용해 HTML 링크를 클릭하거나

링크에 따른 내용ㆍ예시ㆍ에러ㆍ폼 등록 렌더링 할 때 호출된다.

이는 웹뷰에서 홈페이지를 띄웠을 때 새 창 아닌 기존 창에서 실행되도록 한다.

 

URL 가로채기 (intercept) 또한 이것을 통해 할 수 있으며, 이같은 특정 작업에 대한 제어권을 확보하려면

WebViewClient 객체를 생성하여 WebView 위젯의 setWebViewClient() 메서드에 넘겨주어야 한다.

1. shouldOverrideUrlLoading
새로운 URL 이 현재 WebView 에 로드되려고 할 때, 
호스트 응용 프로그램이 대신 제어할 기회를 줌

2. onPageStarted
WebView 에서 처음 한번만 호출되는 메소드, 페이지 로딩 시작 알림

3. onPageFinished
WebView 에서 처음 한번만 호출되는 메소드, 페이지 로딩 완료 알림

 

▫ WebChromeClient  / 공식

WebView 의 하위 클래스로서, 경고 표시나 윈도우 닫기 등의 Web 브라우저 이벤트를 구하기 위한  클래스이다. 

(팝업창, 파일 업로드) (웹뷰에서 크롬 사용을 허용)

 

WebChromeClient 클래스를 상속한 클래스를 생성해 처리하고 싶은 이벤트 메소드를 오버라이드하고,

WebVeiw 클래스의 setWebChromeClient () 메소드에 넣어서 사용한다.

 

이는 웹 페이지 자체가 아니라 웹 페이지를 담은 툴,

즉 흔히 "브라우저 크롬(browser chrome)" 이라고 하는 부분에 특화되었다.

1. onShowFileChooser
사용자에게 파일 선택기를 표시하는 메소드
(CATEGORY_OPENABLE = 파일 중 열 수 있는 것들로 카테고리 묶기)

2. onCreateWindow
새 창 만들도록 요청하는 메소드

3. onCloseWindow
지정된 창을 닫고, 필요한 경우 보기 시스템에서 제거하도록 알리는 메소드

4. onJSAlert
웹페이지에 자바스크립트 alert() 대화 상자를 표시하도록 하는 메소드

5. onProgressChanged
페이지 로드의 현재 진행 상황을 알리는 메소드 (토글 띄움)

 

 

 

---

 

Chrome Custom Tabs

기존 특정 웹 페이지를 보여주기 위해 외부 브라우저에 의존하거나 내장된 WebView 를 활용했다.

 

외부 브라우저 (Chrome) 는 많은 기능을 지원하며 상태를 공유한다는 장점이 있지만,

Context Switch 적 성격이 강하며 커스터마이징하기 어렵다.

반대로 내장된 WebView 는 Context Switch 적 성격이 약하고, 커스터마이징은 쉽지만

상태를 공유하지 못하고 표준에 맞춰 지원받기 어려워 공수가 많이 든다는 단점이 있다.

 

외부 브라우저만큼의 호환성을 갖춘 Custom Tabs 가 support library 에 추가되었고,

이것을 internal 처럼 사용할 수 있게 되었다.

 

 

Chrome Custom Tabs 를 통해 웹 페이지를 로드하는 것이 다른 방식에 비해 약 2배 정도 빠르다.

이는 아래와 같은 기능들을 제공한다.

• Context Switch 의 느낌을 적게 준다.
  Launch 때도 Activity level의 화면 전환 느낌이 아니며, 닫을 때도 그렇다.
• Toolbar, Bottom Toolbar 을 customize 할 수 있다.
• pre-warming 이라 부르는 일종의 pre-loading 을 통해 훨씬 빠르게 웹 페이지를 보여준다.
• Chrome Browser와 CookieㆍPermission 을 공유하기에 이미 연결된 사이트에
  재연결 (재로그인) 할 필요가 없다.
• Shared Cookie, jar, Permission 으로 인해 유연한 브라우징이 가능하다. (+ AutoComplete 연동)

 

CustomTabsIntent (공식) 사용법

1. Dependency 정의

implementation "androidx.browser:browser:1.2.0"

 

2. 웹에서 요청된 url 창 띄우기

@JavascriptInterface
    public void openBrowser(final String url) {
        new Handler().post(new Runnable() {
            @Override
            public void run() {
                CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();
                builder.setToolbarColor(Color.parseColor("#ffd524")); // change toolbar color

                CustomTabsIntent customTabsIntent = builder.build();
                customTabsIntent.intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_NO_HISTORY);
                customTabsIntent.launchUrl(activity.getApplicationContext(), Uri.parse(url));
            }
        });
}

 

 

마지막에 작성한 Chrome Custom Tabs 는 이번 프로젝트를 진행하면서

처음 알게 된 아이인데, 기존 웹뷰보다 로딩이 훨씬 매끄럽게 이어진다는 느낌을 받았다.

쿠키 유지도 알아서 해주어서인지, 앱 동작 시에 이슈가 발생하거나 하지 않았다.

 

글을 마치기 전에 공식 홈페이지에서 발견한 비교 이미지를 두고 총총 , ,

 

 

 

 

 

 

© 참고

https://brunch.co.kr/@hyoi0303/48 (네이티브 앱 / 웹앱 / 크로스플랫폼 앱 / 하이브리드 앱)

https://seosh817.tistory.com/67 (Android WebView 속성 정리) 

Android WebView Control 하기 / (1) WebViewClient (2) WebChromeClient

https://aroundck.tistory.com/6031 (Android Chrome Custom Tabs)

Android WebView control 하기 (2/3) - WebChromeClient