영삼넷IT 강국 = 김영삼 블로그에 오신걸 환영합니다.

HTML 5 를 이용한 웹 애플리케이션을 개발할때 실시간으로 표현시 느린 부분 이나 즉시 수행해야 할 부분을 미리 읽어 들이거나, 다음 접속때, 오프라인된 내용을 이용할때 미리 저장된 데이터를 사용할 수 있도록 하는 방법입니다. 예를 들어 특정 버튼 클릭시 음성 파일을 재생한다고 했을때 캐시 되지 않고 실시간으로 표현하기 위해서는 이벤트가 발생한 후 음성 파일을 다운로드 후 재생을 하게 됩니다. 이때 발생하는 문제점 중에 하나가 버튼을 클릭 한 후 바로 재생을 못하고 다른 동작이 일어 났을때 재생이 될 수 있다는 점이죠. 이런 것을 최소한 방지 하기 위해 미리 읽어 들일 파일을 브라우저에게 알려주는 것입니다.

W3C HTML Application Cache

<DOCTYPE html>

캐시 파일의 MIME 타입은 text/cache-manifest 입니다.

CACHE MANIFEST
#해당 캐시 파일에 대한 설명 , 버전, 갱신일 등.

# 해당 웹 페이지에서 캐시할 내용입니다.
CACHE:
#캐시할 파일 
./cache.jpg
http://example.com/cache.png

# 네트웍 장애(또는 비슷한 현상 : 연결실패등)시 사용할 내용입니다.
FALLBACK:
#대상 파일	#대체할 오프라인 파일
./cache.jpg ./cache_offline.jpg

# 오프라인시 사용 불가능 한 파일 입니다. (온라인에서만 접근 가능한 파일)
NETWORK:
./networkimg.jpg

위 처럼 사용합니다.
HTML 5 Application cache 는 이벤트를 발생시킵니다.

interface ApplicationCache {

	// 상수 : 업데이트 상태
	const unsigned short UNCACHED = 0;	// 캐시가 안되었음 (캐싱전)
	const unsigned short IDLE = 1;	// 유휴상태 
	const unsigned short CHECKING = 2;	// 캐시 채크중
	const unsigned short DOWNLOADING = 3;	// 다운로드중
	const unsigned short UPDATEREADY = 4;	// 업데이트 준비
	const unsigned short OBSOLETE = 5;	// 캐시 크룹이 사용할 수 없는 상태임
	
	// 상태 값
	readonly attribute unsigned short status;
	
	// 업데이트
	void update();	// 업데이트를 다운로드 하도록함
	void swapCache();	// 캐시된 내용 중 최근 변경된 값을 확인합니다. 
	
	// 이벤트 핸들러 
	attribute Function onchecking;	// 캐시를 체크하고 있음
	attribute Function onerror;	// 오류발생
	attribute Function onnoupdate;	// 업데이트가 안되었다. 
	attribute Function ondownloading;	// 다운로드 중
	attribute Function onprogress;	// 다운로드 비율
	attribute Function onupdateready;	// 업데이트 준비 됨
	attribute Function oncached;	// 캐시 완료
	attribute Function onobsolete;	// 캐시 사용 할 수 없음
};
ApplicationCache implements EventTarget;

// cache 객체 
var cache = window.ApplicationCache;	// window 에서 가져옴