categorized under 웹이야기 & written by cryinglemon
|
개요 |
애플리케이션 구동에 필요한 자원(HTML, CSS, Javascript, 이미지...)을 클라이언트 측에 저장하여
오프라인 버전 wbe application을 로딩한다.
Application Cache은 세가지 장점을 가진다.
- Offline browsing - 오프라인중에도 application을 사용할수 있다.
- Speed - 캐시된 자원을 빠르게 로딩할수 있다.
- Reduced server load - 브라우저에서 바뀐 부분만 서버로 가져오기 때문에 서버의 부하가 감소된다.
| 캐시 지정하기 |
먼저 캐시를 지정하는데, 캐시를 지정하기 위해서는 캐시 매니페스트(cache manifest)라는 파일을 지정해주어야 한다.
캐시 매니페스트란?
브라우저에 캐시에 대한 정보를 알려주기 위한 설정 파일로
컨텐트타입1 'text/cache-manifest'로 지정되어야 하고 첫줄은 'CACHE MANIFEST'로 시작하는 형태의 파일을 말한다.
캐시 매니페스트는 세종류의 섹션으로 구분된다.
- CACHE 섹션 : 캐시할 리소스를 나열하는 영역
- NETWORK 섹션 : 캐시하면 안되는 리소스를 나열한 영역
- FALLBACK 섹션 : 오프라인 상태에서 필요한 자원이 캐시되지 않았을 경우 대체할 리소스를 지정하는 영역
캐시 매니페스트 지정하기
캐시 매니페스트를 사용하기 위해 먼저 cache.html, cahe.jpg, cache.js, cache.css 파일을 캐시하기 위한 파일을 작성한다.
파일 작성을 완료한후 <html> 태그에 manifest 속성을 사용한다.
<html lang="ko" manifest='cache.manifest">
HTML페이지를 파싱하면 <html>태그의 manifest속성이 지정한 파일을 캐시 매니페스트로 사용하기 위해
다운로드 하며 매니페스트에 기술된 파일을 모두 다운로드 한후 캐시하여 사용한다.
캐시 매니페스트 작성 규칙
- 첫줄은 CACHE MANIFEST로 시작하고 MIME타입은 text/cache-manifest 로 시작한다
- 문자 인코딩은 UTF-8 이다.
- 각항목은 줄바꿈으로 구분한다.
- 주석은 #으로 시작한다.
- 리소스 경로 지정시 캐시 매니페스트 파일로 경로를 기준으로 한다.
- 캐시할 리소스의 모든 URL은 캐시 매니페스트 파일과 같은 도메인이다.
캐시 매니페스트 파일 예
CACHE MANIFEST #CACHE섹션 - 캐시할 리소스 목록 CACHE: cache.html cache.jpg cache.css #NETWORK섹션 - 네트워크에 접속해 받아올 목록 NETWORK: http:⁄⁄www.aaaa.com⁄dog.jpg #FALLBACK 섹션 - 대체할 리소스 #필요한 리소스를 먼저 기술하고 공백이나 탭으로 구분한 후 리소스를 기술한다. FALLBACK: .⁄ ⁄cache_fail.html ⁄html⁄hom.html ⁄home_fail.html
| 캐시 업데이트하기 |
업데이트 순서
- 캐시 매니페스트에 기술된 캐시 다운로드
- 캐시된 페이지를 방문할때 마다 캐시 매니페스트 파일을 서버로 부터 다운 받음
- 서버로 부터 다운 받은 캐시 매니페스트 파일과 로컬에 저장된 캐시 매니페스트 파일을 비교하여 파일내용이 바뀌었는지 확인한다.
주의
- 캐시를 다운로드 받다가 하나라도 실패하면 다운로드 받은 캐시를 모두 무효화 하고 이전 캐시를 사용한다.
- 웹 브라우저는 캐시 매니페스트 파일의 변경 여부만 가지고 캐시 업데이트를 결정하기 때문에 캐시 매니페스트 파일로 같이 수정해 주어야 한다.
|
Application Cache status속성값 |
- 0 - CNCACHED : 현재 페이지는 캐시되지 않음
- 1 - IDLE : 최신 캐시 사용 중
- 2 - CHECKING : 캐시가 업데이트 되었는지 체크 중인 상태
- 3 - DOWNLOADING : 캐시 업데이트 다운로드 중인 상태
- 4 - UPDATEREADY : 새로운 캐시를 사용할 수 있는 준비가 된 상태
- 5 - OBSOLETE : 에러 발생으로 인해 무효화 된다
Application Cache 속성값은 window.applicationCache 로 접근하여 확인 할 수 있다.
if ( window.applicationCache.status == window.applicationCache.UPDATEREADY)
| Application Cache 이벤트 |
- checking : 캐시가 업데이트되었는지 체크 할 때 발생
- noupdate : 업데이트 내용이 없을시에 발생
- downloading : 업데이트된 캐시를 다운로드 시작할 때 발생
- progress : 업데이트된 캐시를 다운로드 도중 주기적으로 발생
- updateready : 새로운 캐시가 모두 다운로드 되었을때 발생
- cached : 캐시 완료
- error :에러가 발생하여 캐시가 무효화 된다.
EventListener 를 이용하여 각각의 이벤트가 발생되었을때의 상태값을 확인해 볼수 있다.
window.applicationCache.addEventListener("checking", function(){
log(window.applicationCache.status + ". checking");
});
window.applicationCache.addEventListener("noupdate", function(){
log(window.applicationCache.status + ". noupdate");
});
window.applicationCache.addEventListener("downloading", function(){
log(window.applicationCache.status + ". downloading");
});
window.applicationCache.addEventListener("progress", function(){
log(window.applicationCache.status + ". progress");
});
window.applicationCache.addEventListener("updateready", function(){
log(window.applicationCache.status + ". updateready");
});
window.applicationCache.addEventListener("cached", function(){
log(window.applicationCache.status + ". cached");
});
window.applicationCache.addEventListener("error", function(){
log(window.applicationCache.status + ". error");
});
| Application Cache 메소드 |
- window.applicationCache.swapCache() : 이전 캐시를 다운로드 받은 새로운 캐시로 대체
window.applicationCache.update() : 캐시 업데이트 작업 시작
- 웹서버와 웹브라우저가 통신할때 주고 받는 컨텐트 종류 [본문으로]
'웹이야기' 카테고리의 다른 글
| [매일 HTML5 공부 16] Web SQL Database (0) | 2013.05.28 |
|---|---|
| [매일 HTML5 공부 15] Web Storage (0) | 2013.05.24 |
| [매일 HTML5 공부 13] Canvas요소 (0) | 2013.05.21 |
| [매일 HTML5 공부 12] Audio와 Video 요소 (0) | 2013.05.17 |
| [매일 HTML5 공부 11] DOM (0) | 2013.05.14 |
