투케이2K

180. (TWOK/ERROR) [Android] 웹뷰 (Webview) 에서 자바스크립트 (js) 및 Css 변경 사항이 새롭게 적용 되지 않는 이슈 - 웹뷰 캐시 초기화 본문

투케이2K 에러관리

180. (TWOK/ERROR) [Android] 웹뷰 (Webview) 에서 자바스크립트 (js) 및 Css 변경 사항이 새롭게 적용 되지 않는 이슈 - 웹뷰 캐시 초기화

투케이2K 2023. 10. 25. 17:06

[환경 설정 및 설명]

프로그램 : AndroidStudio

설 명 : [Android] 웹뷰 (Webview) 에서 자바스크립트 (js) 및 Css 변경 사항이 새롭게 적용 되지 않는 이슈 - 웹뷰 캐시 초기화

 

[에러 원인]

1. 안드로이드 웹뷰 로딩 시 웹 (Web) 단에서 변경 된 Js , Css 등이 새롭게 반영 되지 않는 이슈 발생

 

[해결 방법]

 


-------------------------------------------------------------------------------

[기존 적용 된 소스 코드 및 상태] 

1. [Web] : 코드 변경이 일어 날 때 새롭게 Js 및 Css 버전 올려서 배포 (ex : twok.js?123)

   <link rel='stylesheet' href='style/jquery.mobile-1.3.2.min.css?ver=1.3.2'>
   <script src="js/jquery-1.8.3.min.js?ver=1.8.3"></script>
   <script src="js/jquery.mobile-1.3.2.min.js?ver=1.3.2"></script>
   <script src="js/my_script.js?ver=201603111428"></script>


2. [Android] main_webview.getSettings().setCacheMode 설정에서 LOAD_CACHE_ELSE_NETWORK 설정 적용

  >> 앱 내에 적용 된 디스크 및 메모리 캐시가 있으면 사용, 없을 시 네트워크 사용해 새롭게 받아옴

-------------------------------------------------------------------------------

[새롭게 변경 된 소스 코드 및 상태]

1. [Web] : 코드 변경이 일어 날 때 새롭게 Js 및 Css 버전 올려서 배포 (ex : twok.js?123)

   <link rel='stylesheet' href='style/jquery.mobile-1.3.2.min.css?ver=1.3.2'>
   <script src="js/jquery-1.8.3.min.js?ver=1.8.3"></script>
   <script src="js/jquery.mobile-1.3.2.min.js?ver=1.3.2"></script>
   <script src="js/my_script.js?ver=201603111428"></script>


2. [Android] 웹뷰 속성 적용 및 로드 방식 변경

   mWebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
   mWebView.clearCache(true);
   mWebView.loadUrl("about:blank");
   mWebView.reload();
   mWebView.loadUrl("www.twok.com"); // [실제 로드 할 URL 주소]


3. 변경 방식 테스트 결과 : 

  >> 웹에서 변경 된 Js, Css 등이 있는 경우 새롭게 App 에서 받아온다
  >> 다음번 실행에서 저장된 값이 있으면 디스크 및 메모리 캐시를 사용해서 로딩 속도를 향상 시킨다

-------------------------------------------------------------------------------

 

반응형
Comments