IE Pinned Sites Part 9: Patterns to make your pinned site code play nice in all browsers

In the last 4 blog posts, I’ve demonstrated using JavaScript to create various experiences in your pinned site (dynamic Jump List categories, overlay icons, thumbnail toolbar buttons, and flashing taskbar buttons). 

You may have been wondering if this JavaScript would play nicely in a browser other than Internet Explorer 9.  Fair question!  In this post, I’ll show you two patterns for making your pinned site code play nice in all browsers. 

Pattern 1

The first pattern is a try/catch pattern.  Wrap your existing pinned site code inside the try block.  Errors will be swallowed in the catch block.

 try {
    if (window.external.msIsSiteMode()) {
        // Your pinned site code goes here.
    }
}
catch (e) { }

Pattern 2

The second pattern checks for the existence of the msAddSiteMode type before proceeding. 

 if (typeof window.external.msAddSiteMode != "undefined") {
    // SiteMode is supported 
    if (window.external.msIsSiteMode()) {
        // Your pinned site code goes here.
    }
} 

For example, here is one of the scripts from the Windows Development Boot Camp site. 

 <script type="text/javascript">
    // Jump list categories
    if (window.external.msIsSiteMode()) {
        window.external.msSiteModeCreateJumplist('Resources');
        window.external.msSiteModeAddJumpListItem('Jennifer Blog', 'https://blogs.msdn.com/jennifer', 'https://windowsdevbootcamp.com/favicon.ico');
        window.external.msSiteModeAddJumpListItem('Twitter', 'https://www.twitter.com/windevbootcamp', 'https://a3.twimg.com/a/1294164987/images/iefavicon.ico');
        window.external.msSiteModeAddJumpListItem('Silverlight 4', 'https://bit.ly/dvR7Hb', 'https://windowsdevbootcamp.com/favicon.ico');
        window.external.msSiteModeAddJumpListItem('Internet Explorer 9', 'https://bit.ly/b9HBZu', 'https://windowsdevbootcamp.com/favicon.ico');
        window.external.msSiteModeAddJumpListItem('Windows 7 Training Kit for Developers', 'https://bit.ly/cXaJ1u', 'https://windowsdevbootcamp.com/favicon.ico');
        window.external.msSiteModeAddJumpListItem('Windows API Code Pack', 'https://bit.ly/bGKULt', 'https://windowsdevbootcamp.com/favicon.ico');
        window.external.msSiteModeShowJumplist();
    }
</script>

If I leave the script like that, it will throw an error (which I can see in Firebug) when I open the site in Firefox.  (Note that this error is suppressed if a non-developer user opened the site in Firefox normally, so they wouldn’t see anything.  But using Firebug, we can see that there is an error.) 

Now, let me wrap the script with one of the patterns described above.

 <script type="text/javascript">
    // Jump list categories
    if (typeof window.external.msAddSiteMode != "undefined") {
        if (window.external.msIsSiteMode()) {
            window.external.msSiteModeCreateJumplist('Resources');
            window.external.msSiteModeAddJumpListItem('Jennifer Blog', 'https://blogs.msdn.com/jennifer', 'https://windowsdevbootcamp.com/favicon.ico');
            window.external.msSiteModeAddJumpListItem('Twitter', 'https://www.twitter.com/windevbootcamp', 'https://a3.twimg.com/a/1294164987/images/iefavicon.ico');
            window.external.msSiteModeAddJumpListItem('Silverlight 4', 'https://bit.ly/dvR7Hb', 'https://windowsdevbootcamp.com/favicon.ico');
            window.external.msSiteModeAddJumpListItem('Internet Explorer 9', 'https://bit.ly/b9HBZu', 'https://windowsdevbootcamp.com/favicon.ico');
            window.external.msSiteModeAddJumpListItem('Windows 7 Training Kit for Developers', 'https://bit.ly/cXaJ1u', 'https://windowsdevbootcamp.com/favicon.ico');
            window.external.msSiteModeAddJumpListItem('Windows API Code Pack', 'https://bit.ly/bGKULt', 'https://windowsdevbootcamp.com/favicon.ico');
            window.external.msSiteModeShowJumplist();
        }
    }
</script>

If I open the site using Firefox again, I don’t see any errors in Firebug. 

In my final post tomorrow, we will wrap up this IE Pinned Site series with some pinned site resources. 

Other Blog Posts in this Series

IE Pinned Sites Part 1: What Are Pinned Sites?

IE Pinned Sites Part 2: Why Implement Pinned Sites?

IE Pinned Sites Part 3: How to implement basic site properties

IE Pinned Sites Part 4: How to implement Jump List Tasks

IE Pinned Sites Part 5: How to implement dynamic Jump List Categories

IE Pinned Sites Part 6: How to implement Overlay Icons

IE Pinned Sites Part 7: How to implement Thumbnail Toolbar Buttons

IE Pinned Sites Part 8: How to implement a Flashing Taskbar Button

IE Pinned Sites Part 9: Patterns to make your pinned site code play nice in all browsers

IE Pinned Sites Part 10: Pinned Site Resources