BLOG ARTICLE HTML5 | 1 ARTICLE FOUND

  1. 2012.10.11 Android WebView 에서 HTML5 Application Cache 사용


안드로이드에서 하이브리드 앱을 만들때, 웹뷰에 html 을 불러와서 보여줄때,


html5 Application Cache 기능 적용


1. 안드로이드에서 WebView 에 각종 설정을 세팅해준다.


2. html 코드에서 불러다 쓸 manifest 파일을 만든다.


3. application cache 를 적용할 html 파일에 manifest 코드를 넣는다.




1. 안드로이드 WebView 설정

        webView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);

        webView.getSettings().setDomStorageEnabled(true);

        String appCachePath = getApplicationContext().getCacheDir().getAbsolutePath();

        webView.getSettings().setAppCachePath(appCachePath);

        webView.getSettings().setAllowFileAccess(true);

        webView.getSettings().setAppCacheEnabled(true);



2. manifest 파일 생성(Manifest.appcache) - 그냥 단순한 text 파일. 웬만하면 불러다쓸 html 파일과 동일한 패스에 저장

CACHE MANIFEST

# WithFlick 

# manifest version : v0.1.7 2010.10.10

CACHE:

images/main_menu_info_on.png

images/main_menu_info.png

images/main_menu_mypage_on.png

images/main_menu_mypage.png



3. html 코드 적용

<!DOCTYPE HTML>

<HTML lang="ko" manifest="Manifest.appcache">



※ 동작방식

manifest 파일에 기술된

5개의 이미지 파일은 최초 로딩될때 다운로드 되어져서 캐시에 저장되었다가,


manifest 파일이 변경되면 전체파일을 다시 다운로드해서 새로 저장한다.


사용자들에게 새로 파일을 다운로드하게 하고싶으면, 이미지파일을 교체후에


manifest 파일에 하나의 문자라도 수정을 하면, 변경을 인식하고 새로 다운로드한다.


보통은 version 을 수정한다.


자바스크립트에서 쓸 유용한 이벤트들도 사용할 수 있습니다.

 

예)

    window.applicationCache.addEventListener('downloading', function() {

alert('리소스 다운로드중입니다.');

 }, false);

window.applicationCache.addEventListener('progress', function() {

alert('각각의 리소스 다운로드중입니다.');

 }, false);

window.applicationCache.addEventListener('updateready', function() {

alert("캐싱이 완료되었습니다.");

window.applicationCache.swapCache();

 }, false);



더 자세한 사항은 아래 사이트에 제대로 정리되어있습니다.

참고 : http://xguru.net/621




YOUR COMMENT IS THE CRITICAL SUCCESS FACTOR FOR THE QUALITY OF BLOG POST