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.
Firefox trunk build and webkit nightly builds both support WebGL, the upcoming Standard for hardware accelerated web browser 3D graphics. So I wanted to get my feet wet with this new technology and after short analysis, I did the following steps as possibly fastest solution to get a working demo (in my case on a mac):
