HTML5 is one of those buzzwords/technologies that seems to be all over the (virtual) airwaves these days. As is inevitable with such hype, there are many instances where HTML5 has become an overloaded/misused term (for e.g. many developers mistakenly believe that Geolocation is part of the HTML5 standard. It isn’t). Moreover, the standard is still maturing and there are things you can’t do with HTML5 (yet). All that being said, it is undeniable that HTML5 is the future of web development and as such is one of the most important standards/technologies to stay abreast with. It has an especially important role to play when it comes to developing web based mobile applications (e.g. Facebook, Kindle Cloud Reader and the soon to be released touch.salesforce.com).
So what does any of this have to do with Visualforce? Simple. In case you didn’t know this already, you can author any HTML5 page in Visualforce and develop your mobile web applications on Force.com. With that in mind, I thought I’d include a couple of tips on how to use HTML5 and Visualforce for building mobile web applications. Here goes.
1) Marking a VF page as HTML5. Lets start with the basics. Simply set the ‘docType’ attribute of the Visualforce page as follows to mark it as HTML5.
HTML5 requires ‘<!DOCTYPE html>’ to be the first thing in your page, and the docType attribute (which was introduced in the Winter ’12 release) achieves that. Prior to the Winder ’12 release, you had to ‘hack’ this custom doctype declaration with something like ‘<apex:outputText escape=”false” value=”{!'<!DOCTYPE HTML>’}”/>’. With the introduction of the docType attribute however you no longer need that workaround. Note that in the example above, I’ve also turned off the sidebar, header and standard stylesheets in the VF page. You want to keep the page as lightweight as possible when developing mobile apps, and so it is generally a good idea to disable all those functions in your VF page.
2) Using the application cache. One the more important features of HTML5 that is especially relevant to mobile applications is the ability to cache resources in a local client cache, thus enabling partial or full offline access to your mobile application. Since this is not intended as a comprehensive HTML5 tutorial, suffice is to say that you specify what you want cached locally in something called the cache manifest file. The cache manifest file has to have ‘<html manifest=”/cache.manifest”>’ as its first markup and needs to be served up with the ‘text/cache-manifest’ content-type. Josh posted a great blog a while back on how you can create an HTML5 cache manifest with Visualforce and I would highly recommend looking at his code to understand how you can do this in Visualforce. Note that in addition to the application cache, HTML5 also supports a full SQLLite Database to help implement offline access for your mobile application. Again, check out Josh’s blog post for details on how you can store Salesforce Objects in this offline database.
3) Using the ‘viewport’ meta tag: Though it is not actually part of the HTML5 standard, the viewport meta tag plays an important role in determining how your Visualforce page gets displayed on a mobile device. For details on the viewport tag check out this and this. There is no special magic to using this tag in Visualforce – just include it in the <head> section of your VF markup. Here’s a simple example:
4) Determining the mobile client: Again, nothing to do with HTML5 specifically, but you often want to know what type of mobile client is trying to access your VF page. For example, you might want to display a different markup based on the form factor of the client (tablet vs phone). Though this method is not fool-proof, you can determine the type of mobile client by checking the User-Agent header in your Apex controller/extension class. You can then include conditional VF markup based on what type of device/form factor is requesting the page. Here’s a quick example for detecting iPhone vs iPad clients:
5) Auto-hide address bar: A final (non HTML5 related) tip courtesy of the great HTML Rocks website. In order to maximize your page’s real estate on a mobile device, you can add a simple JS script that auto-hides the address bar on the browser. Here’s the simple JS that you can add to your VF page:
Hopefully you’ll find these simple tips helpful when developing mobile optimized HTML5 pages in Visualforce. In addition to the HTML Rocks website that I mentioned earlier, I would also highly recommend the Dive into HTML site if you’re thinking of getting your feet wet with HTML5. As always, questions (and additional tips) are welcome.