Monday, March 23, 2009

Cross-browser offlining

I just tried to find out what needs to be done to make a web application (let's take bespin as example) work offline. Unfortunately a google search for cross browser offlining did not point to any magic solution. So let's start with what I knew already about this:
  • offlining the static resources is the easy part and modern browsers and google gears provide all kind of support for that.
  • offlining the dynamic requests is extremely difficult. The server logic needs to be modeled on clientside and the risk of getting data inconsistencies is big. So let's leave that part for another day.
Unfortunately all the popular browsers (I tested with the newest betas) and google gears provide different ways of how to handle the offlining of static resources:

Firefox 3.1beta

Supports the HTML 5 offline API and has a menu option to simulate the offline mode. The static resources need to be listed in a manifest file:

CACHE MANIFEST

/index.html
/default.css
/images/logo.png

and that manifest file name becomes an attribute of the html tag of the app start page:
<html manifest="/tests/th/cache-manifest">
<head><title>test</title></head>
<body>test</body>
</html>

Safari 4beta

Also supports the HTML 5 offline API, therefore everything the same as with Firefox, except there is no easy way to simulate the offline mode. Just turning off the internet connection does not help if you use a server on localhost for development.

Google gears for all the other browsers

Now it's getting a bit more complicated. First you need to find out whether gears is installed, and if yes, load the cache manifest file, which unfortunately has a different format (JSON) than the HTML 5 version:
// cache-manifest.gears
{
  "betaManifestVersion": 1,
"version": "site_version_string",
"entries": [
    { "url": "/index.html" },
{ "url": "/default.css" },
{ "url": "/images/logo.png" }
  ]
}
And the loading of the manifest has to be done in Javascript:
if (google && google.gears) {
var localServer = google.gears.factory.create('beta.localserver');
var store = localServer.createManagedStore('test-dev');
store.manifestUrl = '/cache-manifest.gears';
store.checkForUpdate();
}
Because the HTML 5 / gears manifest files have a different format and easily grow beyond manually manageable size, a tool (or a custom build step) is necessary to create and update the cache manifest file for complex apps.
Posted by at
Labels: , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)