html5demos/demos/offlineapp.html

40 lines
2.4 KiB
HTML

<meta name="viewport" content="width=620" />
<title>Offline Application: using manifest</title>
<script src="/js/h5utils-offline.js"></script>
<article>
<p>A good working example is to load this demo up, then disconnection your web connection - the page will still reload. In addition, try this on an iPhone, then set your iPhone to flight mode, and refresh: the page loads.</p>
<p>Status of cache: </p>
<p id="status">checking...</p>
<p><input type="button" id="update" value="Update cache status" /></p>
<p><input type="button" id="swap" value="Update cache to latest" /></p>
</article>
<script>
var cacheStates = ["UNCACHED (numeric value 0) -- The ApplicationCache object's cache host is not associated with an application cache at this time.",
"IDLE (numeric value 1) -- The ApplicationCache object's cache host is associated with an application cache whose application cache group's update status is idle, and that application cache is the newest cache in its application cache group, and the application cache group is not marked as obsolete.",
"CHECKING (numeric value 2) -- The ApplicationCache object's cache host is associated with an application cache whose application cache group's update status is checking.",
"DOWNLOADING (numeric value 3) -- The ApplicationCache object's cache host is associated with an application cache whose application cache group's update status is downloading.",
"UPDATEREADY (numeric value 4) -- The ApplicationCache object's cache host is associated with an application cache whose application cache group's update status is idle, and whose application cache group is not marked as obsolete, but that application cache is not the newest cache in its group.",
"OBSOLETE (numeric value 5) -- The ApplicationCache object's cache host is associated with an application cache whose application cache group is marked as obsolete."];
function updateCacheStatus() {
document.querySelector('#status').innerHTML = cacheStates[window.applicationCache.status];
}
addEvent(document.querySelector('#update'), 'click', function () {
window.applicationCache.update();
});
addEvent(document.querySelector('#swap'), 'click', function () {
window.applicationCache.swapCache();
});
var events = "checking,error,noupdate,downloading,progress,updateready,cached,obsolete".split(',');
var i = events.length;
while (i--) {
addEvent(window.applicationCache, events[i], updateCacheStatus);
}
</script>