이 글에서는 안드로이드 웹뷰(WebView)의 로컬 저장소에 캐시를 저장하는 방법을 예제와 함께 단계별로 살펴보겠습니다. 웹뷰 캐싱을 활용하면 네트워크 상태가 좋지 않아도 이전에 불러온 데이터를 빠르게 표시할 수 있어 사용자 경험이 크게 향상됩니다.
구현 단계
1단계 — 새 프로젝트 생성
Android Studio에서 File ⇒ New Project로 이동한 후, 새 프로젝트 생성에 필요한 모든 세부 정보를 입력해 프로젝트를 만듭니다.
2단계 — 레이아웃 파일 수정
res/layout/activity_main.xml에 다음 코드를 추가합니다.
<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "https://schemas.android.com/apk/res/android"
xmlns:app = "https://schemas.android.com/apk/res-auto"
xmlns:tools = "https://schemas.android.com/tools"
android:layout_width = "match_parent"
android:gravity = "center"
android:layout_height = "match_parent"
tools:context = ".MainActivity"
android:orientation = "vertical">
<WebView
android:id = "@+id/web_view"
android:layout_width = "match_parent"
android:layout_height = "match_parent" />
</LinearLayout>
위 코드에서는 facebook.com을 표시하기 위한 웹뷰를 화면 전체에 배치했습니다.
3단계 — MainActivity 작성
src/MainActivity.java에 다음 코드를 추가합니다.
package com.example.myapplication;
import android.app.ProgressDialog;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.EditText;
public class MainActivity extends AppCompatActivity {
@RequiresApi(api = Build.VERSION_CODES.P)
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final ProgressDialog progressDialog = new ProgressDialog(this);
progressDialog.setMessage("Loading Data...");
progressDialog.setCancelable(false);
WebView web_view = findViewById(R.id.web_view);
web_view.requestFocus();
web_view.getSettings().setJavaScriptEnabled(true);
web_view.getSettings().setAppCachePath(getApplicationContext().getFilesDir().getAbsolutePath() + "/cache");
web_view.loadUrl("https://touch.facebook.com/");
web_view.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
web_view.setWebChromeClient(new WebChromeClient() {
public void onProgressChanged(WebView view, int progress) {
if (progress < 100) {
progressDialog.show();
}
if (progress == 100) {
progressDialog.dismiss();
}
}
});
}
}
여기서 핵심은 setAppCachePath() 메서드입니다. 이 메서드는 웹뷰가 애플리케이션 내부 파일 디렉터리(getFilesDir()) 하위의 /cache 폴더에 캐시 데이터를 저장하도록 경로를 지정합니다. 또한 setJavaScriptEnabled(true)로 자바스크립트를 활성화하고, WebChromeClient의 onProgressChanged() 콜백을 통해 페이지 로딩 진행률에 따라 프로그레스 다이얼로그를 표시하거나 닫습니다.
참고로 ProgressDialog는 현재 공식적으로 지원 중단(deprecated)된 클래스이므로, 최신 프로젝트에서는 ProgressBar나 커스텀 로딩 UI를 사용하는 것이 권장됩니다.
4단계 — 매니페스트 설정
AndroidManifest.xml에 다음 코드를 추가합니다.
<?xml version = "1.0" encoding = "utf-8"?>
<manifest xmlns:android = "https://schemas.android.com/apk/res/android"
package = "com.example.myapplication">
<uses-permission android:name = "android.permission.INTERNET"/>
<application
android:allowBackup = "true"
android:icon = "@mipmap/ic_launcher"
android:label = "@string/app_name"
android:roundIcon = "@mipmap/ic_launcher_round"
android:supportsRtl = "true"
android:theme = "@style/AppTheme">
<activity android:name = ".MainActivity">
<intent-filter>
<action android:name = "android.intent.action.MAIN" />
<category android:name = "android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
인터넷을 통해 웹 페이지를 불러오므로 반드시 android.permission.INTERNET 권한을 선언해야 합니다.
앱 실행 및 결과 확인
이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 기기가 컴퓨터에 연결되어 있다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤 툴바의 Run 아이콘을 클릭하고, 목록에서 본인의 모바일 기기를 선택합니다. 그러면 기기 화면에 아래와 같은 결과가 표시됩니다.
