Simple Web Browser 앱 개발하기

Side Projects - Simple Web Browser
도메인 주소를 검색해서 웹 서핑을 지원하는 간단한 웹 브라우저 앱을 구현한 프로젝트

 

• GitHub -> https://github.com/hwayeon351/Simple-Web-Browser

GitHub - hwayeon351/Simple-Web-Browser

---

학습 회고

오늘은 간단한 웹 브라우저 기능을 지원하는 앱을 만들어 보았다.

EditText를 사용해서 사용자가 입력한 URL을 WebView에 띄운다.

또한, 네비게이션바에 앞으로 가기, 뒤로 가기, 홈 버튼을 추가하여 각각의 기능을 구현하였다.

WebView에 사용자가 요청한 웹 페이지를 띄우는 동안 로딩 중임을 사용자에게 인지하도록 하기 위해 ContentLoadingProgressBar와 SwipeRefreshLayout을 사용하였다.

---

오늘 공부한 내용

• WebView

웹 애플리케이션이나 웹 페이지를 앱에 띄울 때 WebView를 사용한다.

대부분 인터넷에 접근해야 하기 때문에 Menifest 파일에 INTERNET 권한을 요청해야 한다.

• loadUrl() - url을 loadUrl()의 매개변수에 담아 해당 웹 페이지를 WebView에 로드한다.
• settings.javaScriptEnabled() - 기본적으로 WebView에서는 보안상의 이슈로 자바스크립트 사용이 불가하다. 자바스크립트를 사용하기 위해선 WebView에 연결된 WebSettings를 통해서 설정할 수 있다. webView.settings.javaScriptEnabled에 true 값을 적용하면 된다.

• goBack() - WebView가 URL 로드를 하면 방문한 웹페이지의 기록이 자동으로 누적된다. goBack() 매서드를 통해 이전에 방문한 페이지를 로드할 수 있다.
• goForward() - 방문 기록을 통해 앞으로 가기 탐색을 할 수 있다.

• canGoBack() - 이전 페이지 방문 기록이 있다면 true, 없다면 false를 반환한다.
• canGoForward() - 현재 로드된 페이지 이후에 방문한 기록이 있다면 true, 없다면 false를 반환한다.

 

 

• WebChromeClient

WebView가 웹페이지를 띄우는 역할을 수행한다면, WebChromeClient는 자바스크립트 대화상자를 사용자에게 전송하는 등의 브라우저 관점에서 전체 화면을 지원해준다. WebView에 WebChromeClient 객체를 적용해서 사용할 수 있다.

• onProgressChanged() - onProgressChanged() 콜백 메서드를 오버라이드해서 앱에서 요청한 페이지 로딩의 진행 상태를 newProgress 매개변수를 통해 받아 올 수 있다.

 

 

• WebViewClient

WebViewClient는 탐색 오류나 양식 제출 오류 등 콘텐츠를 렌더링하는데 영향을 미치는 이벤트들을 처리한다.

• onPageStarted() - 요청한 페이지를 로딩하기 시작할 때 앱에 알린다.
• onPageFinished() - 페이지 로딩이 완료되었을 때 앱에 알린다.

https://developer.android.com/guide/webapps/webview?hl=ko 

WebView에서 웹 앱 빌드  |  Android 개발자  |  Android Developers

 

 

• ContentLoadingProgressBar

ContentLoadingProgressBar는 짧은 시간 간격으로 빈번하게 로딩 UI 노출이 되는 경우에 사용할 수 있다.

이 경우에 ProgressBar를 사용하면 잦은 깜빡임이 생기고 사용자 입장에서는 서비스 품질이 떨어진다고 느낄 수 있다.

다음 사진의 네비게이션 바 아래의 초록색 바가 ContentLoadingProgressBar이다.

웹 페이지가 로딩되는 동안 진행도를 게이지로 보여주고 로딩이 완료되면 사라진다.

• hide() - ContentLoadingProgressBar가 visible이라면 숨긴다.
• show() - 최소의 딜레이를 기다리고 나서 ContentLoadingProgressBar에 진행률을 표시한다.

https://developer.android.com/reference/androidx/core/widget/ContentLoadingProgressBar

ContentLoadingProgressBar  |  Android Developers

 

 

• SwipeRefreshLayout

SwipeRefreshLayout은 스와이프해서 새로고침 UI 패턴을 구현한다.

SwipeRefreshLayout를 사용하기 위해서 gradle에 dependency를 추가해야 한다. 

dependencies {
    implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.1.0")
}

WebView의 상단에서 아래로 스와이프 하였을 때 페이지가 리로드 되도록 구현하기 위해서 WebView의 상위 레이아웃으로 SwipeRefreshLayout을 적용했다.

setOnRefreshListener()를 통해 스와이프 제스처가 발생하면 앱에 알림 받을 수 있다.

https://developer.android.com/jetpack/androidx/releases/swiperefreshlayout?hl=ko 

Swiperefreshlayout  |  Android 개발자  |  Android Developers