PDC 2010: Taking Advantage of Pinned Sites with Internet Explorer 9 and Windows 7

Following is a summary of the session “Taking Advantage of Pinned Sites with Internet Explorer 9 and Windows 7” presented by Israel Hilerio, Program Manager in Internet Explorer Team at Microsoft, in PDC 2010.

This talk shows how you can add integration of your site into the Windows 7 taskbar.

Pinned Sites

Goals for having pinned sites in Internet Explorer 9:

• Closer relationship between users and their favorite sites
• Allow web sites to promote their brand outside of the browser
• Seamless integration of web sites into desktop experience
• Web sites interact with users like Windows applications
• Web sites control the user interaction and navigation
• Available to any website

Pinning a Site to the Taskbar

• All pinning is user initiated! No public APIs for pinning.
• Two ways to pin a website
• Tear off a tab, and drag it to the Taskbar
• Drag the favicon from the address bar to the Taskbar
• After a site is pinned, the browser UI is updated to promote the site
• The back and forward buttons are colored after the favicon
• The site’s favicon brands the browsing experience
• Selecting the top left favicon navigates users to the initially pinned page

Setting Site-wide Properties

Notice that the following functionality should be implemented by the web developers of the site using meta tags.

• Setting application name in the taskbar:

<meta name="application-name" content="Sample Site Mode Application"/>

• Setting a desktop tooltip

<meta name="msapplication-tooltip" content="Start the page in Site Mode"/>

• Setting a start URL, that is the base URL that will be pinned to the taskbar

<meta name="msapplication-starturl" content="http://example.com/start.html"/>

• Define the ideal size for the web site, this will affect the initial window size

<meta name="msapplication-window" content="width=800;height=600"/>

• Define the colors of the navigation buttons

<meta name="msapplication-navbutton-color" content="red"/>

• Setting jump list tasks

<META name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico"/>

Jump List Categories

To create dynamic jump list categories you must use the JavaScript APIs:

• Create the category list

window.external.msSiteModeCreateJumplist('List1');

• Create list items

window.external.msSiteModeAddJumpListItem('Item 1', 'http://host/Item1.html', 'http://host/images/item1.ico');

• Display list

window.external.msSiteModeShowJumplist();

• Clear list

window.external.msSiteModeClearJumplist();

Overlay Icons

To use overlay icons you again use the JavaScript APIs:

• Set overlay icon

window.external.msSiteModeSetIconOverlay('http://host/images/overlay1.ico', 'Overlay 1');

• Hide overlay

window.external.msSiteModeClearIconOverlay();

Thumbnail Toolbar Buttons

This allows you to set button on the thumbnail image in the taskbar:

• Adding a button

btn1 = window.external.msSiteModeAddThumbBarButton('http://host/images/button1.ico', 'button 1');

• Setting an event handler

document.addEventListener('msthumbnailclick', handler1, false);

• Show thumb bar

window.external.msSiteModeShowThumbBar();

Flashing Taskbar Button

Can be used to signal users that the site requires attention

window.external.msSiteModeActivate();

Security Model

Some notes and limitations on the features seen:

• The Start URL is bound to the domain of the webpage
• In a Jump List task, any destination is valid
• When using JavaScript APIs, the URLs are bound to the domain of the webpage

Best Practice

• Start URL should point to a destination page with the meta-tags
• Create all thumbnail buttons on the start URL page
• Hide thumbnail buttons on every page unload
• Define multiple resolutions on the same ICO file for the favicon of the site

Limitation

• Jump List Tasks: Maximum of 5 tasks
• Jump List Categories: Only one category, maximum 20 items, 10 items by default
• Thumbnail toolbar buttons: Maximum 7 buttons

That’s it for now,
Arik Poznanski.