Offline Web Apps – AppCaching and HTML5

At this year’s Flash on the Beach, Greg Rewis, one of the principal evangelists for Adobe, gave a talk on jQuery and PhoneGap within Dreamweaver, called From Zero to App in 60 seconds. He outlined how easy it is to create an HTML5, CSS3 and jQuery based web app that looks native, and then export it as an iPhone or Android based web app. It uses the PhoneGap platform to do this, which is a passable attempt at providing something for web developers to try their hand at app development. However, I still believe that if you are going to write native apps, you should attempt to do it in the environment that was intended to develop it in.

However, if you’re wanting to make a web app that works across different devices and feels like a native app, that’s a whole different story…

Greg started off his talk with a bit of a look at responsive design and progressive enhancement, tailoring your site to work across different devices using @media queries (which we’ve touched on in this post). If you are a web developer, who is used to working with HTML and CSS, then my thoughts are with designing application-like websites that can serve across multiple devices, and doesn’t require any developer lock-in with an app store. A really good example of this is this year’s Flash on the Beach mobile site (it won’t work in the desktop, so go to http://fotb.me/), which utilises HTML5, CSS3 and jQuery to create an as good, if not better, experience as the previous years’ apps that you downloaded from the app store. This has been done by using media queries, a whole lot of js and AppCaching.

AppCaching isn’t something that I’ve really played with before, so I thought I’d have a dig around…

AppCaching

One of the cool things with the FotB app is the fact that once you’ve loaded it, the application caches all of the data on your device, so that subsequent visits when your network connection isn’t on still gives you the full web app experience. This is achieved through AppCaching. Basically, a web app is made of html, css, js and images. What AppCaching does is every time a user connects to the site, it provides a list to your device of files that need to be downloaded to make the site work offline, so that when you open the site without a network connection, it pulls the up to date local files.

How this is done is by providing this bit of html after your doctype reference:

This then links to a manifest document that sits on your server and tells the device which files it needs to cache locally. A simple manifest is a text file that looks like this:

However, within the manifest file you can also do some nifty things around specifying which files are to always be left on the network and surfacing alternative files if the user is offline. If you want some more information on how to do more with AppCaching then head to this great article on Dive into HTML5.

For me, this makes the whole concept of web apps a viable option when all you need to do is present information to the user and not use device specific functionality, like the camera. However, if you link this up with HTML5 technologies like geolocation and canvas animation, you can create some pretty amazing experiences, while still completely bypassing the app store. However, one of the problems with this at the moment is device compatibility. Doing this today means that your app will work across iPhone and Android, but HTML5 isn’t supported yet on Windows Phone. However, when Mango is released this Autumn, this will all be supported.

What do you think? With things like AppCaching, combined with all the other awesome HTML5 and jQuery tricks, are web apps just as good as native apps?