Who Needs IE8 Accelerators?

One of the new features in IE8 that I really like, simple though it is, is Accelerators. In particular I find it useful for mapping. Addresses tend to be fiddly things to type and why should I cut & paste to a new browser window when I can just highlight an address, right-click and immediately have a map preview or a full map with a single click. To me that’s productivity (or convenience depending on how you look at it).

Numerous people told me how easy it was to write an accelerator including my own boss who, for a bit of fun, produced a whack-a-mole accelerator where you can select someone’s name and then, well you probably get the idea. It’s not rocket science.

There are of course more serious applications of the technology. Colleagues have worked with many companies and organisations in the UK to build IE8 accelerators so their customers have faster and more convenient access to their services:

• Tesco (hosted in Windows Azure for extra bonus points)
• DirectGov
• ASOS.com
• RightMove.co.uk
• eBay

to name but a few. Spurred on by this, and the fact we’ll soon be launching a new competition around building accelerators, I decided to write one myself to find out just how easy it is.

Trafficify was born.

It might make sense to do this backwards in a way. It’s *really* easy if you already have the capability that you want to expose through your accelerator. In my case, things weren’t quite that easy as I had to build the back end before I could build the accelerator. In essence an accelerator is simply a way to make an HTTP request, passing some data from the current page (eg the selected text) and either surface this in a preview pane on the current page or in a new browser window.

The “Key Points” section on the “OpenService Accelerators Developer Guide” on MSDN is an excellent summary:

• Accelerators appear on the right-click shortcut menu of the Web page in Internet Explorer. They are grouped by function so that users can quickly access the task that they want.
• Accelerators enable two types of scenarios: users can "preview" information without leaving a Web page or "execute" to send content directly to an application or Web service.
• An XML-based Accelerator uses XML file to describe the format of HTTP requests to the Web server. Data from the target context (selection, link, or document) is passed as variables in URL parameters and/or form data.
• To install XML-based Accelerators from a Web site, use the window.external.AddService method to prompt the user.

Inevitably I opted for something mapping based as I think mapping is a real sweet-spot for accelerators (and I don’t happen to own an online retailing business). I’ve often demo’d the capability to mash-up traffic incident data from https://backstage.bbc.co.uk on a Virtual Earth map so that was my start point. Then I thought it might be nice to add some POI (Point of Interest) data such as DIY stores (didn’t make sense but I had the POI file) or how about safety cameras (can get that file and makes more sense than DIY). Cool – so we’ll be able to highlight an address and see a map overlaid with local traffic incidents and safety camera information.

My “backend service” has to be capable of serving up a web page and, ideally, a preview (a web page constrained to a fixed size of 320wx240h). Let’s just imagine I’ve built my back end service for a moment (as this is going to be a huge post if I combine everything here). How do I hook everything together and offer people this as an accelerator?

1 - Advertising the Accelerator

First thing I need is an XML document that describes my accelerator, the basic details like display name and description, homepage and category, the endpoints that service the actions (preview, execute) and what parameters get passed and in what form:

 
<os:openServiceDescription xmlns:os="https://www.microsoft.com/schemas/openservicedescription/1.0"> 
  <os:homepageUrl>https://trafficinfo.cloudapp.net/Default.aspx </os:homepageUrl> 
  <os:display> 
    <os:name>Local traffic with Windows Live / BBC</os:name> 
    <os:description>Get local traffic information with Live Maps and the BBC.</os:description> 
  </os:display> 
  <os:activity category="Map"> 
    <os:activityAction context="selection"> 
      <os:preview action="https://trafficinfo.cloudapp.net/Preview.aspx?addr={selection}" /> 
      <os:execute action="https://trafficinfo.cloudapp.net/Default.aspx" method="get"> 
        <os:parameter name="addr" value="{selection}" type="text" /> 
      </os:execute> 
    </os:activityAction> 
  </os:activity> 
</os:openServiceDescription>

You have access to a set of document variables that can be passed as part of the request:

So for example we can pass the currently selected text or the domain to the preview or the execute request – it’s very common of course to at least pass the selection.

2 - Installation

I also need some way for a user to install my accelerator which requires a call to window.external.AddService()

 

Add IE8 Accelerator

3 - Existing Users

And it’s also useful to be able to check if the accelerator is already installed so the button can be disabled or hidden.

 
window.external.IsServiceInstalled('https://trafficinfo.cloudapp.net', 'map')

which gives me a return value indicating whether the accelerator is already installed (and whether it’s the default).

4 - Fin

That’s pretty much it. All the details are available on MSDN at OpenService Accelerators Developer Guide.

Next I’ll walk through the backend which I opted to host in Windows Azure, an adventure in itself.

Technorati Tags: ie8,accelerator