hacks.mozilla.org

Since Firefox 3.0, it’s possible to make Web application working offline.

Web applications are intimately related to the network. The sources (Javascript, CSS and HTML) and the resources (images, videos, …) are downloaded through the network and webservices (XMLHttpRequest and <forms>) are reached via the network as well.

But it would make sense to make some Web application working without the network. We can imagine a webmail working offline, allowing the user writing emails and reading his favorite emails without the network.

Working offline it’s not the only useful feature of the offline mechanism. You can also store some data in the cache to speed up a web application or to make some data persistant (à la cookies) through the user session (or for an undetermined period – regardless the browser is closed or not) or between tabs.

One clarification: before using an offline web application, of course, you need first to connect to the web application – online!

Let’s see how to use these features.

Storage: Persistent data

Documentation on MDC.

You may want to store data through your browser sessions, or through tabs.
For this purpose, you can store your data as strings (JSONified Javascript objects for example) in a storage object which is persistent.
window.sessionStorage lives through tabs and is not destroyed if you close your tabs.
window.localStorage behaves the same way, but is not destroyed if you close your browser or switch off your computer.

Those storage properties are scoped to an HTML5 origin (scheme + hostname + non-standard port).
It means window.localStorage from http://foo.com is a different instance of window.localStorage from http://bar.com. For example, http://google.com can’t access the storage of http://yahoo.com.

A storage object is usable through this API:

window.localStorage and window.sessionStorage {
  long length; // Number of items stored
  string key(long index); // Name of the key at index
  string getItem(string key); // Get value of the key
  void setItem(string key, string data); // Add a new key with value data
  void removeItem(string key); // Remove the item key
  void clear(); // Clear the storage
};

Here is an example showing how to store and read a string:

// save the string
function saveThisTextPlease(msg) {
  window.localStorage.setItem("themessage", msg);
}
 
// read the string
function whatIsTheMessage() {
  if (window.localStorage.hasItem("themessage")) {
   return window.localStorage.getItem("themessage");
 } else {
   return null;
 }
}

Are we offline?

Documentation on MDC.

Before storing data, you may want to know if the user is online or not, for example, to know if you want to store the value locally (client side) or to send it to the server.
You can use the navigator.onLine property.
You can also be notified when the browser is being disconnected or connected by listening the online and offline events from the window element.

Here is a very simple javascript code which is supposed to send your status to a server (à la twitter).

If you set your status and you’re online, it sends the status.

If you set your status and you’re offline, it stores your status.

If you go online and have a stored status, it sends the stored status.

If you load the page and you’re online and have a stored status, it sends the stored status.

function whatIsYourCurrentStatus() {
  var status = window.prompt("What is your current status?");
  if (!status) return;
  if (navigator.onLine) {
    sendToServer(status);
  } else {
    saveThisTextPlease(status);
  }
}
 
function checkIfLocalStatus() {
  var status = whatIsTheMessage();
  if (status) {
    sendToServer(status);
    window.localStorage.removeItem("themessage");
  }
}
 
 
window.addEventListener("load", function() {
   if (navigator.onLine) {
     checkIfLocalStatus();
   }
}, true);
 
window.addEventListener("online", function() {
  checkIfLocalStatus();
}, true);
 
window.addEventListener("offline", function() {
  alert("You're now offline. If you update your status, it'll be sent once you go online");
}, true);

Offline resources

Documentation on MDC.

When you’re offline, your browser can’t reach your web application.
You need to define explicitly which files must be stored. Your HTML, CSS and Javascript files, and other resources (images for example).
So you need to provide a file, a manifest, with the list of files you want to put in the cache.

From MDC:

A cache manifest is a file that describes the resources that must be cached for offline use.
These caches are versioned; each time the site is visited while online, a new version of the application is synched into the application cache.

This manifest file is linked in you html file:

<html manifest="offline.manifest">

For example, offline.manifest:

CACHE MANIFEST
fonts/MarketingScript.ttf
css/main.css
css/fonts.css
img/face.gif
js/main.js
index.xhtml

Conclusion

To make your web application working offline, you need to consider 3 things:

• Store user inputs through localStorage: see documentation
• Define which files should be cached via a manifest file: see documentation
• Manage connection and deconnection through events: see documentation

To see this feature in action, see Vivien Nicolas’ demo, a todo list manager which works offline:

FIXME: link

FIXME: video