A Brief Introduction

The internet as we know it is becoming a vastly different place. With the new “app” craze, there’s rarely a visit to a static HTML page nowadays. Every “site” you visit is really a piece of software that you’re using over the world wide web. The lines between the desktop and the browser are becoming even more blurred as HTML5 rears it’s absolutely beautiful head. We can now give our apps a bit of offline capability, meaning our users can still use many, if not all, of our applications’ features even when not connected to the internet. Today, we’ll see a very simple example of how to implement offline capability in HTML5 to take your app offline.

The Cache Manifest

At the heart of an offline web application is the cache manifest. Really, all this is is a list of files that your application will need to use when in it’s offline state. An HTML5 capable web browser will read the cache manifest file, download the appropriate resources, store them locally, and update the locally stored files as they change. This means that the files will continue to be available to the users whether or not they are connected to the internet. The cache manifest would typically reside on your web server, however, in our case we’re running the files locally, so the file resides in the same folder as our HTML page. Have a look at the following cache manifest file, and I’ll explain each part in further detail:

Super simple. We simply list out the files that we’d like to be available to our application when it is offline. In our very simple application, we need to include the image of the ninjas, as well as the style sheet for our typography. The next step will be to have our HTML file reference the manifest cache. We need to add the reference to the HTML tag. Here’s how you do that:  

We’ve simply added a manifest attribute to our HTML tag and pointed the value to our cache.manifest file. 
Now, I’m using Visual Studio 2010′s built in development server to test the app, but you can use whatever sever you’d like. To test the application, start the server and view the page normally. Everything should be regular, of course, because we’re online. Now, in a real world situation, if you were to stop the server and refresh the page, the files would no longer be available for reference and you’d get a “page not found” error. However, because we’ve used the cache manifest, the files needed to run our application have been stored locally and we can still see our application. Stop the server and refresh the page to see this in action. Congrats, everything works!
One thing you may have noticed is that we didn’t add the actual HTML page into the cache manifest. This has a few caveats to it. One is that because the HTML page called the manifest.cache file, the browser assumes that the page is a part of the application. This also means that if your application spans more than one page, you’ll need to add the manifest attribute from above to every one of the pages. 

Providing a Fallback

It’s always good practice to have a fall back plan. Suppose a user tries to use your application while offline, and the browser can’t find one of the files listed in the cache manifest. Maybe the visitor never visited a particular part of the application while they were online, and now they’d like too. Well, they can’t because they were never able to download the file into the cache in the first place. In this situation, the browser would simply return a 404 page not found error, which would look pretty ugly. Instead, the cache manifest file allows for a fall back section so that you can specify what page to show should a user encounter 404 error. Let’s add a fall back before we finish up:

As you can see, we’ve now sectioned off our cache.manifest file into two parts. We’ve added the FALLBACK section first, and then added a CACHE section for the other files. Take a look at the fall back section. In our case, it is a single line. The first forward slash you see is actually used to match any URL on your site. So what it says in plain English is “no matter what page it may be, if you can’t find it in the app cache, display offline.html instead”. You can customize these fall backs to match specific URLs on your page, or universally as we have done here.

A Few Last Words

Taking your app offline is pretty easy, although it does take a pretty good understanding of the manifest cache and all of it’s capabilities. In part 2 of this series, we’ll tackle local storage and see some of the fancy SQL databases that are inside of most popular browsers today. See you then!

Download Source Files