[안드로이드] 웹뷰(WebView)(3) - 브라우저 캐시 사용하기

안녕하세요. 이번 포스팅에서는 웹 자바스크립트에서 설정한 캐시를 사용하여 웹페이지를 로드하는 방법에 대해 알아보겠습니다.

 

실제로 안드로이드에서 캐시를 통한 웹 로드인지 네트워크를 통한 웹 로드인지 구분하는 메서드는 없는 것으로 알고있기 때문에 사용하는 방법에 대한 설명만 드리고 마무리하는 것으로 하겠습니다.

 

웹뷰에 대한 생성 및 제어에 관련된 포스팅은 아래에 있습니다.

 

2022.12.26 - [Android] - [안드로이드] 웹뷰(WebView)(1) - 앱 브라우저에서 호출

 

2023.01.03 - [Android] - [안드로이드] 웹뷰(WebView)(2) - 접근과 제어

 

---

 

개요

우리가 웹페이지를 브라우저에서 로드할때 리소스가 큰 이미지 파일이나 많은 양의 뷰를 불러오는 것은 페이지 로드시간의 지연에 큰 영향을 미칩니다.

 

이때 JavaScript에서 캐시를 이용해 리소스를 저장시켜놓고, 다음번에 그 리소스를 사용할 때 저장되어 있는 데이터를 사용하여 로드시간을 단축시키는 방법을 사용합니다. 

 

<javacript>

// 캐시된 데이터를 가져오기
var cachedData = localStorage.getItem("cachedData");
if (cachedData !== null) {
    // 캐시된 데이터가 있을 경우 사용
    console.log("Cached data: " + cachedData);
} else {
    // 캐시된 데이터가 없을 경우 다른 처리 수행
    console.log("No cached data available.");
}

 

캐시의 장단점

 

캐시를 사용하여 페이지를 로드하게되면 데이터 사용량도 감소하고 페이지의 로딩속도도 빨라지며, 네트워크를 사용하지 않는 로드방식이라 오프라인 상태에서도 접근이 가능합니다.

 

대신 웹페이지의 보안이 취약하다면 캐시에 민감정보가 담겨있는 경우 해킹의 위험성이 존재하고, 저장공간을 소비하는 것이므로 대용량 데이터를 캐시로 로드하게되면 디바이스의 저장공간이 소비될 수 있습니다.

 

 

본문

 

캐시 지정 방식

 

안드로이드에서 웹뷰를 생성하면 기본적으로 캐시를 사용합니다. setCacheMode를 통해 태그를 할당하여 캐시 사용방식을 따로 지정해줄 수 있습니다.

 

<MainActivity.kt>

val webView: WebView = findViewById(R.id.webView)
val webSetting: WebSettings = webView.settings
        
webSettings.apply {
	javaScriptEnabled = true // 자바스크립트 허용
	cacheMode = WebSettings.LOAD_CACHE_ELSE_NETWORK // 브라우저 캐시 허용
  	webView.webViewClient = WebViewClient() // 웹뷰 클라이언트 생성
}

webView.loadUrl("https://tekken5953.tistory.com/") // 페이지 로드

 

캐시의 종류

 

cacheMode는 총 4가지 모드를 가지게 되는데, 종류는 아래와 같습니다.

LOAD_CACHE_ONLY	캐시만 사용하여 페이지를 로드합니다.
LOAD_CACHE_ELSE_NETWORK	캐시로 먼저 로드하고 나머지를 네트워크로 로드합니다.
LOAD_DEFAULT	캐시를 사용하지만, 서버에서 갱신된 내용이 있다면 불러옵니다.
LOAD_NO_CACHE	항상 네트워크만 사용하여 페이지를 로드합니다.

 

캐시 데이터 초기화

캐시를 오래 가지고 있으면 원본 데이터와의 동기화가 되지 않을 수 있습니다.

또한 더이상 사용하지 않는 데이터에 대한 리소스를 가지고 있을 가능성도 있기 때문에, 적절한 곳에서 캐시를 초기화 해주는 것이 좋습니다.

 

캐시를 초기화하는 코드는 아래와 같습니다.

webView.clearCache(true)

 

결론

웹뷰에서 웹의 캐시 데이터를 사용하는 방법에 대해 알아보았습니다.

기본적인 세팅이 캐시를 사용하는 것이라 은연중에 사용하는 경우가 많은데요, 반대로 캐시를 사용하지 않거나 관리해주기 위해선 한번쯤 알아두는 것도 좋지 않을까 싶습니다. 

 

 

그리고 웹뷰에 대한 4번째 시리즈인 웹뷰 쿠키&세션 알아보기 포스팅이 업로드되었습니다.

아래 링크를 통해 확인하실 수 있습니다.

 

2024.01.05 - [Android] - [안드로이드] 웹뷰(WebView)(4) - 쿠키&세션 알아보기🍪

[안드로이드] 웹뷰(WebView)(4) - 쿠키&세션 알아보기🍪

 

 

 

감사합니다.