HTML5 API - APPCACHE
HTML5 2012. 5. 23. 12:24
HTML5 APPCACHE 방식의 최대 장점으로는 오프라인 작업 작업을 구현할 수 있다는 것입니다.
즉, 데스크탑 및 모바일 기기의 통신이 끊어진 경우에도 어플리케이션 작업이 가능하다는 말이며,
이를 통해 모바일과 같은 환경(네트웍 속도가 느린..)의 사용자는 불필요한 HTTP 요청(이미 캐쉬 되어 있으므로 304(조건부 재요청)를 일으키지 않는다.)에 대한 네트웍 비용을 줄임으로써 좀 더 빠른 응답을 받아볼 수 있을 것입니다.
더 자세한 설명은 API 작성 시 참조한 링크를 대신합니다.
1. APPCACHE API 코드:
-
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="m.aspx.cs" Inherits="FPSCamp.Potal.mobile.m" %>
-
<!DOCTYPE HTML>
-
<html manifest="cache.manifest">
-
<head>
-
<title>Manifest</title>
-
</head>
-
<body>
-
<script type="text/javascript">
-
//<![CDATA[
-
-
// onLine, offLine
-
var Connection = (function (win, doc) {
-
-
return new (function () {
-
-
function init() {
-
return this;
-
};
-
-
init.prototype = {
-
isOnline: function () {
-
return win.navigator.onLine;
-
}
-
};
-
-
return init;
-
} ());
-
-
})(window, document);
-
-
// appCache
-
var Cache = (function (win, doc) {
-
-
return function (opt) {
-
-
function init() {
-
-
Connection.isOnline() && win.applicationCache && (function () {
-
-
this.cache = win.applicationCache;
-
-
// events
-
this.onchecking = function () { ; };
-
this.onnoupdate = function () { ; };
-
this.onupdateready = function () { ; };
-
this.onobsolete = function () { ; };
-
this.ondownloading = function () { ; };
-
this.oncached = function () { ; };
-
this.onerror = function () { ; };
-
-
//add evnets
-
appendEvent.call(this);
-
-
extend.call(this, opt);
-
-
}).call(this);
-
-
return this;
-
};
-
-
init.prototype =
-
{
-
update: update,
-
getStatus: getStatus
-
};
-
-
return new init();
-
-
};
-
-
-
function appendEvent() {
-
-
var that = this;
-
-
bind(this.cache, 'checking', function (e) { that.onchecking.apply(that, [e]); });
-
bind(this.cache, 'noupdate', function (e) { that.onnoupdate.apply(that, [e]); });
-
bind(this.cache, 'updateready', function (e) { that.onupdateready.apply(that, [e]); });
-
bind(this.cache, 'obsolete', function (e) { that.onobsolete.apply(that, [e]); });
-
bind(this.cache, 'downloading', function (e) { that.ondownloading.apply(that, [e]); });
-
bind(this.cache, 'cached', function (e) { that.oncached.apply(that, [e]); });
-
-
// exception
-
bind(this.cache, 'error', function (e) { that.onerror.apply(that, [e]); });
-
};
-
-
function update() {
-
try {
-
Connection.isOnline() && this.cache.update();
-
}
-
catch (e) {
-
this.cache.onerror();
-
}
-
};
-
-
function getStatus() {
-
return getStatusText(this.cache.status);
-
};
-
-
function getStatusText(status) {
-
return ['uncached', 'idle', 'checking', 'downloading', 'updateready', 'obsolete'][status];
-
};
-
-
-
// 객체 상속 함수
-
function extend() {
-
-
var target = this
-
, opts = []
-
, src = null
-
, copy = null;
-
-
for (var i = 0, length = arguments.length; i < length; i++) {
-
-
opts = arguments[i];
-
-
for (var n in opts) {
-
n = n.toLowerCase();
-
src = target[n];
-
copy = opts[n];
-
-
if (src === copy) continue;
-
if (copy) target[n] = copy;
-
}
-
}
-
};
-
-
return init;
-
-
})(window, document);
-
-
var app = Cache({
-
onchecking: function () {
-
alert('checking');
-
},
-
onnoupdate: function () {
-
alert('noupdate');
-
},
-
onupdateready: function () {
-
alert('cheupdatereadycking');
-
},
-
onobsolete: function () {
-
alert('obsolete');
-
},
-
ondownloading: function () {
-
alert('downloading');
-
},
-
oncached: function () {
-
alert('cached');
-
}
-
});
-
-
// 이벤트 할당
-
function bind(elem, type, handler, capture) {
-
type = typeof type === 'string' && type || '';
-
handler = handler || function () { ; };
-
-
if (elem.addEventListener) {
-
elem.addEventListener(type, handler, capture);
-
}
-
else if (elem.attachEvent) {
-
elem.attachEvent('on' + type, handler);
-
}
-
-
return elem;
-
};
-
-
-
//]]>
-
</script>
-
<input type="button" value="appUpdate" onclick="app.update()" />
-
<img src="1.jpg" alt="1" title="1" />
-
</body>
-
</html>
2. manifest 파일을 위한 IIS Content-Type 등록:
위와 같이 해당 사이트의 등록정보를 수정합니다.
3. Cache 등록 화면:
위와 같이 해당 menifest 파일이 등록되었으며, 그에 따른 이벤트들이 각가 실행되고 있다.
결과:
브라우저 지원차이 등의 여러 가지 테스트를 대부분의 표준 브라우저에서 시도했지만, 각 브라우저에 대한 결과만 조금씩 달랐을 뿐, 네트웍이 분리된 상태의 작업(오프라인 작업)은 가능하지 않았습니다. 정확히 말해 manifest에 등록된 Offline 리소스들을 가져오지 못하는 문제였습니다.;;;
이 기능에 대한 테스트는 여기서 일단락 지을 것이며, 만약 정확한 테스트를 마치신 분이 계신다면, 댓글 남겨주시면 감사하겠습니다. 꾸벅~~ ^^;;
참고 사이트:
@clearboth:
http://html5.clearboth.org/offline.html
@박종명님:
