Tuesday, December 7, 2010

In my last post I have been talking about different options to use GWT for mobile development. In this post I will focus on one of these options, HTML5 offline web application. HTML5 offline web application continue to work while they are offline. That means such a web application can be loaded just once and run without Internet connection. So here is how I got a GWT application in shape to run as offline app...

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 MANIFESTCACHE:Calculator.cssindex.htmlcalculator/0A9476898799A150D840F0B1C3672921.cache.pngcalculator/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 .manifestSo 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...