Using Offline Web Applications to offer offline capabilities – sister specification to HTML5

In a world where we carry our computers/Internet-connected devices with us all around, we’re bound to lose connection now and then but still want to be able to continue our work. That is where Offline Web Applications steps in.

Checking connectivity

First, let’s talk about our options to see whether a user is online or not. There are the ononline and onoffline events, that are supported by Firefox, Internet Explorer 8+ and Opera. You can check this in my Online/Offline events test page. The way to trigger the event is choosing the Work Offline mode in your web browser.

Interestingly enough, when you actually just pull out your Ethernet cable instead, IE is the only one to trigger the event then as well.

Offline Web Applications

The gist of Offline Web Applications is to provide a manifest file that states which files should be downloaded for offline usage, which fallback certain files should have and other options. It is currently supported by Firefox 3.5+, Google Chrome and Safari. Let’s look at some example code:

HTML

<!DOCTYPE html>
<html manifest="offline.manifest">
<head>
...

Manifest file

CACHE MANIFEST

# VERSION 10

CACHE:
offline.html
base.css

FALLBACK:
online.css offline.css

Basically, the first line declares that it is a cache manifest. Then, under CACHE, you list all the fils you want to be downloaded for offline usage (containing page with <html manifest="offline.manifest"> is automatically downloaded, but included here for clarity).

The we have the FALLBACK part where the web browser tries to access the online.css file. If it fails, it will resort to offline.css (which is also download by default since it is declared as a fallback file).

You can see this example in action in the Offline Web Applications test page, which is part of my HTML5 – Information and samples for HTML5 and related APIs test ground.

Things to think about

It is vital to know that the manifest file has to served with the text/cache-manifest content-type. Also, to take care of business for Firefox, set ExpiresByType accordingly.

Scratching the surface

This is just a mere introduction/teaser to Offline Web Applications, where you also have NETWORK options for the manifest file, and scripting possibilities through the applicationCache to update the cached files.

Gratitude

Having seen Remy Sharp (@rem) do a number of presentations on this at conferences, and having had a number of discussions and pointers with him, I really want to say thanks for the help with Offline Web Applications.

Post to Twitter Tweet a comment

35 Comments

Write a comment

Share your thoughts:

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . If you want to display code examples, please remember to write &lt; for < and &gt; for >.

Comment preview