반응형

인터넷에 연결 되어 있지 않더라도 웹 어플리케이션을 실행 할 수 있도록

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);


반응형

+ Recent posts