Practical Guide to Take Your TODO List Offline

HTML5 Rocks

Introduction

There are two main components to Offline support in HTML.

This sample demonstrates how to take your applications offline using the Applications cache, by extending the Database functionality in the to-do list manager tutorial.

The TODO list manager already demonstrates the use of client-side databases, so combining this with the Application Cache and using all the same Javascript and HTML so it will give you a really clear indication of how simple it can be to take your applications offline.

What is the Application Cache?

The Application Cache (or AppCache for short) is designed to let you declaratively specify your web application's required resources in a manifest file. The resources listed in the manifest will be proactively downloaded and stored by the browser.

Step 1. Creating a basic manifest

Because we already have an application on the web, it is a simple process to add offline support. The first that we need to do is to create our manifest file.

CACHE MANIFEST
# Revision: 1
index.html
script.js
base.css

As you can see it is pretty simple. The manifest file contains a simple list of the three files that we will be using and a comment.

The browser will re-download all the files in the manifest if it detects a single change in the manifest file. Therefore, if you are deploying software and making changes, you can use this simple comment to ensure that all your users download the latest application.

Step 2. Attaching the manifest

For the browser to be able find the manifest file, we need to reference it from the root html element.

<html manifest="cache.manifest">

The presence of this attribute will invoke the browser to download the manifest file and start the process of acquiring the resources needed to ensure your application is available in offline mode.

index.html was listed in the manifest for completeness only, any page linking to a manifest as above will automatically be cached, and there's no way to override this.

Step 3. Pulling the plug (Testing)

If you have correctly listed all the application files, then your application will be available offline.

In fact, you don't need to go offline to test. AppCache automatically prevents cached pages using the network, even if the user is online. However, this behaviour usually gets in the way, breaking API calls and such. to disable it, add the following to the end of your manifest:

NETWORK:
*

You can also list specific URLs to whitelist, "*" simply means all URLs. Unfortunately this doesn't act like a wildcard, "/hello/*" does not match all URLs beginning "/hello/", it matches the exact URL "/hello/*".

For an example see our sample application: Offline To-do list. In this application, we are using all the same code as our previous To-do sample, but now it is available offline.

Taking it further

This is a pretty simple example, in reality applications are a little more in-depth. So now is a good time to cover some more features of the AppCache.

Mixing Offline and Online

Quite often you won't want to package all your files inside one offline manifest, for instance, you might have an online help system that your users will reference.

To ensure that your users don't get a network error when visiting your help pages offline, you can specify a "FALLBACK" page in your manifest. This page will be presented to your users in place of the browser error page if the help page fails to download.

Fallback pages are triggered on network errors, but also other errors such as 404, 500, or redirects to captive portal "Wifi login" pages.

CACHE MANIFEST
# A list of the files that are need for this application
# Rev 25
index.html  
script.js 
base.css

FALLBACK:
/ offline.html

To see this in action use our sample Offline To-do list application, disconnect from the Internet and click on Online help. HINT: You should see a Whoopsie page.

Detecting Updates

There is a very strong chance that you will need to update your application, be it bug fixes or great new functionality. Once an application is offline it remains so until a user clears their browse cache or you programatically update their version of the code.

The good thing is, the browser can handle all of this. Earlier we talked about the browser detecting updates to the manifest, when this occurs the browser will download all the latest resources and send an event to your JavaScript indicating that an update is available. You can present your users with a notification to inform them that they can update the application to a latest version.

// Called at the end of the body
var status = document.getElementById("status");
var updateButton = document.getElementById("update");

window.applicationCache.addEventListener('updateready', function() { 
  status.innerText = "There is an update ready - click to update";
});

updateButton.addEventListener("click", function(event) {
  // Reload the application
  window.location.reload();
  event.preventDefault();
});

Wrapping it up

We have seen that it is pretty simple to take your existing applications offline. At the simplest level it is just a process of defining a basic manifest file and attaching it to your root html element.

We have also seen the extra things that you can do to drastically improve the user experience of your applications with enhancements such as NETWORK whitelisting, FALLBACK support and capturing events.

But the best thing of all is, your application will still work online with browsers that don't support AppCache.

Comments

0