Offline-Capable Applications

Mobile Application Design and Development [./]
Spring 2010 — INFO 152 (CCN 42504)

Erik Wilde, UC Berkeley School of Information
2010-03-15

Creative Commons License [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/]

Contents Erik Wilde: Offline-Capable Applications

Contents

Erik Wilde: Offline-Capable Applications

(2) Abstract

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.



Webless Web-Based Applications

Outline (Webless Web-Based Applications)

  1. Webless Web-Based Applications [2]
  2. Caching Application Code [4]
  3. Detecting State Changes [2]
  4. Caching Application Data [5]
Webless Web-Based Applications Erik Wilde: Offline-Capable Applications

(4) Limitations of Web-based Applications



Webless Web-Based Applications Erik Wilde: Offline-Capable Applications

(5) iPhone Apps



Caching Application Code

Outline (Caching Application Code)

  1. Webless Web-Based Applications [2]
  2. Caching Application Code [4]
  3. Detecting State Changes [2]
  4. Caching Application Data [5]
Caching Application Code Erik Wilde: Offline-Capable Applications

(7) Going Offline/Online



Caching Application Code Erik Wilde: Offline-Capable Applications

(8) HTTP Cache vs. AppCache



Caching Application Code Erik Wilde: Offline-Capable Applications

(9) What Applications Need



Caching Application Code Erik Wilde: Offline-Capable Applications

(10) Media Resources

resources-media.png

Detecting State Changes

Outline (Detecting State Changes)

  1. Webless Web-Based Applications [2]
  2. Caching Application Code [4]
  3. Detecting State Changes [2]
  4. Caching Application Data [5]
Detecting State Changes Erik Wilde: Offline-Capable Applications

(12) Going Offline/Online

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]

Detecting State Changes Erik Wilde: Offline-Capable Applications

(13) Minimal Online/Offline Demo

<!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>


Caching Application Data

Outline (Caching Application Data)

  1. Webless Web-Based Applications [2]
  2. Caching Application Code [4]
  3. Detecting State Changes [2]
  4. Caching Application Data [5]
Caching Application Data Erik Wilde: Offline-Capable Applications

(15) Going Offline/Online



Caching Application Data Erik Wilde: Offline-Capable Applications

(16) Media Resources

resources-ajax.png

Caching Application Data Erik Wilde: Offline-Capable Applications

(17) Minimal Online/Offline Demo

<!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


Caching Application Data Erik Wilde: Offline-Capable Applications

(18) Manifest Sections

CACHE 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]

Caching Application Data Erik Wilde: Offline-Capable Applications

(19) Updating Cached Applications

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]

2010-03-15 Mobile Application Design and Development [./]
Spring 2010 — INFO 152 (CCN 42504)