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:

Variable	Context	Description
{documentUrl}	All†	The href of the document.
{documentTitle}	All	The title of the document, if available.
{documentDomain}	All	Effective second-level domain from the document's href.
{documentHost}	All	Fully qualified domain from the document's href.
{selection}	selection	Currently selected text.
{link}	link	The href of the selected link.
{linkText}	link	The innerText of the selected link.
{linkRel}	link	The rel of the selected link, if available.
{linkType}	link	The type of the selected link, if available.
{linkDomain}	link	Effective second-level domain from the link's href.
{linkHost}	link	Fully qualified domain from the link's href.

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

Comments

• Anonymous
  April 16, 2009
  PingBack from http://blogs.msdn.com/mikeormond/archive/2009/04/17/who-needs-ie8-accelerators.aspx

• Anonymous
  April 17, 2009
  Nice intro article on developing accelerators for IE8. See: http://bit.ly/vJKbW For readers who use Firefox and are new to IE8, I wanted your readers to be aware that Firefox has a version of Accelerators too, it is called “KALLOUT - Accelerators for Firefox” It’s available as a free add-on through Firefox. See: http://bit.ly/vJKbW The accelerators you develop will actually work directly with KallOut-Accelerators for Firefox so users can stick with Firefox if they want and still get the benefits of the community-developed accelerator.  Developers can use the tips in your article but their code works on IE8 AND Firefox now.  FYI. EL

• Anonymous
  April 20, 2009
  It's a good idea, maybe even good enough to jump the firefox ship.

• Anonymous
  April 27, 2009
  Though I’d love to do this post in prose I fear it would create some woes At least for me if not for

• Anonymous
  May 06, 2009
  Hi Mike, Excellent article. We are planning to implement in our new sharepoint website project. Well done to IE Team. Thanks