아이폰 OS 2.1버전의 사파리 4.0이후 버전부터 사파리는 오프라인 어플리케이션 캐시(offline application cache)를 제공한다. 이 캐시는 사용자들의 컴퓨터나 웹이 가능한 디바이스가 인터넷에 접속할 수 없는 환경에 처해 있어도 동작될 수 있는 웹 기반의 어플리케이션을 만들게 해준다.
이 기술은 두 개의 파트로 구성된다: manifest file과 JavaScript 인터페이스.
manifest파일은 캐시가 되어질 리소스 자원들의 리스트를 포함하고 있는 텍스트 파일이다.
JavaScript 프로그래밍 인터페이스들은 캐시된 파일이 원하는 경우에 업데이트가 동작 되도록 한다.
Manifest File 생성하기
manifest 파일은 어플리케이션 캐시에 다운로드 되고 저장되어 질 HTML, JavaScript, CSS, 이미지 파일들과 같은 리소스들을 기술한다. 웹 페이지가 첫 번째로 로딩이 된 후 부터 , manifest 파일에 기술되어진 리소스 파일들은 웹 서버가 아닌 application cache에 의해 획득되어 진다.
manifest 파일은 다음과 같은 속성들을 가지고 있다:
- MIME-Type이 text/cache-manifest와 같이 제공되어야 한다.
- 첫 번째 줄에는 CACHE MANIFEST라는 텍스트를 포함하고 있어야 한다.
- 그 다음 줄들은 캐시할 각각의 리소스의 URL이나 주석을 포함하고 있다.
- 주석문들은 # 문자로 시작하고 한 줄로 와야한다.
- URL들은 로컬에 캐시로 다운로드를 원하는 리소스에 대한 파일 경로이다. 파일 경로는 manifest 파일에 대한 상대,절대경로로 표현되어야 한다 —CSS에서 사용되는 파일 경로와 유사
- manifest는 반드시 온라인일 시에 접근해야 하는 모든 외부 리소스들에 상응하는 접두어를 포함하고 있는 whitelist를 선언하야 한다. 이 whitelist는 그 자신이 한 줄을 구성하는 NETWORK:라는 식별자와 함께 시작한다.
또한 network 엔트리 뒤에 그 자신이 한 줄을 구성하는 CACHE:라는 식별자를 삽입함으로써 추가적인 cache 엔트리를 선언할 수 있다.manifest는 만약 원한다면 fallback 섹션들을 둘 수 있다. 이 섹션들은 FALLBACK: 이라는 식별자와 시작할 수 있고, 두 개의 URI들을 포함하고 있는 연속되는 타이들을 포함하고 있다. 두 번째 URI는 브라우져가 첫 번째 URI에 접근하지 못할 때 사용한다. URI들은 반드시 둘 다 manifest 그 자신과 같은 origin을 가지고 있어야 한다. 두 개의 URI 모두 부분적인 경로(partial URIs)만 포함한다.(prefixes);
예를 들어 아래 예제는 만약 /files/projects 가 찾아지지 않는다면, 클라이언트는 다시 /files/projects/를 /projects로 대체해서 찾는다
FALLBACK: /files/projects /projects |
- "Manifest 파일 선언하기"에 설명 되어진 대로, manifest파일을 선언한 HTML 파일은 자동적으로 application cache에 포함되게 된다. 당신은 그것을 manifest 파일에 추가할 필요가 없다.
예를 들어, "Creating the index.html file"은 몇몇 이미지 리소스에 대한 URL을 포함하고 있는 manifest 파일을 보여준다.
CACHE MANIFEST # This is a comment. # Cache manifest version 0.0.1 # If you change the version number in this comment, # the cache manifest is no longer byte-for-byte # identical.
demoimages/clownfish.jpg demoimages/clownfishsmall.jpg demoimages/flowingrock.jpg demoimages/flowingrocksmall.jpg demoimages/stones.jpg
NETWORK: # All URLs that start with the following lines # are whitelisted. http://example.com/examplepath/ http://www.example.org/otherexamplepath/
CACHE: # Additional items to cache. demoimages/stonessmall.jpg
FALLBACK: demoimages/ images/ |
Manifest 파일 선언하기
manifest 파일을 생성한 후, HTML 파일에 선언을 해 주어야 한다. 다음과 같이 <html>태그에 manifest 속성을 추가함으로써 할 수 있다.
<html manifest="demo.manifest"> |
manifest 속성의 인자 값은 manifest 파일의 상대경로 혹은 절대경로이다.
중요: 특정 브라우져들에서,HTML5 DOCTYPE 선언형식을 쓰지 않는 경우 application cache가 원활하게 작동되지 않을 수 있다. 이 경우, HTML5 DOCTYPE 선언을 사용하여라
|
대부분의 경우에, manifest 파일을 생성하는 것과 선언하는 것이 application cache를 생성하는데 필요한 전부이다. 이것을 한 후에, 리소스들은 자동적으로 웹 페이지가 처음 보여질 때에 캐시에 저장되고, 그 후에 다수의 브라우져 세션마다 캐쉬에서 로딩되어 진다. JavaScript로부터 캐시를 조종하고 싶다면 다음 섹션을 읽어 보아라.
Cache 업데이트하기
당신은 application cache가 자동적으로 업데이트되기를 기다리거나 혹은 수동적으로 JavaScript를 이용하여 업데이트를 유발시킬 수 있다. application cache는 manifest 파일이 변했을 경우만 자동적으로 업데이트 된다. manifest에 있는 열거 되어진 리소스 파일이 변경된 경우에는 자동적으로 업데이트가 일어나지 않는다.
manifest 파일은 byte-for-byte로 같다면 이전 버전에서 변하지 않은 것으로 간주된다; manifest 파일의 수정 날짜를 고치는 것은 update를 유발시키지 않는다. 반드시 manifest 파일의 콘텐츠를 바꾸어야 한다(주석문을 바꾸는 것도 충분하다).
에러가 application cache를 업데이트 할 때 발생할 수 있음에 주의 하여라. 만약에 manifest 파일을 다운로드 받거나 manifest 파일에 명시된 리소스들을 다운로드 받는데 실패하면, 전체적인 업데이트 프로세스는 실패로 돌아간다. 만약 업데이트 프로세스가 실패하면, 현재 application cache는 방해 받지 않는다 —브라우저가 계속해서 이전 버전의 application cache를 쓴다. 만약 업데이트가 성공적이면, 웹 페이지는 그 들이 다시 로딩될 시에 새로운 캐시를 이용한다.
아래 나오는 JavaScript 클래스를 이용하면 application cache의 업데이트를 유발시킬 수 있고, 그들의 상태를 확인할 수 있다. 페이지 별 DOMApplicationCache 클래스의 인스턴스로 표현되는 application cache가 있다. application cache는 DOMWindow 오브젝트의 프로퍼티이다.
예를 들어, 다음과 같이 DOMApplicationCache 오브젝트를 얻을 수 있다:
cache = window.applicationCache; |
application cache의 상태를 다음과 같이 확인할 수 있다:
If(window.applicationCache.status == window.applicationCache.UPDATEREADY)… |
만약 application cache가 UPDATEREADY 상태이면, 다음과 같이 update() 메시지를 보냄으로써 업데이트 할 수 있다:
Window.applicationCache.update(); |
만약 업데이트가 성공적이었다면, 다음과 같이 이전 캐시를 새로운 캐시로 대체한다:
Window.applicationCache.swapCache(); |
캐시는 UPDATEREADY 상태를 반환할 때 사용할 수 있다. 다른 상태 값을 보려면 DOMApplicationCache 문서를 보아라.
캐시 이벤트 다루기
JavaScript를 이용하여 application cache의 이벤트를 알 수 있다. 이벤트는 application cache의 상태가 바뀌거나, 업데이트 프로세스가 실패할 때 보내어 진다. 당신은 이벤트를 등록할 수 있고 적절한 행동을 취할 수 있다.
예를 들어, application cache가 업데이트 되어질 준비가 되어 졌는지 알기 위해 updateready 이벤트를 등록한다. 또한 error 이벤트를 등록하는 것은 업데이트 프로세스가 실패했을 경우 조치를 취할 수 있게 한다.—예를 들어, console을 이용하여 에러 메시지를 기록하는 것.
cache = window.applicationCache; cache.addEventListener('updateready', cacheUpdateReadyListener, false); cache.addEventListenser('error', cacheErrorListener, false); |
이벤트 타입들에 대한 모든 리스트를 보기 위해서는 DOMApplicationCache 문서를 보아라.
본 글은 아래 글을 번역해 놓은 것입니다 : http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html#//apple_ref/doc/uid/TP40007256-CH7-SW1
