I was recently doing some work with <a href="http://msdn.microsoft.com/en-us/library/gg491731(v=VS.85).aspx">IE9's Site Pinning API</a> and found out about a cool bit of functionality that can enhance user notifications. If you're not familiar with site pinning, it's a great way to allow users to have easy and quick access to their favorite sites via the Windows taskbar. There's a really nice <a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/pinned-sites">overview on Beauty of the Web</a> that explains how it works.

<h2>Keeping Users Up-to-Date</h2>

One of the features the API provides is the notion of notifications that can allow developers to provide alerts to end users. The functionality allows you to dynamically insert custom overlay icons that can alert users when an important bit of information is available. These overlay icons are rendered over the favicon that is pinned to the taskbar. If you look at the image below, you can see it in action:

<img src="http://blog.reybango.com/wp-content/uploads/2011/10/pinned.png" alt="" title="pinned" width="533" height="151" class="alignleft size-full wp-image-1712" />
<em>Pinned site with no overlay icon</em>

<img src="http://blog.reybango.com/wp-content/uploads/2011/10/overlay-icon.png" alt="" title="overlay-icon" width="533" height="150" class="alignleft size-full wp-image-1710" />
<em>Pinned site with overlay icon</em>

So if you think about the possibilities, any site that offers users an inbox, special deals or sends out time-sensitive alerts could use this notification capability to keep their users up-to-date and more engaged on the site. Sites like the Huffington Post have already discovered that users that pinned HuffPost <a href="http://windowsteamblog.com/ie/b/ie/archive/2011/02/17/economics-of-the-web-ie9-users-that-pin-huffington-post-spend-49-more-time-on-site.aspx">spent 49% more time on the site</a>. 

The best part is that adding this capability is insanely easy.

<h2>The API</h2>

To add notifications, you'll need a couple of things:

<ul><li>A cool favicon for your site. If you don't have one, you can use the handy <a href="http://ie.microsoft.com/testdrive/Browser/IconEditor/Default.html">web-based X-Icon Editor</a> to create one.</li>
<li>A set of overlay icons to use. The recommended size is 32x32.</li>
</ul>
The API is JavaScript-based and we'll use the following methods:

<em>window.external.msSiteModeClearIconOverlay()
window.external.msSiteModeSetIconOverlay(icon, desc)
window.external.msSiteModeActivate()</em>

The <em>window.external.msSiteModeClearIconOverlay</em> method is used to clear out any previously set overlay icons. <em>window.external.msSiteModeSetIconOverlay</em> allows you to specify the name of the notification icon as well as a accessible description. Lastly, we'll use <em>window.external.msSiteModeActivate</em> to "activate" the notification icon and have it render.

