Offline Web Application 이란 말그대로 Offline 상태에서도 동작하는 Application 입니다.
점점 사용이 늘어나는 스마트폰, 넷북 등 모바일 기기에서 아주 유용할 것입니다.
Network상태가 많이 좋지 않은 지하철(요즘은 그래도 좀 나아지긴 했지만요...) 이나 항공기 탑승중일때도 사용할 수 있을 것입니다.
그리고 client 에 Cache 된 Resource를 사용하기때문에 application 의 응답성이 좋아 Network 사용도 줄어들어 battery 관리에도 좋을 것입니다.
한가지 예로 Web 을 통해 메일을 작성하거나 블로그를 작성한다고 생각해 보십시요.
아주 긴 장문의 글을 적었는데
Send 또는 Save 버튼을 딱!!!
인터넷이 딱!!!
적은 글들이 딱!!!
모두 사라져 버린 경험... 여러분들 모두 경험하신 적이 있으실 것입니다.
Offline Web Application 기능을 사용한다면 이런 경우는 이제 다시? 일어나지 않을 것입니다. ^^
11-1. Manifest 작성
Offline Web Applicaiton 은 Offline 상태에서 Web Application 을 동작시키기 위해서 Cache 를 사용합니다.
생각해 보십시요.
갑자기 network 이 끊어졌습니다.
방금까지 보고 있던 페이지를 Refresh 를 누르면 희멀건 에러페이지를 보여줄 것입니다. 페이지에 연결할 수 없다는...
하지만 다시 보려고 한다면 무엇이 필요할까요?
먼저 페이지가 있어야 할 것입니다. 그 페이지에는 Style을 정의한 Style Sheet 파일들이 연결되어 있겠죠? 그리고 javascript 파일들도 연결되어 있을겁니다. iframe 이 포함되어 있다면 iframe 에 포함된 page 들도 있을 것이고요...
그리고 페이지 상에는 많은 이미지가 있을 것입니다. 그리고 다른 싸이트, 다른 페이지로 연결되어 있는 많은 링크가 존재할 것입니다.
그렇습니다. Offline 에서도 Web Application 이 동작을 하기 위해서는 현재 보고 있는 페이지 뿐만이 아니라 그 페이지와 연결된 많은 파일들이 필요하게 됩니다.
하지만 이 모든 것들을 Cache 에 저장하여 가지고 있다면... 그리고 그 cache 에 접근해서 페이지를 보여준다면?
ㅋㅋㅋ
갑자기 행복해 지지 않습니까? (구현할 일이 더 걱정된다고요? ㅋㅋㅋ)
그렇습니다. Offline Web Application 은 Cache 를 사용하도록 되어 있습니다.
그리고 cache 를 사용하기 위해서는 어떤 파일들을 Cache 해야하는지도 알려주어야 하는데요.
이때 사용하는 것이 manifest 파일입니다.
그럼 manifest 파일을 작성해 보도록 하겠습니다.
먼저 manifest 파일은 Browser 에 의해서 Download 되는 파일이므로 웹서버에 manifest 파일에 대해서 "text/cache-manifest" 라는 MIME Type 으로 등록해 주셔야 합니다.
html5news.html 파일을 작성했다고 생각해 보겠습니다. 이 페이지는 Offline 에도 작동하도록 하고 싶습니다.
그러기위해서는 먼저 html5news.manifest 를 작성해야 합니다.
크게 세부분으로 나위어져 있다는 것을 보실 수 있습니다.
CACHE MANIFEST 부분은 반듯이 맨 윗에 포함되어야하는 필수 사항입니다.
CACHE MANIFEST
#Cache Section
html5news.html
html5news.js
html5news.css
IMG_4687.jpg
#Network Section : 무조건 Network 상태에서만 사용할 수 있습니다. 아래 파일과 Directory 에 있는 파일들은 Offline 에서는 사용할 수 없습니다.
NETWORK:
search.aspx
/core/
#Fallback Section : html5news.html 파일을 찾을 수 없는 경우 notice.html 을 cache 하도록 합니다.
FALLBACK:
html5news.html notice.html
#Cache Section
html5news.html
html5news.js
html5news.css
IMG_4687.jpg
#Network Section : 무조건 Network 상태에서만 사용할 수 있습니다. 아래 파일과 Directory 에 있는 파일들은 Offline 에서는 사용할 수 없습니다.
NETWORK:
search.aspx
/core/
#Fallback Section : html5news.html 파일을 찾을 수 없는 경우 notice.html 을 cache 하도록 합니다.
FALLBACK:
html5news.html notice.html
그리고 이 Manifest 파일은 사이트에 접속을 하여 해당 페이지에 접근을 하게 되면 다운로드되도록 해야하는데 아래와 같은 코드를 그렇게 하기위해 <HTML> Tag 에 추가해 줍니다.
<!DOCTYPE html>
<html manifest="html5news.manifest">
.
.
.
</html>
<html manifest="html5news.manifest">
.
.
.
</html>
11-2. Offline Web Application API 사용
그럼 이제 Web Browser 단에서 Offline Web Application API 를 지원하는지 Check하고, online, offline 시 각각 어떻게 처리해야하는지를 정의해야 합니다.
아래와 같은 Code 를 사용하여 현재 Browser 가 Offline Web Application API 를 지원하는지 여부를 check 할 수 있습니다.
if(window.applicationCache) {
...
}
...
}
아래와 같은 Code 로 Network 이 Online 인지 Offline 인지를 Check 합니다.
function init() {
if (navigator.onLine) {
...
} else {
...
}
}
if (navigator.onLine) {
...
} else {
...
}
}
그리고 online , offline 으로 상태가 바뀔때 어떻게 처리할 지에 대한 event Handler 를 추가해 줍니다.
window.addEventListener("online", function(e) {
...
}, true);
window.addEventListener("offline", function(e) {
...
}, true);
...
}, true);
window.addEventListener("offline", function(e) {
...
}, true);
11-3. applicationCache 의 Status
applicationCache 는 다음과 같은 상태값을 갖습니다.
| 상태 | 정수값 | 설명 |
| UNCACHE | 0 | Cache하지 않음. |
| IDLE | 1 | 최신 Cache를 이용 중. |
| CHECKING | 2 | Update Check 중. |
| DOWNLOADING | 3 | Update Download 중. |
| UPDATEREADY | 4 | 최신 Cache를 이용할 수 있음. |
| OBSOLETE | 5 | Error에 의해 cache 무효화. |
11-4. applicationCache 의 event
applicationCache 로 부터 발생하는 Event 는 다음과 같습니다.
| 상수 | 설명 |
| checking | Update Check 중. |
| error | Update 가 Error 로 종료. |
| noupdate | Manifest 가 Update 되지 않음. |
| downloading | Update Download 중. |
| progress | Update Download 중. |
| updateready | 최신 cache 얻기 완료. swapCache() 함수를 호출할 수 있음. |
| cached | cache 완료. |
| obsolete | manifest 얻기에 실패하여 cache를 무효로 함. |
11-5. Sample
이제 간단한 예제를 작성해 보겠습니다.
html5news.manifest 파일의 내용입니다.
CACHE MANIFEST
# JavaScript
./html5newsOffline.js
./html5newsLog.js
# stylesheets
./html5news.css
# JavaScript
./html5newsOffline.js
./html5newsLog.js
# stylesheets
./html5news.css
html5news.html 파일의 내용입니다.
<!DOCTYPE html>
<html lang="en" manifest="html5news.manifest">
<head>
<title>HTML5 Offline Application</title>
<script src="html5newsLog.js"></script>
<script src="html5newsOffline.js"></script>
<script src="html5news.js"></script>
<link rel="stylesheet" href="html5news.css">
</head>
<script type="text/javascript">
</script>
<body onload="init();">
<header>
<h1>Web Offline Application 예제</h1>
</header>
<section>
<article>
<button id="btnCheckUpdate">업데이트 확인</button>
<h3>My Log</h3>
<div id="info">
</div>
</article>
</section>
</body>
</html>
<html lang="en" manifest="html5news.manifest">
<head>
<title>HTML5 Offline Application</title>
<script src="html5newsLog.js"></script>
<script src="html5newsOffline.js"></script>
<script src="html5news.js"></script>
<link rel="stylesheet" href="html5news.css">
</head>
<script type="text/javascript">
</script>
<body onload="init();">
<header>
<h1>Web Offline Application 예제</h1>
</header>
<section>
<article>
<button id="btnCheckUpdate">업데이트 확인</button>
<h3>My Log</h3>
<div id="info">
</div>
</article>
</section>
</body>
</html>
html5newsOffline.js 파일의 내용입니다.
window.applicationCache.onchecking = function(e) {
log("Application update 사항을 Check 하고 있습니다.");
}
window.applicationCache.onnoupdate = function(e) {
log("application update 할 사항이 없습니다.");
}
window.applicationCache.onupdateready = function(e) {
log("Application 을 update 할 준비가 되었습니다.");
}
window.applicationCache.onobsolete = function(e) {
log("Cache 를 삭제합니다.");
}
window.applicationCache.ondownloading = function(e) {
log("application update 사항을 Download 하고 있습니다.");
}
window.applicationCache.oncached = function(e) {
log("Application cached 되었습니다.");
}
window.applicationCache.onerror = function(e) {
log("Application cache error 입니다.");
}
window.addEventListener("online", function(e) {
log("Online 입니다.");
}, true);
window.addEventListener("offline", function(e) {
log("Offline 입니다.");
}, true);
showCacheStatus = function(n) {
statusMessages = ["캐시하지않음","최신 캐시이용중","최신 캐시 Check중","Download 중","최신 캐시 사용가능","캐시 무효화"];
return statusMessages[n];
}
install = function() {
log("최신 캐시 Check중");
try {
window.applicationCache.update();
} catch (e) {
applicationCache.onerror();
}
}
init = function(e) {
if (!window.applicationCache) {
log("이 브라우져는 HTML5 Web Offline Application API 를 지원하지 않습니다.");
return;
}
log("캐시 상태 초기화 : " + showCacheStatus(window.applicationCache.status));
document.getElementById("btnCheckUpdate").onclick = install;
}
log("Application update 사항을 Check 하고 있습니다.");
}
window.applicationCache.onnoupdate = function(e) {
log("application update 할 사항이 없습니다.");
}
window.applicationCache.onupdateready = function(e) {
log("Application 을 update 할 준비가 되었습니다.");
}
window.applicationCache.onobsolete = function(e) {
log("Cache 를 삭제합니다.");
}
window.applicationCache.ondownloading = function(e) {
log("application update 사항을 Download 하고 있습니다.");
}
window.applicationCache.oncached = function(e) {
log("Application cached 되었습니다.");
}
window.applicationCache.onerror = function(e) {
log("Application cache error 입니다.");
}
window.addEventListener("online", function(e) {
log("Online 입니다.");
}, true);
window.addEventListener("offline", function(e) {
log("Offline 입니다.");
}, true);
showCacheStatus = function(n) {
statusMessages = ["캐시하지않음","최신 캐시이용중","최신 캐시 Check중","Download 중","최신 캐시 사용가능","캐시 무효화"];
return statusMessages[n];
}
install = function() {
log("최신 캐시 Check중");
try {
window.applicationCache.update();
} catch (e) {
applicationCache.onerror();
}
}
init = function(e) {
if (!window.applicationCache) {
log("이 브라우져는 HTML5 Web Offline Application API 를 지원하지 않습니다.");
return;
}
log("캐시 상태 초기화 : " + showCacheStatus(window.applicationCache.status));
document.getElementById("btnCheckUpdate").onclick = install;
}
html5newsLog.js 파일의 내용입니다.
log = function() {
var p = document.createElement("p");
var message = Array.prototype.join.call(arguments, " ");
p.innerHTML = message;
document.getElementById("info").appendChild(p);
}
var p = document.createElement("p");
var message = Array.prototype.join.call(arguments, " ");
p.innerHTML = message;
document.getElementById("info").appendChild(p);
}
(Pro HTML5 Programming 참고)
흠... 이번엔 Web Offline Application API 에 대해서 살펴보았습니다.
예제를 보시면 알겠지만 Web Server 에서 동작 시킨 것이 아니라서...
Web Server 동작시킨 화면은 다시 올려드리도록 하겠습니다. (죄송해요...)
그럼...
행복한 고수되셔요...
woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
반응형
'Web > HTML 5' 카테고리의 다른 글
| [HTML 5] 14. Web Storage (0) | 2011.06.21 |
|---|---|
| [HTML 5] 13. Communication API (0) | 2011.06.19 |
| [HTML 5] 11. Drag & Drop API (0) | 2011.06.18 |
| [HTML 5] 10. Canvas Element (2) | 2011.06.18 |
| [HTML 5] 9. Audio Element (0) | 2011.06.14 |
