Scott Hanselman

IE9, Site Specific Browsers, and adding your own Jump List Items to Pinned Tabs

September 15, 2010 Comment on this post [46] Posted in ASP.NET | ASP.NET MVC
Sponsored By

Site Specific Browsers aren't a really new idea. In 2005 there was an app called Bubbles I ran for a while that would let you run a website with minimal "browser chrome." Mozilla Prism (né WebRunner) is a Firefox add-in that does a similar thing. Google Chrome includes the idea of Application Shortcuts. The idea of all this is that some web apps are really applications and you think about them as applications. For me, I think of Gmail and Facebook and Twitter and Basecamp as applications not necessarily as browser tabs. The notion of Site-Specific Browsers is definitely arriving.

Internet Explorer 9 Beta (IE9) is out now and includes a featured called "Site Pinning" which is a effectively Site Specific Browsers. It's integrated nicely with Windows 7. It's easy for you as a developer or site owner to add these features to your site.

Here's the basic idea from a markup perspective from a Channel 9 example:

<meta name="application-name" content="Channel 9 Audio Player" />
<meta name="msapplication-tooltip" content="Channel 9 Podcasts" />
<meta name="msapplication-window" content="width=1024;height=768" />
<meta name="msapplication-task" content="name=Msdn Flash Podcasts;action-uri=./?topic=msdnFlash;icon-uri=Images/channel9_logo.ico" />
<meta name="msapplication-task" content="name=IE Podcasts;action-uri=./?topic=connectedShow;icon-uri=Images/channel9_logo.ico" />
<meta name="msapplication-task" content="name=Other Podcasts;action-uri=./?topic=other;icon-uri=Images/channel9_logo.ico" />
<meta name="msapplication-task" content="name=All Podcasts;action-uri=./;icon-uri=Images/channel9_logo.ico" />
<meta name="msapplication-navbutton-color" content="#FF3300" />
<meta name="msapplication-starturl" content="./" />

You add meta keywords (you don't need to add them all) to represent Jump List Tasks. Here's what Twitter added:

<meta name="msapplication-task" content="name=New Tweet; action-uri=http://twitter.com/home; icon-uri=images/ie/tweet.ico" />
<meta name="msapplication-task" content="name=Direct Messages; action-uri=http://twitter.com/inbox; icon-uri=images/ie/dm.ico" />
<meta name="msapplication-task" content="name=Mentions ; action-uri=http://twitter.com/replies; icon-uri=images/ie/mentions.ico" />
<meta name="msapplication-task" content="name=Favorites; action-uri=http://twitter.com/favorites; icon-uri=images/ie/fav.ico" />
<meta name="msapplication-task" content="name=Search; action-uri=http://search.twitter.com; icon-uri=images/ie/search.ico" />

If I visit Twitter with IE9:

Image of Twitter in IE9

Then either drag the TAB or the FAVICON to the Taskbar:

Image of Twitter in the middle of a drag-drop on the way to begin pinned to the taskbar

Then I'll get a Twitter icon in my Windows 7 Taskbar that looks nice like any other app. If I right click on it, I'll get a jump list like any other application. Compare this screenshot to the meta tags above:

Image of Twitter as a pinned app with a jumplist showing common actions

If I run Twitter, the Twitter app icon will show up to the left of the back button. The back and forward buttons also change color (it's subtle here because Twitter's icon is blue like the default blue, but you'll see later) and the home button is gone from the toolbar. Note that you CAN change the color (see the code above) if you don't like the automatically calculated color.

Image of Twitter as a pinned app. The back button is light blue, like the twitter icon.

Now, this browser is site-specific. The Pinned Tab will effectively become a Twitter app.

Rather than dragging the site to my taskbar, I could have click the Tools icon (the gear) and clicked File|Add To Start Menu:

Screenshot of File | Add site to Start menu

Now my app is in the Start Menu, as are my jump lists:

Image of Twitter pinned to the Start Menu with the Twitter JumpList showing

If you want, you can also use Javascript to push overlay icons to your pinned app. For example:

Image of Twitter pinned to the Taskbar with a "3" overlaid.

Via code like this:

//show
window.external.msSiteModeSetIconOverlay(iconUri, toolTip);
//hide an Overlay Icon:
window.external.msSiteModeClearIconOverlay();

There's also the ability to add and remove jump list items dynamically to keep track of a search history or favorites, for examples. You can even add taskbar buttons like this:

Image of Channel 9 as a pinned tab. There's a forward, back and play media button

Here's a little code for the example:

document.addEventListener('msthumbnailclick', onButtonClicked, false); 
var btnPlay = window.external.msSiteModeAddThumbBarButton(iconUri, toolTip);
window.external.msSiteModeShowThumbBar();
function onButtonClicked(e) {
switch (e.buttonID) {
case btnPlay:
play();
break;
}
}

Adding Basic Jump Lists to your own Site

I'll add some jump lists to this blog. Here's my site visited in IE9. See my big head in there? That's just my favicon.ico that I made with IcoFX, a great free icon editor.

Shot of my site in IE9. The back button is blue.

You can't TELL me you haven't always wanted my tiny transparent head on your taskbars, Dear Reader. Come on! ;)

Here's the code I'll add..

<meta name="msapplication-task" content="name=Complete Archives;action-uri=/blog/Archives.aspx;icon-uri=/blog/images/archives.ico" />
<meta name="msapplication-task" content="name=Speaking/Videos;action-uri=/blog/CategoryView.aspx?category=Speaking;icon-uri=/blog/images/videos.ico" />
<meta name="msapplication-task" content="name=Weekly Podcast;action-uri=/blog/CategoryView.aspx?category=Podcast;icon-uri=/blog/images/podcast.ico" />
<meta name="msapplication-task" content="name=Scott on Twitter;action-uri=http://twitter.com/shanselman;icon-uri=/blog/images/twitter.ico" />
<meta name="msapplication-task" content="name=Scott on Facebook;action-uri=http://facebook.com/scott.hanselman.public;icon-uri=/blog/images/facebook.ico" />
<meta name="msapplication-starturl" content="./" />
<meta name="application-name" content="Scott Hanselman's Blog" />
<meta name="msapplication-tooltip" content="Scott Hanselman's Blog" />

Then when I drag the favicon or tab to the task bar (or select File|Add to Start Menu) you'll see:

My site's custom jumplist including Archives, Videos, Twitter and Facebook

And the top of the browser  changes:

IE9 with my blog as an app. The back and forward buttons are now brown.

Pretty slick! While I don't see the world considering my blog an app, it was minimal effort to get this little bit of integration.

The more interesting ideas would be:

  • Adding a podcast player for Hanselminutes.com so the site could be an app
  • Keeping a separate list of recently searched for terms

Enjoy. Download IE9 here.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Hosting By
Hosted in an Azure App Service
September 15, 2010 23:22
Whoa. Me likey :)
Sam
September 15, 2010 23:25
Great work Hanselman. Its good to see that Win7 features can be implemented from the browser using Meta tags and javascript. Really cool and have to try this.
September 16, 2010 0:01
I was just thinking yesterday it would be cool if my Chrome Gmail link showed me how many emails there were in a badge like on the iPhone and then bam, there it is in IE9. Hopefully, Google implements the functionality.
September 16, 2010 0:14
Pretty neat. I like the fact that it's based on meta tags. It's a pity that there's some MS specific JavaScript required for the additional behaviour.
September 16, 2010 0:25
Mark - Window.External is the standard way with javascript (even in Firefox) to do stuff like adding bookmarks or search providers (see the Open Search 1.1 spec) so it's totally OK for this kind of implementation.
September 16, 2010 0:25
Pretty phat. Would have been nice to see MS do it in a little more open fashion so Chrome could tap into Win7 goodness.
September 16, 2010 0:52
More open how? Chrome could totally implement this, just as they did AeroPeek in Chrome 5.
September 16, 2010 0:58
Nice, glad we can always count on you to have a blog ready explaining new features when the products are announced :)
I must say I really like the beauty of the web launch site and of cource the Win7 jump list features.
September 16, 2010 1:06
I noticed in the live event that there was a feature where he showed a list of things to do from a website. Is it possible to have that list dynamically loaded from the website so that we could fill in stuff like alerts and what not?
September 16, 2010 1:13
Can I install IE9 and keep IE8 so that I can continue devlopment work with IE8 and test against IE9 as well?
September 16, 2010 1:15
At first glance, it looks awesome, but then it smells a lot like old HTA applications...

How does it handle sessions? How does it remember that you're @shanselman (written in the last menu item) when you're not logged in? How does it handle changes in authorizations (tomorrow I may not be enabled to the "Messages" section of the app)?

Anyway, I will TOTALLY put those meta definitions in my next project :P
September 16, 2010 1:20
Filini - From an auth perspective, if you're logged in with a persistent cookie, just like before, then you're logged in. Nothing's changed.

BuildStarted - Yes, you can dynamically change the jumplists as well as the icon overlays.

CraigAP - No, IE9 replaces IE8, but there is compat mode (a button at the top) so you can see how it looks in both. If you don't like that, try http://spoon.net/browsers and run any version of any browser you like.
September 16, 2010 1:29
Yes, but also persistent cookies get deleted eventually (ccleaner, clear cookies, site policies), or I can simply do a plain old Logoff :)

How will the pinned Tab app behave?
September 16, 2010 1:44
That is all sorts of awesome! I never thought I'd say this, but I really like how Internet Explorer is evolving.
September 16, 2010 2:12
This is sooo awesome! I have my own Hanselbutton on my taskbar! ;)
September 16, 2010 2:24
The various pinned site features are great when you want them - but does anyone know how to prevent IE9 from creating a pinned site every time you drag the icon into a folder to stash a link for later?

It still creates a regular .url if you drag a link from the body of the document, but as far as I can tell always creates a .website when you drag the address bar icon.
September 16, 2010 2:48
Shift-drag makes a regular link.
September 16, 2010 3:10
Ah... thank you very much.

I tried both this, and right-button dragging as well, and neither appeared to work. With your pointer I went and tried with more detail and it does work, but with a significant bug.

The operation is chosen based on whether the shift key is depressed when the drag starts, rather than when the drop occurs. This is exactly the opposite of the UI guidelines and drag-and-drop and the existing implementation in, say, Windows Explorer.

Do you know how they are taking bug reports from this public beta?
September 16, 2010 3:57
As a developer, I'm excited about IE9 standards and speed.
As a user, I'm pretty frustrated. Where's my links toolbar I use ALL the time? I thought maybe in the address drop-down. Seems I might drag the Hanselman Head to the "favorites" section. No. Tried clicking "Add" which takes me to a page with limited selections. Tried adding some from there, but I end up with weird urls. Can't seem to edit the the items to change the url. I see something in another post about shift-drag. Not too intuitive! And did nothing for me.

The hanselman site throws script errors.

The just announed Bing enhancements just crash.

Bing itself throws errors in IE9 mode. Is the browser mode/doc mode available only in developer tools?
September 16, 2010 4:22
problem: why IE9 don't remember jump list of some web sites after I close all IE windows? Is it bug of IE or of these sites? for example at webanketa.com

also IE9 sometimes load these sites and ignore it's customized buttons colors... (msapplication-navbutton-color)

I trying use this feature on our local site and have same problem...

thank you.
September 16, 2010 5:54
IE9 looks good, I've been waiting to try it for a while. Does it render text blurry for you? It does for me (running Windows 7).

http://mattfrear.com/2010/09/16/ie9-beta-has-blurry-text/
September 16, 2010 7:12
Hi, I placed the taskbar vertically and the website won't pin when I drag the tab on it. And when you're dragging a tab around and touch the edge of the screen accidentally, this tab won't "combine" to the existing IE windows.
September 16, 2010 9:08
Can you push updates for the Overlay Icons from a website back into the browser if the browser is not open?
Or could we set a tag for the browser to periodically check for some type of change of an url and generate the overlay icon?
Then I can get the Twitter updates even if I don't have the window open.

PS>> Will we have a spell checker?
September 16, 2010 9:55
I can't report bugs on Connect via "Send Feedback" it tells me to install the "Windows LiveId Sign In Assistant" with a link.
When I try to install that I get "newer version already installed" :)

Corneliu
September 16, 2010 12:24
Excellent and the next step is MS_HTML5.

Just like we had XDR schemas and all the other MS bastardised standards etc., etc., etc.
September 16, 2010 12:33
Paul - How do you figure? These are all valid browser extensions like all the moz_ and webkit_ ones before them. There's nothing new or controverisal in markup like this that hasn't been done in every other browser. You've never written CSS or HTML with a few browser-specific extensions? Ever written an iPhone app in HTML5?
September 16, 2010 12:50
Looks very interesting. Seems to work fine on my end, and although I prefer the web to be web (I don't even like Flash or HTML5) and applications to be applications, this is about the first thing that's made me perk up about this crazy new world we inhabit.
September 16, 2010 12:53
Corneliu - Maybe remove the assistant from Add/Remove and try again? I dunno about spell check, I'm learning this as much as you are. You can certainly set a jQuery timer to change overlay icons or change them on events, but only when your app is running. No pushing.

Matt - Wrote you a blog post on that just now. Check the home page.

Maxim - Dunno. I'll tell them to check the comments here for bug reports.

CraigAP - I've told the Bing team, and I know about the other error and am fixing it.
September 16, 2010 12:54
On 64bit win7 can you install both at the same time ? Also, with the 64bit version is there flash support for that ?
Thanks, looking good :)
September 16, 2010 12:59
On 64bit Win7 there is to be Flash 64-bit support I hear. It's called "Flash Square," go Google it with Bing. It's also in beta.
September 16, 2010 13:44
"Google it with Bing" pretty much sums up why I love reading your stuff.
September 16, 2010 16:07
IE9 crashes when I open up Dev tools. Unusable in it's present form

32 bit install
September 16, 2010 16:10
Comment about fonts blurry.

Mine are blurry and 'light' looking as well (Windows 7). When I open up Chrome side by side - the Chrome fonts are clear and ''bolder' - easier to read
September 16, 2010 18:45
Hey Scott. I love the new minimal interface on the main window. Now do you think you could have a word with someone on the IE team about the Internet Options window? I feel queasy every time I have to go in there. Something like the Firefox approach would be good, with a simplified Preferences window and about:config for the obsessives amongst us.
September 16, 2010 22:11
Steve - I wrote up some explanation for the fonts in the next post. I'm hearing some folks saying DevTools crashes on start, although I'm not personally seeing it on my 6 machines. I'll see if there's an easy temporary fix.

Simon - :)
September 17, 2010 18:27
It seems that it is not possible to specify the msapplication-starturl to a different domain. I wanted to create a custom jump list for few websites I use (by creating a .html file on my site) but as soon as I specify different domain, it starts acting real strange (ignores random settings, hides the jump list options).
September 18, 2010 18:28
Scott - this is a cool feature, but why wasn't it implemented using the HTML5 menu markup? : http://dev.w3.org/html5/markup/meta.name.html
nik
September 18, 2010 19:04
Exactly, why is this not using the HTML5 menu markup?

This is totally crazy and browser specific for no good reason.
September 19, 2010 2:41
Nik and Dagda: I don't work for the team but since it's not a "menu" inside the browser's client area, but rather a piece of "meta" information, it made more sense to do it this way. This is also how RSS, OpenID, OpenSearch, FOAF, RDF, and many other technologies are implemented in all browsers, not just IE. It's a totally appropriate use of the META tag. It's only "browser specific" because other browsers haven't implemented it. I'm sure they will. It is OS specific, certainly.
September 19, 2010 8:45
I love that they are blurring the boundary between a "website" and an "application".
September 19, 2010 16:37
I blogged about a simple little trick for either overriding jumplists if you don't like the ones the site provides, or adding your own jumplist items for sites that haven't implemented the feature yet. It's fairly trivial to do, effectively you create your own page which immediately redirects to your actual target, meaning you can define any jumplist items you want.
http://blogs.msdn.com/b/ianm/archive/2010/09/18/creating-your-own-jumplists-for-your-favourite-sites-in-ie9.aspx
September 20, 2010 4:11
Hi

Very interesting!

Off topic but just seen in your post - I see the snipping tool on your list! I use this all the time but it fails for items such as jump lists, right click menus and more!

Currently, I use print screen, paste to paint then snipping tool out of paint! There must be a better way and as you have a lot of pictures in your blog, just wondering what you use?
Wil
September 20, 2010 5:14
Try http://www.windowclippings.com
September 20, 2010 5:53
Many thanks
Wil
September 20, 2010 11:10
This is awesome...who will not like to have some meta-tags and have IE9 stuff in Windows 7 task bar.

Excellent feature :)
September 26, 2010 10:08
Seems we are not alone in disagreeing with the anti-meta stance:

http://blog.theamazingrando.com/pinned-menus-with-the-link-element

Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.