Offline Application API

Contact Us or call 1-877-932-8228
Offline Application API

Offline Application API

The HTML5 Specification includes an API for creating offline applications. The purpose is two-fold:

  1. Allow users to access your web application when they are offline.
  2. Make your web applications faster by taking advantage of local caching.

There are 3 steps involved in turning a regular HTML page into an offline application:

  1. Create a cache manifest file.
  2. Reference the cache manifest file in your HTML5 document.
  3. Write JavaScript to manage caching.

Cache Manifest File

The cache manifest file is a plain text file with a .manifest extension. It is structured as follows:

CACHE MANIFEST #Use pound signs for comments #Explicitly cached entries. CACHE: index.html style.css script.js image.png #Online-only Resources. NETWORK: login.php /online-only/ #Fallback files (use only when can't access online files) FALLBACK: online.js offline.js

Note that you must configure your web server to deliver .manifest files using the "text/cache-manifest" mime type.

In Apache, you can use AddType text/cache-manifest .manifest

In IIS, you can add Mime types through Computer Management.

The HTML File

Referencing the manifest file in your HTML document is easy:

<html manifest="example.manifest">

Managing Application Cache with JavaScript

You access the application cache through the window.applicationCache object. It includes a status property indicating the current state of the cache. As the status changes, the following events are fired:

  1. cached
  2. checking
  3. downloading
  4. error
  5. noupdate
  6. obsolete
  7. progress
  8. updateready

You can catch these events using event listeners: window.applicationCache.addEventListener("error", fnCall, false);.

A Sample Application

Before testing this, be sure to clear your browser's cache first, then take a look at our sample application files below:

Code Sample:

html5-apis/Demos/offline.html
<!DOCTYPE HTML>
<html manifest="example.manifest">
<head>
<meta charset="UTF-8">
<title>Offline Application API</title>
<script src="offline/script.js" type="text/javascript"></script>
<link href="offline/style.css" rel="stylesheet">
</head>
<body>
<h1>No Heading</h1>
<ol id="output"></ol>
<img src="Images/online.gif" alt="online/offline image">
</body>
</html>

Code Sample:

html5-apis/Demos/example.manifest
CACHE MANIFEST
#Version 1.2
offline.html
offline/script.js
offline/style.css

NETWORK:
*

FALLBACK:
Images/online.gif Images/offline.gif

#COMMENTS
##We could use the following fallback settings to use 
##a different stylesheet and script when offline
##style.css offline-style.css
##script.js offline-script.js

Code Sample:

html5-apis/Demos/offline/script.js
window.addEventListener("load",function() {
	document.getElementsByTagName("h1")[0].innerHTML="Hello World";
},false);

var appCache = window.applicationCache;

appCache.addEventListener("error", function() {
	alert("Cache failed to update");
	document.getElementById("output").innerHTML+="<li>a cache error has occurred</li>";
}, false);

appCache.addEventListener("updateready", function() {
	var refresh = confirm("An updated version is ready.  Press OK refresh your browser.");
	if (refresh) {
		location.reload();	
	}
	document.getElementById("output").innerHTML+="<li>cache ready to be updated</li>";
}, false);

appCache.addEventListener("cached", function() {
	document.getElementById("output").innerHTML+="<li>application cached</li>";
}, false);

appCache.addEventListener("checking", function() {
	document.getElementById("output").innerHTML+="<li>checking cache</li>";
}, false);

appCache.addEventListener("downloading", function() {
	document.getElementById("output").innerHTML+="<li>cache downloading</li>";
}, false);

appCache.addEventListener("noupdate", function() {
	document.getElementById("output").innerHTML+="<li>no cache update</li>";
}, false);

appCache.addEventListener("obsolete", function() {
	document.getElementById("output").innerHTML+="<li>manifest file returned a 404 or 410</li>";
}, false);

appCache.addEventListener("progress", function() {
	document.getElementById("output").innerHTML+="<li>Resource being fetched from cache</li>";
}, false);

Code Sample:

html5-apis/Demos/offline/style.css
body {
	background-color:#f00;
}

#output {
	background-color:white;	
	float:left;
	width:200px;
	margin-right:25px;
}

And here are the two images, the first of which is shown if the browser can connect to the site: Online Offline

To test this application, you must access it through a web server (e.g., localhost). Here's how it works:

  1. The first time you visit the page, all the files will download from the server and get cached: Downloaded Files Cached
  2. Refresh the browser: Refreshed Browser
  3. Modify the CSS document (e.g., change the background color) and refresh. Nothing changes. All the files were fed from cache.
  4. Modify the cache manifest file to force it to be redownloaded (e.g., change the version comment from version 1.0 to version 1.1. Refresh the browser: Updated Version Message Notice that the resources are being fetched again, but the page has not updated.
  5. If you press Cancel on the confirm dialog, the page will not update. Instead, press OK to get the page to update: Updated Page
  6. Our manifest file indicates that offline.gif should be displayed if the browser is offline. To see this, you need to go offline, which is hard to do when you're working locally. Note that, if you are able to view the page while offline, the "error" event listener (in script.js) will generate an alert popup, since the page won't be able to fetch the manifest.
Next