125 lines
3.9 KiB
HTML
125 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" manifest="html5demo.manifest">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
<meta name="viewport" content="width=620" />
|
|
<title>HTML5 Demo: offline app (v15)</title>
|
|
<style>
|
|
body {
|
|
font: normal 16px/20px Helvetica, sans-serif;
|
|
background: rgb(237, 237, 236);
|
|
margin: 0;
|
|
margin-top: 40px;
|
|
padding: 0;
|
|
}
|
|
|
|
section, header, footer {
|
|
display: block;
|
|
}
|
|
|
|
#wrapper {
|
|
width: 600px;
|
|
margin: 0 auto;
|
|
background: #fff url(images/shade.jpg) repeat-x center bottom;
|
|
-moz-border-radius: 10px;
|
|
-webkit-border-radius: 10px;
|
|
border-top: 1px solid #fff;
|
|
padding-bottom: 76px;
|
|
}
|
|
|
|
h1 {
|
|
padding-top: 10px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 100%;
|
|
font-style: italic;
|
|
}
|
|
|
|
header,
|
|
article > p,
|
|
article > h3,
|
|
article > code,
|
|
footer a,
|
|
footer p {
|
|
margin: 20px;
|
|
}
|
|
|
|
footer > * {
|
|
margin: 20px;
|
|
color: #999;
|
|
}
|
|
|
|
#status {
|
|
padding: 5px;
|
|
color: #fff;
|
|
background: #ccc;
|
|
}
|
|
|
|
#status.fail {
|
|
background: #c00;
|
|
}
|
|
|
|
#status.success {
|
|
background: #0c0;
|
|
}
|
|
|
|
|
|
</style>
|
|
<script src="h5utils-offline.js"></script>
|
|
</head>
|
|
<body>
|
|
<section id="wrapper">
|
|
<header>
|
|
<h1>Offline Application: using manifest</h1>
|
|
</header>
|
|
<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>
|
|
<footer><a href="/">HTML5 demo</a></footer>
|
|
</section>
|
|
<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>
|
|
<script>
|
|
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
|
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
|
</script>
|
|
<script>
|
|
try {
|
|
var pageTracker = _gat._getTracker("UA-1656750-18");
|
|
pageTracker._trackPageview();
|
|
} catch(err) {}</script>
|
|
</body>
|
|
</html>
|