Real-World Implementations of Pinned Sites with IE9

Real-World Implementations of Pinned Sites with IE9

  • Comments 1

Beyond the work we’ve done to support HTML5 and other standards in Internet Explorer 9, the engineering and design teams also spent a lot of time thinking about how to enable sites to blend in more naturally with the rest of the applications on your system. Today the boundary between a site and an application is too pronounced: for example, why should you have to build a fully-fledged application just to get an icon on the start menu? It would be great if developers had fewer limitations and more choices, and users had a more consistent experience.

imageIn IE9 we introduced a feature called Pinned Sites that makes it easy for a user to add a site to their taskbar or start menu, just by dragging the tab (or the icon to the side of the address bar) to the intended location. The site will reopen in its own window, with the browse frame and navigational controls integrating the site’s icon and primary color.

While the basic Pinned Sites feature works without any changes required on the site, you can optionally add to the taskbar integration by adding jumplists, custom thumbnail preview buttons, icon overlays and extended site metadata. Just two weeks after the launch of IE9 beta, many of the most popular sites on the Internet have implemented support for this feature. Some good examples of adoption with sites you might use on a daily basis are CNN, Facebook and Twitter, and I thought I’d take a moment to pick this apart a little to show you what one of these (Facebook) has done.

For the purposes of this discussion, I’m looking at Facebook. If you check out the <head> section of the markup for the home page of Facebook, you’ll see something like the following (edited for readability and line-length):

<meta name="application-name" content="Facebook"/>
 
<meta name="msapplication-tooltip" content="Start the Facebook App"/>
<meta name="msapplication-starturl" content="/"/>
<meta name="msapplication-window" content="width=800;height=600"/>
 
<meta name="msapplication-task" 
 content="name=News;action-uri=/home.php?sk=nf;icon-uri=/images/news.ico"/>
<meta name="msapplication-task" 
 content="name=Messages;action-uri=/home.php?sk=inbox;icon-uri=/images/messages.ico"/>
<meta name="msapplication-task" 
 content="name=Events;action-uri=/home.php?sk=events;icon-uri=/images/events.ico"/>
<meta name="msapplication-task" 
 content="name=Friends;action-uri=/home.php?sk=ru;icon-uri=/images/friends.ico"/>
 
<link rel="shortcut icon" href="http://static.ak.fbcdn.net/facebook.ico" />

Taking a quick glance through the various fields included here, application-name simply provides a shortened title of the site that is suitable for use in a menu. This comes straight out of the HTML5 specification (Section 4.2.5.1, “Standard metadata names”), and also provides the <meta>-based pattern for the additional metadata that a site can supply.

Beyond the application-name field, Internet Explorer 9 also acts on a number of other defined fields; since these are not part of the specification today, we added a vendor prefix to the application-foo convention in the same way that is commonly adopted for CSS today. The tooltip and window fields are relatively self-explanatory; the starturl field simply represents the initial page that should be opened (by default the current page, but often you’ll want to override this to the root).

The msapplication-task field provides support for up to five tasks, which in IE9 are exposed as jumplist entries. You can set the name, the link that it points to and the location of a custom icon if you want to show something other than the favicon (which is selected in the final line of markup). In theory, this field could be used for other purposes (e.g. on a mobile device it could be used to pre-populate a context menu): there’s nothing intrinsically tied to a jumplist here.

There are other optional fields you can set, incidentally – full documentation is available at MSDN.

image

So that takes care of the statically-declared content on the site. One other nice addition is the way that Facebook takes advantage of the overlay icon to surface notifications (e.g. new friend request or new wall post). As you can see in the screenshot to the right, there is a red asterisk bubble overlaid on the Facebook icon, indicating new activity has taken place that I might want to review.

You can set this icon using the msSiteModeSetIconOverlay()function, which takes one parameter containing the URI for the icon itself and optionally a second parameter with a tooltip.

Buried in the JavaScript code on the site, there is a snippet of code which looks very roughly like this:

if(window.external && external.msIsSiteMode())
(function() {
  var wext=window.external;
  var icon='/images/icons/notif.ico';
  var news={messages:0, notifications:0, requests:0};
  
  var updateIcon = function(f,e){
    news[e.type]=e.count;
    if(news.requests + news.messages + news.notifications > 0)
      wext.msSiteModeSetIconOverlay(icon);
    else   
      wext.msSiteModeClearIconOverlay();
  };
  
  wext.msSiteModeClearIconOverlay();
  
  Notifications.subscribe(['messages-updated',
    'requests-updated','notifications-updated'], updateIcon);
})();

Here you see how the icon overlay is set where there are more than 0 items to show, but this code is only parsed if msIsSiteMode() returns true – that is, when the site is running in pinned mode. The window object is a safe place to hang browser shell logic, and is used already for similar purposes that relate to the frame rather than the content (e.g. setting favorites or manipulating tabs).

So we’ve taken an in-depth look at Facebook, but there’s already a plentiful list of other sites that also implement deep support for Pinned Sites. Some other well-known examples beyond the three I’ve already mentioned include: MySpace, Amazon, Zillow, Cracked, break.com, MSN, WordPress, LinkedIn, USA Today, IMDB, WSJ, Flixster, Photobucket, Neowin, and discovery.com. We’re also seeing other frameworks adopt support, for example Umbraco (one of the most popular .NET-based CMS solutions) has an extension to add Pinned Sites support to the admin console.

  • This pinning is great but becomes a fragmented experience because the address bar and tabs are available i the chrome.

    An "application" can easily get hijacked into a regular browser and the user ends up not being able to rely on clicking the icon on the taskbar to reveal the web application

    It ends up just bringing up a browser with a bunch of tabs on a site that doesn't have anything to do with the pinned application.

    Pinned web applications should open without the address bar or tabs (like Chrome and FireFox Prism do).

Page 1 of 1 (1 items)