Internet Explorer 9 (IE9) launched last week at SxSW! I was bummed that I wasn’t there but I was one of the 2.3 Million downloads in the first day. There’s a bunch of new stuff in IE9. There’s a load of examples out on http://www.beautyoftheweb.com that show off all of the new HTML5 support to javascript performance to a ton more.
A simple one, however is site pinning. This allows you to pin a website as if it were an application on the Windows 7 taskbar. This blending and merging of the web and desktop is awesome.
Now, you can pin any website to the taskbar and get generic results but you as a website author have control to actually do something cool and customize what that pinning does. You can customize the way your site is added to the taskbar as well as add your own jump list items.
MSApplication Meta Tags
The first place to get started is customize the application name, tooltip and frame with a few meta tags:
<meta name="application-name" content="Josh Holmes" /> <meta name="msapplication-tooltip" content="Random Thoughts" /> <meta name="msapplication-window" content="width=1024;height=768" /> <meta name="msapplication-navbutton-color" content="#ff7900" /> <meta name="msapplication-starturl" content="https://joshholmes.com/blog/" />
That’s simple. The next step is to add in a custom task that will let people dive deeper into the site with the right click:
<meta name="msapplication-task"
content="name=View Articles;action-uri=./articles/;icon-uri=./favicon.ico" /> <meta name="msapplication-task"
content="name=About Josh;action-uri=./aboutme/;icon-uri=./favicon.ico" />
By default, IE9 looks for your 32×32 sized version of your favicon but if it can’t find one, it it uses your 16×16 one in a 32×32 box so you should use a high-res favicon if possible…
JavaScript
If your site is pinned, you can, if you want, do more that just sit there on the taskbar. You can interact with the jumplist and more.
Checking For Pinned Mode
First thing to know is if your site is actually pinned or not:
if (window.external.msIsSiteMode()) {
// in pinned mode
} else {
// not in pinned mode
}
Activating the Taskbar Icon
Let’s say that you need your user to interact with the application to keep session alive, or need them to complete a form or for some reason you need their attention back on the site, simple activate the taskbar icon by making it glow (Win7 Users are used to this UI paradigm):
window.external.msSiteModeActivate();
If making it glow is not enough but you have actual info for the user, such as if you are running a bulletin board service and want to let the user know that 3 new messages have arrived for them or something else random like that:
// clear current overlays
window.external.msSiteModeClearIconOverlay();
// set new one
window.external.msSiteModeSetIconOverlay("./newmessage3.ico", "3 new messages match your search");
Customizing the JumpList
And if you really want to customize the jumplist like with the last few articles that your user looked at, or the last few searches that they did or something more than the static setting of tasks that we did above:
// clear current jump list
window.external.msSiteModeClearJumplist();
// name the jump list
window.external.msSiteModeCreateJumplist("Adding JumpLists");
// add tasks to list – notice that these can have custom icons as well
window.external.msSiteModeAddJumpListItem("Item 1", "page1.html", "./favicon.ico");
window.external.msSiteModeAddJumpListItem("Item 1", "page2.html", "./favicon.ico");
// display list
window.external.msSiteModeShowJumplist();
JQuery Way
Of course, if all that’s too complicated or two much typing, you can just use the JQuery plugin – http://ie9ify.codeplex.com/. 😀
Conclusion
Hopefully this has been a short and sweet glance at some of the new site pinning features and the like.