[http://creativecommons.org/licenses/by/3.0/]
This work is licensed under a CC
Attribution 3.0 Unported License [http://creativecommons.org/licenses/by/3.0/]
Mobile settings should not rely on the client being online all the time. For Web-based applications, however, this is a challenge, because the traditional model of Web-based applications has no notion of offline mode
. HTML5, however, introduces the ability to design and build offline-capable applications. One important part of that is local storage, the ability to persistently store data on the client. The other important part is the application cache, the ability of a Web-based application to list all the resources that are necessary for offline mode. Clients can then reliably store all these files locally for offline capabilities.
windowing metaphor)
windowing metaphor)
chrome[http://en.wikipedia.org/wiki/User_interface_chrome])
Aural CSS[http://www.w3.org/TR/CSS21/aural.html#aural-media-group] might still happen)
work offlinecommand)
online/offline
just optimization
hints
updatingthe cached application is only possible in online mode
aggressive
interface Window {
// the user agent
readonly attribute Navigator navigator;
readonly attribute ApplicationCache applicationCache;
// ....
attribute Function onoffline;
attribute Function ononline;
// .... }; [http://www.w3.org/TR/html5/browsers.html#window]interface Navigator {
// objects implementing this interface also implement the interfaces given below };
Navigator implements NavigatorID;
Navigator implements NavigatorOnLine;
Navigator implements NavigatorAbilities;
[Supplemental, NoInterfaceObject]
interface NavigatorOnLine {
readonly attribute boolean onLine; }; [http://www.w3.org/TR/html5/webappapis.html#navigator]<!DOCTYPE html>
<html manifest="manifest.appcache">
<head>
<title>Minimal Online/Offline Demo</title>
<link rel="stylesheet" type="text/css" href="minimal.css"/>
<script>
function updateOnlineStatus(msg) {
var condition = navigator.onLine ? "online" : "offline";
document.getElementById("state").innerHTML = condition;
var attempt = navigator.onLine ? "can" : "cannot";
document.getElementById("attempt").innerHTML = attempt;
var submit = document.getElementById("submit");
if ( navigator.onLine ) { submit.removeAttribute("disabled");
} else { submit.setAttribute("disabled", "disabled"); };
var button = navigator.onLine ? "enabled" : "disabled";
document.getElementById("log").appendChild(document.createTextNode(msg + ":" + condition + "; "));};
function loaded() {
updateOnlineStatus("load");
window.addEventListener("offline", function() {
updateOnlineStatus("offline")
}, false);
window.addEventListener("online", function() {
updateOnlineStatus("online")
}, false);};
</script>
</head>
<body onload="loaded()">
<h1>Minimal <a href="http://www.w3.org/TR/offline-webapps/">Online/Offline</a> Demo</h1>
<p>You are currently <b id="state">in limbo</b>.</p>
<p>You <span id="attempt">can try to</span> <input id="submit" type="submit" value="submit your request"/>.</p>
<div id="log"></div>
</body>
</html>go offline/online
old data)
<!DOCTYPE html> <html manifest="manifest.appcache"> <head> <title>Minimal Online/Offline Demo</title> <link rel="stylesheet" type="text/css" href="minimal.css"/>
CACHE MANIFEST appcache-demo.html minimal.css
AddType text/cache-manifest .appcache
CACHE: can and should be cached by the browserNETWORK: requires a live connectionFALLBACK: pair-wise lists of fallback alternativesCACHE MANIFEST CACHE: style/default.css images/sound-icon.png images/background.png NETWORK: comm.cgi FALLBACK: / /offline.html[http://www.w3.org/TR/html5/offline.html#manifests]
interface ApplicationCache {
// update status
const unsigned short UNCACHED = 0;
const unsigned short IDLE = 1;
const unsigned short CHECKING = 2;
const unsigned short DOWNLOADING = 3;
const unsigned short UPDATEREADY = 4;
const unsigned short OBSOLETE = 5;
readonly attribute unsigned short status;
// updates
void update();
void swapCache();
// events
attribute Function onchecking;
attribute Function onerror;
attribute Function onnoupdate;
attribute Function ondownloading;
attribute Function onprogress;
attribute Function onupdateready;
attribute Function oncached;
attribute Function onobsolete;
};
[http://www.w3.org/TR/html5/offline.html#application-cache-api]