인터넷에 연결 되어 있지 않더라도 웹 어플리케이션을 실행 할 수 있도록
HTML5 에서는 어플리케이션 캐시를 지원한다.
두 부분으로 나누어 생각 해 볼 수 있다.
1. manifest file
2. JavaScript
매니페스트 파일은 캐시될 자원들, 즉 HTML, JavaScript, CSS, Image 등을 기술하는 파일이고
자바스크립트는 캐시된 파일을 업데이트하기 위해 사용한다.
* Application Cache 지원여부 확인
if (window.applicationCache) {
console.log("지원함");
} else {
console.log("지원안함");
}
Application Cache 상태
Window.applicationCache.status 를 확인하면 현재 캐쉬의 상태를 알 수 있다. 다음과 같이 6개의 상태값을 가질 수 있다. 각 상태값은 applicationCache 에 대문자로 된 상수로 선언되어 있다.
if ( window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// 작업진행
}
- 0 – UNCACHED
페이지가 캐쉬를 사용하지 않거나, 맨 처음 접속시에 캐쉬가 다운로드 되기 전까지는 UNCACHED 상태이다.
- 1 – IDLE
브라우저가 최신버전의 Application Cache 로 업데이트되었고, 더 이상 다운로드 할 업데이트 버전이 없는 상태
- 2 – CHECKING
Manifest 파일이 업데이트 되었는지를 체크하는 상태 ( 현재 캐쉬된 Manifest 파일과 서버의 Manifest 파일을 바이트단위로 비교한다 )
- 3 – DOWNLOADING
캐쉬할 파일들을 다운로드 하는 상태 ( 2번 단계에서 Manifest 파일이 업데이트되었다고 알게 되었을 때 )
- 4 – UPDATEREADY
새로운 캐쉬의 다운로드가 끝나고 사용할 준비가 되었을 때 ( 아직 이 캐쉬가 사용된건 아님 )
- 5 – OBSOLETE
Manifest 파일 자체를 찾을 수 없을 때, 상태는 OBSOLETE로 지정되며 캐쉬는 삭제된다.
처음으로 웹 페이지가 로드 된 후에는 매니페스트 파일에 지정된 자원들은
웹 서버에서 가져오는 것이 아니라 어플리케이션 캐시에서 가져온다.
1. 매니페스트 파일
1.1. CACHE MANIFEST 로 시작한다.
1.2. 캐시 할 URL 들
1.3. 주석은 # 로 시작하고 한 줄만 허용한다.
1.4. 온라인 될 때 접근 해야 할 웹주소는 NETWORK: 으로 표시한다.
1.5. NETWORK: 줄 다음에 부가적으로 캐시 할 파일은 CACHE: 로 지정한다.
1.6. 선택사항으로 FALLBACK: 을 지원하는데 첫번째 항목에서 자원을 찾지 못하는 경우
두 번쨰 항목을 지정할 수 있다.
매니페스트 파일을 선언하는 HTML 파일은 자동적으로 어플리케이션 캐시에 저장된다.
따라서 그 파일을 매니페스트 파일에 넣을 필요가 없다.
HTML 파일에 매니페스트 파일을 선언하기 위해서는 다음과 같이 한다.
<html manifest="myapp.manifest">
만일 매니페스트 파일이 변경되면 자동적으로 어플리케이션 캐시가 업데이트 된다.
웹 서버에 있는 자원이 변경되거나 매니페스트 파일의 날짜가 바뀐다고 해도 자동적으로
업데이트 되지 않는다. 반드시 매니페스트 파일의 내용이 바뀌어야 한다.
주석만 바뀌어도 된다.
어플리케이션 캐시는 DOMWindow 의 속성으로 다음과 같이 얻어 낼수 있다.
cache = window.applicationCache;
수동적으로 업데이트 할려면 다음과 같이 하면 된다.
if(window.applicationCache.status = window.applicationCache.UPDATEREADY)
{
window.applicationCache.update();
window.applicationCache.swapCache();
}
아직 자바스트립트를 사용하여 어플리케이션 캐시에 자원을 더하거나 뺄 수는 없다.
어플리케이션 캐시 이벤트를 처리하기 위해서는 다음과 같이 한다.
cache = window.applicationCache;
cache.addEventListener('updateready', cacheUpdatereadyListener, false);
cache.addEventListener('error', cacheErrorListener, false);
