HTML5, Google Chrome Frame and older browsers
Thursday 08 December 2011
Consider the following problem:
You might be tempted to start working with HTML5 features in your web applications but you have to support older bowsers.
But how about just upgrading the complete browser?
Seems to make far more sense right? Except upgrading from IE8 to IE9 isn’t possible in all cases. One big showstopper can be people still running Windows XP because IE9 requires Windows VISTA as a minimum.
So we can upgrade to another browsers like FireFox or Chrome which has far better HTML5 support. While that technically works it causes headaches as it means people must switch browsers. And worse you might also have to support some site that only works well in IE forcing the users to switch between multiple browsers. Not a problem for techies, I do it all the time, but not much fun for the average end user.
So it turns out there is a great solution out there called Google Chrome Frame.
Users can install Google Chrome Frame in their machine and by default it does nothing noticeable. Only when a specific HTML meta tag X-UA-Compatible is added to the head section does the plugin start working. And then it intercepts the response and starts rendering it using Google Chrome Frame instead. However this is done inside the Internet Explorer window so the user has no clue he or she has just switched to Google Chrome Frame. And just like magic all the cool new HTML5 features supported in Chrome will work in what appears to be IE.
A simple example
When I try to new up a WebSocket object in IE9 I get the following error.
And with a simple addition of the HTML header the sample starts working. Notice that as far as the end user is concerned he is still using IE9, no changes there whatsoever.
Pretty cool right
And the good thing is that by default Google Chrome Frame is self updating just like Google Chrome so you know that once installed the plugin will always be up to date.
Detecting Google Chrome Frame
If you want to detect if Chrome Frame is installed ahead of time you can look at the User-Agent header the browser sends to the server. If installed and active Chrome Frame will add chromeframe/X.X.X.X where the X.X.X.X is the version number to the User-Agent string.
So why just add it to a single page?
Enabling Chrome Frame for al pages in a website is easy, just add the following to your web.config
You can read the Google Chrome Frame FAQ with lots of extra bits of information here.