With Internet Explorer 9 Beta, you can pin a Web site to the Windows 7 taskbar the same way you pin Windows applications. Once pinned, you can launch Web sites directly—just like you launch other things in Windows 7. Pinning a site is as easy as dragging an IE9 tab to the Windows 7 taskbar.
Previously, Web sites didn’t have a direct presence on the PC desktop and you had to effectively “boot twice”—once for the operating system and once for the browser—to get to a site. With Pinned Sites, users have a faster and easier time getting to the Web sites they use most often.
Once a site is pinned, Web developers can use the Pinned Site metadata and methods to add tasks to the taskbar icon’s Jump List, alert users with notification icons, and create thumbnail toolbar buttons to control a site. Adding this functionality to a Web site requires little development cost and offers your site visitors a much better Web experience. Developers can read more about this in User Experiences: Customizing Pinned Sites as well as Pinned Sites: Windows 7 Desktop Integration with Internet Explorer 9, or watch the PDC 2010 session “Taking Advantage of Pinned Sites with Internet Explorer 9 and Windows 7” (fast forward to about the 10 minute point).
New API Documentation
Today we introduce new developer documentation that shows how to use the Pinned Site (aka Site Mode) API to enhance and create great-looking Pinned Sites in Windows 7. This documentation picks up from where the IE Test Drive Site Pinning samples left off, including lots of code that shows how the sample sites were developed.
Four scenarios are presented, each demonstrating an aspect of the Pinned Site capabilities of Internet Explorer 9:
Channel9 Podcast Player Sample: Basics
Jump List containing static tasks
Add basic pinned site functionality to the Channel9 Podcast Player sample, including static Jump List items. Also learn how to promote the Pinned Site functionality of your Web site.
Channel9 Podcast Player Sample: Remote Control
Thumbnail preview window with toolbar
Create thumbnail toolbar buttons to control audio playback in the Channel9 Podcast Player sample.
TweetFeed Sample: Search History
TweetFeed searches added to
custom Jump List category
Insert items into a custom Jump List category based on user interaction with the TweetFeed sample.
TweetFeed Sample: Notifications
Notification icons
Use notification icons to show activity in the TweetFeed sample.
Introduction to Pinned Sites is the best overview of the Pinned Site API. It also explains the benefits of the technology and describes how this functionality can improve user engagement with the sites you develop.
Feature-Detection for Pinned Sites
Feature detection is critical for developing sites that work properly across multiple browsers. Unlike techniques that detect specific browsers or check for the presence of unrelated features, feature detection enables developers to test whether a browser supports a specific feature before using it and allows the developer to test for known issues before applying a workaround (see Same Markup: Writing Cross-Browser Code).
Pinned Site APIs are no different; we encourage the use of feature detection for verifying that Pinned Site functionality is available before using it. The msIsSiteMode method of the external object is the best way to determine whether the Pinned Sites feature is available. The following code provides the correct behavior for using the Pinned Sites API when available and triggering an alternate code path (in the catch clause) when it is not:
try {
if (external.msIsSiteMode()) {
/*Code for when site mode is supported and active*/
}
else {
/* Code for when site mode is supported, but inactive */
}
}
catch (e) {
/*Code for when site mode is not supported */
}
Programming Pinned Sites from Adobe Flash and Microsoft Silverlight
Developers who use Adobe Flash or Microsoft Silverlight controls inside IE9 can also take advantage of the JavaScript Pinned Sites (Site Mode) APIs to integrate their site with the Windows 7 taskbar.
For example, pages that play audio or video using Adobe Flash can add media controls to the page thumbnail (see screen capture below). Developers should call the appropriate Flash Player playback control functions documented here on the ‘msthumbnailclick’ event handler on the Web page. This method uses JavaScript APIs to invoke Flash Player playback control functions.
Flash-generated media controls in Windows 7 taskbar thumbnail
Pages can also use ActionScript to offer users custom jump lists on the Taskbar as explained here. Microsoft Silverlight is capable of the same level of integration. For details on how to do this see this post. The only prerequisite to using this functionality with Flash or Silverlight is that the control be hosted in the IE9 browser, not a standalone application.
Developer Training Available
Starting today, January 17, 2011, Microsoft is conducting a series of Windows Development Boot Camps throughout the United States Central region. The Boot Camp is a one-day deep dive class on client development. The event covers developing for Windows 7, Internet Explorer 9, and Silverlight 4 out-of-browser. Part of this training includes how to use the Pinned Site (Site Mode) APIs to integrate with Windows 7. For more information visit http://www.windowsdevbootcamp.com/.
Pinned Sites provide a fast and easy way to access the Web sites used most often. By providing some of the advanced Pinned Site capabilities described here, you can make your Web site even easier for your site’s visitors to use.
—Israel Hilerio, Ph.D., Principal Program Manager, Internet Explorer