It is pretty easy to tell the browser that your web app is offline capable, just add a manifest attribute to the <html> tag:
<html manifest="cache.manifest">
In this cache.manifest file you specify which files shall be stored by the browser for offline usage. The manifest file is a plain text file which lists all resources, the paths are relative to the location of the manifest file. The detailed syntax of this manifest file is specified right here. A very simple cache.manifest file looks like this:
CACHE MANIFEST
CACHE:
Calculator.css
index.html
calculator/0A9476898799A150D840F0B1C3672921.cache.png
calculator/0FD6BF190ECD237B1ED75CD3C37F79D3.cache.html
...
Et voilà your application can run without an internet connection. Now, can you see the problem with GWT? Right... The name of the output produced by the GWT compiler changes with every compile. So the cache.manifest file has to be constructed dynamically. There is a good example by Alex Moffat on the development blog of Lombardi Software. Everything you need to know about GWT linkers, how to write one and how to configure it is explained. Something quite similar has been presented at the Google IO 2010 by Matt Mastracci, check out the video and slides of the talk GWT Linkers target HTML5 Web Workers, Chrome Extensions, and more as well.
So we have a dynamically created cache.manifest file which lists all our resources. There is just one tiny little thing left to be done. The filetype of the cache.manifest file has to be set to text/manifest, otherwise the browser will ignore it. You have to change the web server HTTP Headers configuration. There are different solutions depending on the web server you are using. To make this work in the Apache Tomcat, I have added a .htaccess file to the output directory. The .htaccess file contains one line only:
AddType text/cache-manifest .manifest
So that's it. Deploy you app and open your browser of choice (an HTML5 offline web application capable one of course). The first time your browser should ask you about installing the app for offline usage.
This is only the beginning. There are a couple of iPhone specific meta tags that can be added to your HTML, more about that next time...
