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>Setting it Up</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 16x16.</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()
window.external.msIsSiteMode()</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. Lastly, <em>window.external.msIsSiteMode</em> will let us know if the page was launched as a pinned site, thus allowing us to better determine when to run the code.

For the overlay icons, I'm using five images that display numbers 1 through 5 respectively to designate the number of messages are in a user's inbox.

<h2>The Code</h2>

The first thing I need to add is the reference to my favicon. Note that if you don't add one, then the Internet Explorer's icon will be used by default.

[code lang="html"]&lt;link rel=&quot;shortcut icon&quot; type=&quot;image/ico&quot; href=&quot;favicon.ico&quot; /&gt;[/code]

Next, I want to create some sample data to work with. What I want to do for my demo is to have the overlay icon dynamically change every 5 seconds to simulate a more real-world scenario. The data is a simple array containing JSON data in each element.  

[code lang="js"]myPin.init([{ &quot;num&quot;: 1, &quot;label&quot;: &quot;Label 1&quot; },
                { &quot;num&quot;: 2, &quot;label&quot;: &quot;Label 2&quot; },
                { &quot;num&quot;: 3, &quot;label&quot;: &quot;Label 3&quot; },
                { &quot;num&quot;: 4, &quot;label&quot;: &quot;Label 4&quot; },
                { &quot;num&quot;: 5, &quot;label&quot;: &quot;Label 5&quot; }
                ]);
[/code]

By setting a timer, I'll be able to pull a new set of data every 5 seconds. 

[code lang="js"]setInterval(function () { myPin.getData(); }, 5000);[/code]

The main thing to keep in mind is that I'm "simulating" getting data from some remote host. In reality, all that the <em>myPin.getData()</em> method does is use a running counter to grab a new set of data and render a new overlay icon:

[code lang="js"]getData: function () {
            // A function that just simulates returning a result set...
            var idx = 0;

            // Determines whether the current page was launched as a pinned site.
            if (window.external.msIsSiteMode()) {

                idx = this.currIndex++;
                this.currIndex = (this.currIndex &lt; 5) ? this.currIndex : 0;

                this.dispOverlay(this.dataBin[idx]);

            }

}[/code]

As you can see, it uses the running counter var <em>currIndex</em> to determine which array element to grab and then passes the data to <em>dispOverlay()</em>. This is where we use <em>window.external.msSiteModeClearIconOverlay()</em> to clear out any previously displayed overlay icons and also generate a string for the actual icon name. You can see that the oImg var is created on the fly based on the data we're using. 

[code lang="js"]dispOverlay: function (theData) {

            var oImg = &quot;&quot;;

            // Is there any data?
            if (theData) {

                // Clear any preexisting overlay icon
                window.external.msSiteModeClearIconOverlay();

                // Create the image string...
                oImg = &quot;images/num_&quot; + theData.num + &quot;.ico&quot;;

                // Go ahead and create the overlay image and it's label...
                this.setOverlay(oImg, theData.label);

            }

}[/code]

That icon name, along with the accessible label text for the icon, is passed to <em>setOverlay()</em> which sets the overlay icon via <em>window.external.msSiteModeSetIconOverlay</em> and renders it using <em>window.external.msSiteModeActivate</em>.

[code lang="js"]setOverlay: function (icon, desc) {

            // Sets the overlay icons...
            window.external.msSiteModeSetIconOverlay(icon, desc);
            window.external.msSiteModeActivate();

}[/code]

<h2>Test it Out</h2>

To test this out, it's a simple matter of running your newly pinned page in Internet Explorer 9, grabbing the tab and dragging it down to your taskbar:

<img src="http://blog.reybango.com/wp-content/uploads/2011/10/dragged-and-pinned.png" alt="" title="dragged-and-pinned" width="576" height="151" class="alignleft size-full wp-image-1731" />
<em>Tab being dragged to the taskbar</em>

<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>

Five seconds after the page has been pinned, the code will fire off the first notification and continue to cycle through the other icons every subsequent five seconds. 

<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>

The key to remember is that the <a href="http://msdn.microsoft.com/en-us/library/gg589512(v=VS.85).aspx">IE F12 Developer tools</a> are available to you to test out. So if you run into quirks, simply press the F12 key and the debugging tools will appear.

<a href="http://blog.reybango.com/wp-content/uploads/2011/10/ietools.png"><img src="http://blog.reybango.com/wp-content/uploads/2011/10/ietools-300x225.png" alt="" title="ietools" width="300" height="225" class="alignleft size-medium wp-image-1736" /></a>


