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.
First, let’s talk about our options to see whether a user is online or not. There are the
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:
<!DOCTYPE html> <html manifest="offline.manifest"> <head> ...
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.
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.