HTML5 Offline Applications

The Need For Offline Mode

Offline Web Applications

<!doctype HTML>
<html manifest="cache.manifest">
<meta charset="utf-8"/>
<title>...
CACHE MANIFEST
#version01

#files that explicitly cached
CACHE:
index.html
css/styles.css
scripts/application.js

#Resources requiring connectivity
NETWORK:
signin.php
dosomething.cgi
  • Chrome 8
  • Safari 5.1
  • Firefox 4
  • Opera 12?
  • IE 10
  • Require hardware

ApplicationCache

Add to .htaccess file

AddType text/cache-manifest manifest
if(window.applicationCache){
 var appCache = window.applicationCache; 
 appCache.update();
 if (appCache.status == appCache.UPDATEREADY ){ 
      appCache.swapCache();
 }
}

Code Lab


In this lab, we are going to build a manifest file for our web application and we are going to see a live example of offline caching For the purpose of this lab, we are going to use the python module SimpleHTTPServer as a web server but first, we will need to define the MIME type for the manifest file. Edit mimetypes.py and look for the section defining MIME types. Add the MIME type for .manifest files after '.man' : 'application/x-troff-man', like this:

types_map = {

# Mimetypes
'.man' : 'application/x-troff-man',

# MIME TYPE ADDED FOR MANIFEST FILES
'.manifest' : 'text/cache-manifest',

# Continues...
}

We are also going to use firefox for this lab since it provides the useful functionality to go work offline

1. The application in your labs folder (in offline_application) is composed by the following assets:

  • An index page: index.html
  • A stylesheet: style.css
  • A page that we want to cache automatically: cached.html
  • A page that requires to be online: network.html
  • A fallback page in case we cannot access a certain page while offline: fallback.html
  • Two images: One that is going to be cached light_bulb_off.jpg (displayed in fallback.html) and another one that is going to be accessible only from the network light_bulb_on.jpg (displayed in network.html).

2. We now want to create a manifest file specifying which resources need to be cached and what is the fallback page in case users try to access a resources which is not cached. In the same folder of the application, create offline.manifest:

CACHE MANIFEST
# Version 1.0.0 

CACHE: 
index.html
cached.html
style.css
light_bulb_off.jpg

NETWORK: 
*

FALLBACK:
/ fallback.html

3. We then need to link this manifest file to the index.html page:

<!DOCTYPE html>
<html lang="en" manifest="offline.manifest"> 
<!-- Rest of the file not showed here -->

4. So far we could use our application as it is but before we would like to have details on which events have been fired so we exactly know what is going on. In index.html, add the following between the <script> tag:

function networkStatus() {
    if (navigator.onLine) {
    	document.getElementById("status").innerHTML="ONLINE";
    } else {
    	document.getElementById("status").innerHTML="OFFLINE";
    }
}
function printMessage(message) {
    var p = document.createElement("p");
    p.innerHTML = message;
    document.getElementById("cachelog").appendChild(p);
}
//Here we add event listener for the applicationCache so we exactly know what is the flow of event
//For each fired event, this will be displayed in the page
window.applicationCache.onchecking = function(e) {
	printMessage("checking event: Checking is always the first event to be fired");
}
window.applicationCache.onnoupdate = function(e) {
	printMessage("noupdate event: The manifest file has not changed. There is no update");
}
window.applicationCache.onupdateready = function(e) {
	printMessage("updateready event: Application update ready");
}
window.applicationCache.onobsolete = function(e) {
	printMessage("obsolete event: The manifest file does not exist");
}
window.applicationCache.ondownloading = function(e) {
	printMessage("downloading event: Update found. Downloading has started");
}
window.applicationCache.oncached = function(e) {
	printMessage("cached event: Application cached");
}
window.applicationCache.onerror = function(e) {
	printMessage("error event: Application cache error");
}
window.applicationCache.onprogress = function(e) {
	printMessage("progress event: Downloading resources...");
}
window.addEventListener("online", function(e) {
	document.getElementById("status").innerHTML="ONLINE";
}, true);
window.addEventListener("offline", function(e) {
	document.getElementById("status").innerHTML="OFFLINE";
}, true);
window.addEventListener("load", networkStatus, true);

5. Time to see your application working. In a terminal or command prompt, browse to your labs folder in the offline_application and run the following command:

python -m SimpleHTTPServer

6. Then open firefox and browse to: http://localhost:8000 (or any other port where the web server is listening on). So far, if it worked well, firefox should ask you to store data on your computer for offline use:

7. Click on "Allow" and then you should see the following being displayed:

ONLINE
checking event: Checking is always the first event to be fired
downloading event: Update found. Downloading has started
progress event: Downloading resources...
progress event: Downloading resources...
progress event: Downloading resources...
progress event: Downloading resources...
progress event: Downloading resources...
cached event: Application cached

8. Do not browse any other page and directly switch to offline mode. In firefox, click on File!Work Offline

9. Now that you are offline, click on the "Network Page" link. Since it is not cached, the fallback page should be displayed.

10. Click on the "Cached Page" link and you should be able to see the page since it was in the CACHE section of themanifest file

11. Switch back to online mode. In firefox, click on File!Work Offline (if this one is checked)

12. Now visit the "Network Page" again. You should be able to see it since you are online

13. Switch to offline mode again. In firefox, click on File!Work Offline

14. Visit the "Network Page" again and now instead of getting the fallback page, you get the browser cache (do not confuse this with the application cache) since you already visited the page while online.

15. Let us change the header of our web application to something a little bit fancier. Change:

<header>
<hgroup>
<h1>The HTML5 Blog</h1>
<h2>All HTML5 News :)</h2>
</hgroup>
</header>

By the following:

<header>
<hgroup>
<h1>The kick-ass HTML5 Blog</h1>
<h2>kick-ass since it is now an offline blog as well :)</h2>
</hgroup>
</header>

16. Switch to online mode. In firefox, click on File!Work Offline (if this one is checked)

17. Click on the "Home" link and checked that the title has changed

18. The modification we have just made did not take place since we did not modify the manifest as well. Update the

manifest with a simple comment (like modifying the version number for instance), save it and click again on the

"Home" link

19. The information displayed in the index.html page are the following:

ONLINE
checking event: Checking is always the first event to be fired
downloading event: Update found. Downloading has started 
progress event: Downloading resources...
progress event: Downloading resources...
progress event: Downloading resources...
progress event: Downloading resources...
progress event: Downloading resources...
updateready event: Application update ready

Since the manifest file has been updated, the application detect that there is an update at "downloading event: Update found. Downloading has started". "Application update ready" mean that the application has downloaded the new cache and the new cached resources but it is not using it yet

20. Reload the page again and now you can see the change

Files

Geolocation

Next ➹