Application Cache를 사용한 오프라인 모드

Application Cache란?

오프라인 모드를 지원해야하는 문제가 생겨 찾아보던 중 알게된 Application Cache!
아직은 많이 부족하다고 느껴진다. 하는데까지 해보고 추후 공유할 경험이 있으면 공유하기로 기약하며
간단하게 기록해봅니다.

 

creatures

 

기존에는 브라우저 자체가 템포러리 폴더(임시폴더)에 저장하고 브라우저 자체에 의해 관리되기 때문에 실제로 자신의 데이터가 캐쉬되어 있는지 확인하거나 관리할 수가 없다.
Application Cache는 HTML5에서 도입된 기술로 기존과는 달리 전적으로 웹앱에 의해 관리되어 어떤 파일을 캐시할지부터 캐쉬된 파일을 업데이트 할지 말지를 웹 어플리케이션이 결정하게 된다.
페이지 로딩시 cache.menifest에 있는 파일 리스트를 읽어서 캐시에 저장한다. 그 후로는 접속 시에 cache.menifest만을 받아오고, 이 파일이 업데이트 되지 않았다면 캐쉬에 있는 내용을 사용한다.
업데이트 되었더라도 이번 접속 때는 캐쉬에 있는 것을 사용하고, 다음에 다시 접속했을 때 부터 업데이트 된 내용이 적용된다.

 

Application Cache의 특징

  • Offline 지원 : 한번 사이트에 접속하여 파일을 다운로드 해 놓으면, 사용자가 오프라인일때에도 페이지/사이트를 접근할 수 있다.
  • 속도 향상 : 지정한 모든 파일을 로컬에 저장해두므로, 훨씬 빠르게 페이지를 표시할 수 있다. 일반적으로 CSS, JS 같은 파일들은 전체 사이트에서 공유되므로 초기에 한번만 다운로드해 놓으면 그 후에는 매우 빠르게 재사용된다.
  • 서버 부하 감소 : 캐쉬된 파일들이 있을 경우에 브라우저가 그 페이지를 Reload 할 경우, 브라우저는 혹시 캐쉬된 파일이 업데이트 되었는지만 체크하고 변경 안되었을 경우 다운로드 하지 않으므로 서버측에서는 파일전송에 대한 부하가 줄어들게 된다.

 

구현코드 및 방법

웹루트내 Cache Manifest 파일 생성하면되며 위치는 어디에 놓아도 상관없다.
경로만 잘 지정해주면 된다.

  • CACHE : 캐쉬한 파일의 목록을 적어준다.
  • NETWORK : 네트워크 통신이 필요한 경우 반드시 리스트에 적어줘야 한다. 하나라도 빠질 경우 오프라인 모드에서 정상적인 작동이 이루어지지 않습니다.
  • FALLBACK : 특정 파일이 없는 경우 대체 파일을 캐싱해줍니다.

제 연습실에 간단하게 예제를 받아서 테스트 해보았습니다. 이곳을 참고해주세요!!

[button link=”http://lib.qnibus.com/offline” color=”red”] 작업실 예제보기[/button]

 

앱캐시 사용시 도움이 되는 참고사항

  • 크롬에서 chrome://appcache-internals/ 이렇게 사용하면 application cache를 관리하고 어떤 데이터가 캐쉬되었는지 확인할 수 있습니다.
  • manifest 리스트에 지정되지 않은 파일들은 두번째부터 무조건 받아오지 못한다. (무조건 파일리스트를 담아야 한다)
  • 브라우저에 따라 Last Modified Date가 변화하더라도 캐시를 업데이트 해주지 않는 경우가 있어 반드시 manifest 파일의 내용을 한자라도 바꿔야 한다. (변경할 것이 없으면 주석이라도 변경해야 한다)
  • detail.php?id=1 과 같이 변수에 따라 동적으로 변경되는 페이지의 경우 각 변수값 만큼 넣어줘야 하는 불편함이 있다. 이런 경우 서버스크립트를 이용해 제작/관리하는 것이 용이하다.
  • Cache manifest의 mine-type은 text/cache-manifest 여야 합니다.
    • 아파치 conf 설정에 AddType text/cache-manifest .manifest 를 추가해주세요.
    • .htaccess에 추가해주셔도 됩니다.
    • php를 이용할 경우 header(“Content-type:text/cache-manifest”); 를 사용해 캐쉬 버전관리를 하면 됩니다.
  • 디버깅과 갱신을 도와주는 jQuery 헬퍼가 있어 소개합니다.

 

참고URL

 

Published by

안반장

Web과 App 개발을 하고 있으며 최근 워드프레스에 관심이 많아져 네이버 카페 워드프레스 홈페이지의 TF팀으로 활동 중 입니다.개인적으로는 안반장의 개발 노트라는 블로그를 운영하면서 개발의 즐거움과 고충들을 차곡차곡 담아가고 있습니다.