Saturday, September 26, 2009

Browserscope & Chrome Frame

I imagine many front end developers out there like me are currently pretty thrilled about the announcement of Google Chrome Frame this week. I've always been an admirer of Alex Russell's writing and work. To be fair though, I was once also a very excited Flash developer who thought I'd end up writing code for a single engine/consumer. I've felt that burn, but I'm still really just a kid at heart - so I'm psyched.

Chrome Frame presented a pretty interesting challenge for Browserscope. I wish we'd solved it fully before this morning. The problem is in detecting the user agent. When it first came out, I thought Browserscope wouldn't need any quick changes due to Chrome Frame, because we wouldn't be serving the <meta http-equiv="X-UA-Compatible" content="chrome=1"> header. Fortunately Steve read about the "cf:" way to run Chrome Frame the next morning - though unfortunately, that meant we had a problem.

Browserscope originally did its user agent classification based on the HTTP_USER_AGENT header sent from the browser when you share your test results. Chrome Frame adds a "chromeframe" string within the IE user agent string, so at first we thought we could detect Chrome Frame based on the presence of that string. But correctly, IE has the "chromeframe" string whether Chrome Frame has been invoked on the page or not (it's still an installed plug-in). And we wanted to be able to distinguish the IE/Chrome Frame results - which someone could submit by going to cf:

So then we thought we could just detect whether the client side render engine was Webkit, which is doable - and it turns out that if you ask the browser for window.navigator.userAgent you get a typical Chrome user agent string (type cf:about:version into IE with Chrome Frame installed). It's kind of a bummer that at the client level, you cannot tell that you're in Chrome Frame versus Chrome proper, but the Chrome Frame team may tweak the Chrome Frame user agent string if enough people also encounter this as an issue. Functionally, it should be a lot more like Chrome proper; Browserscope itself should be able to report if, and if/when that isn't the case.

While we'd anticipated new user agents on Browserscope, we hadn't imagined a hybrid sort of User Agent. We had to make some changes under the hood to support this in the back end (thanks slamm!). Now you should be able to go to Browserscope and compare your test results for IE and Chrome Frame (if you have it installed). Parsing-wise, we're grouping Chrome Frame along with the browser family(IE at this point) and major version bit(6|7|8) in the UI. We'd love your feedback on that decision.

Now, not only can you run the tests on Browserscope in Chrome Frame, but once you do, you'll then experience Browserscope itself in Webkit (check out all the rounded corners and text-shadows). And, how awesome is Webkit?! Of course, you can always toggle the checkbox on the homepage to switch back and forth to IE proper.

This experience reminded us on the Browserscope team how crucial it is to parse user agent "correctly" - and in this case that requires a combination of client and server information! - so I'll make a plea for folks to check out and add comments to a design doc for a user agent string parsing project we'd love to see take shape. Want to build it?

No comments: