Scott Hanselman

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

September 15, '10 Comments [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. I am a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Wednesday, September 15, 2010 7:22:16 PM UTC
Whoa. Me likey :)
Sam
Wednesday, September 15, 2010 7:25:24 PM UTC
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.
Wednesday, September 15, 2010 8:01:32 PM UTC
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.
Wednesday, September 15, 2010 8:14:17 PM UTC
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.
Wednesday, September 15, 2010 8:25:54 PM UTC
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.
Wednesday, September 15, 2010 8:25:55 PM UTC
Pretty phat. Would have been nice to see MS do it in a little more open fashion so Chrome could tap into Win7 goodness.
Wednesday, September 15, 2010 8:52:21 PM UTC
More open how? Chrome could totally implement this, just as they did AeroPeek in Chrome 5.
Wednesday, September 15, 2010 8:58:27 PM UTC
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.
Wednesday, September 15, 2010 9:06:13 PM UTC
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?
Wednesday, September 15, 2010 9:13:08 PM UTC
Can I install IE9 and keep IE8 so that I can continue devlopment work with IE8 and test against IE9 as well?
CraigAP
Wednesday, September 15, 2010 9:15:24 PM UTC
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
Wednesday, September 15, 2010 9:20:25 PM UTC
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.
Wednesday, September 15, 2010 9:29:18 PM UTC
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?
Wednesday, September 15, 2010 9:44:05 PM UTC
That is all sorts of awesome! I never thought I'd say this, but I really like how Internet Explorer is evolving.
Wednesday, September 15, 2010 10:12:10 PM UTC
This is sooo awesome! I have my own Hanselbutton on my taskbar! ;)
Wednesday, September 15, 2010 10:24:10 PM UTC
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.
Blake
Wednesday, September 15, 2010 10:48:09 PM UTC
Shift-drag makes a regular link.
Scott Hanselman
Wednesday, September 15, 2010 11:10:25 PM UTC
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?
Blake
Wednesday, September 15, 2010 11:57:21 PM UTC
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?
CraigAP
Thursday, September 16, 2010 12:22:51 AM UTC
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.
Maxim
Thursday, September 16, 2010 1:54:19 AM UTC
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/
Thursday, September 16, 2010 3:12:45 AM UTC
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.
Thursday, September 16, 2010 5:08:35 AM UTC
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?
Thursday, September 16, 2010 5:55:23 AM UTC
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
Thursday, September 16, 2010 8:24:01 AM UTC
Excellent and the next step is MS_HTML5.

Just like we had XDR schemas and all the other MS bastardised standards etc., etc., etc.
Thursday, September 16, 2010 8:33:03 AM UTC
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?
Thursday, September 16, 2010 8:50:06 AM UTC
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.
Thursday, September 16, 2010 8:53:15 AM UTC
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.
Thursday, September 16, 2010 8:54:41 AM UTC
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 :)
Thursday, September 16, 2010 8:59:25 AM UTC
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.
Thursday, September 16, 2010 9:44:03 AM UTC
"Google it with Bing" pretty much sums up why I love reading your stuff.
Thursday, September 16, 2010 12:07:10 PM UTC
IE9 crashes when I open up Dev tools. Unusable in it's present form

32 bit install
Steve
Thursday, September 16, 2010 12:10:11 PM UTC
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
Steve
Thursday, September 16, 2010 2:45:54 PM UTC
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.
Thursday, September 16, 2010 6:11:23 PM UTC
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 - :)
Friday, September 17, 2010 2:27:46 PM UTC
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).
Saturday, September 18, 2010 2:28:34 PM UTC
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
Saturday, September 18, 2010 3:04:35 PM UTC
Exactly, why is this not using the HTML5 menu markup?

This is totally crazy and browser specific for no good reason.
Saturday, September 18, 2010 10:41:45 PM UTC
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.
Sunday, September 19, 2010 4:45:59 AM UTC
I love that they are blurring the boundary between a "website" and an "application".
Sunday, September 19, 2010 12:37:41 PM UTC
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
Ian Moulster
Monday, September 20, 2010 12:11:46 AM UTC
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
Monday, September 20, 2010 1:14:16 AM UTC
Try http://www.windowclippings.com
Scott Hanselman
Monday, September 20, 2010 1:53:12 AM UTC
Many thanks
Wil
Monday, September 20, 2010 7:10:25 AM UTC
This is awesome...who will not like to have some meta-tags and have IE9 stuff in Windows 7 task bar.

Excellent feature :)
Sunday, September 26, 2010 6:08:04 AM UTC
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.