* ApplicationCache란?
- ApplicationCache는 이미지나 HTML/CSS/JavaScript와 같은 리소스의 캐시를 로컬 환경에 마련하는 것으로, 오프라인 시에도 온라인 시와 똑같이 사이트나 웹 애플리케이션을 이용할 수 있도록 하는 장치임.
* manifest 파일을 사용하여 캐시 지정하기
- 캐시할 리소스는 manifest 파일에서 정의함.
- manifest 파일은 UTF-8 형식으로된 텍스트 파일로, html 태그의 manifest 속성을 사용하여 지정함.
- 웹 서버가 송신하는 MIME 타입의 설정은 text/cachemanifest로 해 둚.
|
1
2
3
4
5
6
7
8
9
10 |
<html manifest="sample.manifest">
<head>
<meta charset="utf-8">
<title>예제</title>
</head>
<body>
</body>
</html>
|
cs |
[manifest 파일의 서식]
- manifest 파일은 'CACHE MANIFEST'만 있는 행으로 시작할 필요가 있으며, 아래표와 같은 헤더 행에 의해 구분됨.
- 헤더 행이 존재하지 않는 경우는 'CACHE:' 헤더가 지정되어 있는 것으로 간주함.
- '#'로 시작한 행은 주석임.
|
섹션 헤더 |
내용 |
|
CACHE: |
이 행으로 시작하는 섹션은 로컬에 캐시할 리소스를 지정한 것이 됨. 이 섹션은 완전 일치로 지정할 필요가 있음. 상대 패스이든, 절대 패스이든 상관 없음. |
|
NETWORK: |
이 행으로 시작하는 섹션은 캐시하지 않고 매번 네트워크로부터 리소스를 받는 것으로 지정함. |
|
FALLBACK: |
이 행으로 시작하는 섹션은 네트워크로부터 얻지 못한 경우의 대체 리소스를 지정함. |
[manifest 파일의 예]
|
CACHE MANIFEST
# 여기는 주석행입니다. 또한 공백은 무시됩니다.
# 헤더 행이 없으면 'CACHE:' 섹션이 됩니다. images/penguin.jpg audio/dog.mp3
# 아래는 캐시하지 않고 네트워크로부터 얻을 리소스를 지정한 것입니다. NETWORK: dtnamic.cgi
# 아래는 명시적으로 'CACHE:' 섹션을 지정한 것입니다. CACHE: style/common.css
# 아래는 대체 리소스를 지정한 것입니다. # 이 경우는 네트워크에서 online.html을 받지 못했을 경우 # 대신 alternate.html을 이용하도록 지정하고 있습니다. FALLBACK: /online.html /alternate.html |
* JavaScript에서 캐시 조작하기
- JavaScript에서는 window/applicationCache 오브젝트를 통해 '현재의 캐시 상태 취득'과 '캐시 변경'을 명시적으로 조작할 수 있음.
- 아래는 'window.applicationCache.status'에 저장되는 현재의 캐시 상태임.
|
상태 |
값 |
내용 |
|
UNCACHED |
0 |
캐시를 수행하지 않음. |
|
IDLE |
1 |
캐시는 최신 상태가 되었음. |
|
CHECKING |
2 |
manifest 파일의 갱신을 체크 중임. |
|
DOWNLOADING |
3 |
캐시를 다운로드 중임. |
|
UPDATEREADY |
4 |
다운로드는 완료했지만, 캐시는 갱신되지 않음. |
|
OBSOLETE |
5 |
지정된 manifest 파일이 존재하지 않음. |
- window.applicationCache 오브젝트에는 다음 표와 같이 캐시 상태에 대응하는 이벤트와 처리 이벤트 핸들러가 마련되어 있음.
|
이벤트 |
내용 |
|
cached |
최신 파일로 캐시가 갱신되었음. |
|
checking |
manifest 파일의 갱신 체크를 시작했음. |
|
downloading |
다운로드를 시작함. |
|
error |
manifest 파일이 존재하지 않거나 액세스할 수 없음. |
|
noupdate |
manifest 파일의 갱신이 없었음. |
|
obsolete |
지정된 manifest 파일이 존재하지 않음. |
|
progress |
다운로드가 진행 중임. |
|
updateready |
다운로드가 완료되고 캐시를 갱신할 준비가 됨. |
[애플리케이션 캐시의 재취득과 갱신]
- 다음 순서로 명시적으로 '캐시 갱신'을 수행할 수 있음.
1. 재취득(다운로드)
- window.applicationCache 오브젝트의 update() 메서드를 호출
2. 캐시를 교환
- window.applicationCache 오브젝트의 swapCache() 메서드를 호출
[지원 상황]
|
|
IE |
Firefox |
Opera |
Safari |
Chrome |
|
ApplicationCache |
X |
O |
O |
O |
O |
내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)
'Programming > HTML5' 카테고리의 다른 글
| (X)HTML 요점 정리 (0) | 2017.05.20 |
|---|---|
| WebSocket (0) | 2017.05.19 |
| Server-Sent Events (0) | 2017.05.19 |
| Web Messaging (0) | 2017.05.19 |
| Web Workers (0) | 2017.05.19 |
| File API (0) | 2017.05.19 |
| Indexed Database API (0) | 2017.05.19 |
| Web Storage (0) | 2017.05.19 |
