How do you update a Pinned Site in IE9? (The One Constant in Code is Change!)
I love pinned sites in IE9, they really are cool, and they are good business. At the last IE9 code camp, I was asked “If someone has pinned your site to their taskbar, how can you update the pinned functionality?” Great question! I did a little digging and wanted to share what I found out. Since there are different aspects of the pinned site to update, I will break this up into a series.
Quick aside, if you aren’t familiar with pinned sites, go to a site which implements pinning such as cbc.ca, globeandmail.ca, or RottenTomatoes.com and drag the tab down to your taskbar to check it out. For instructions on how to pin your own site check out BuildMyPinnedSite.com.
Part 1 - Updating Your Static Jump List
Let’s start with a pinned site that has a static jump list users can launch to navigate to different parts of the website. My website is called Hockey Mom, and I use it to keep track of my son’s endless series of hockey practices and games! I have set it up as a pinned site with a jump list that allows me to go straight to the schedule or to maps of all the different hockey arenas.
I have two meta tags that define the static jump list.
<meta name="msapplication-task" content="name=Schedule;action-uri=./schedule.html;icon-uri=./favicon.ico" />
<meta name="msapplication-task" content="name=Arenas;action-uri=./ArenaMaps.html;icon-uri=./favicon.ico" />
In my meta data I specify two elements with a name of msapplication-task. Each defines one menu item in my jump list. The name attribute determines the text that appears in the jump list, the action-uri determines the URL to navigate to if that item is selected, and the icon-uri determines the icon to display beside the text in the jump list.
When I pin my site and display the jump list, it looks like this:
A few weeks into the season, my son keeps asking me to check how his team is doing in the standings. So I decide to add Standings to my static jump list.
I update my meta tags and add the new item to my static jump list
<meta name="msapplication-task" content="name=Schedule;action-uri=./schedule.html;icon-uri=./favicon.ico" />
<meta name="msapplication-task" content="name=Arenas;action-uri=./ArenaMaps.html;icon-uri=./favicon.ico" />
<meta name="msapplication-task" content="name=Standings;action-uri=./Standings.html;icon-uri=./favicon.ico" />
I build and deploy the new website. If I right click my pinned site icon, it has no idea that the website has defined new items for the jump list and I still see the old jump list appear. So that brings us to the million dollar question how does someone who has already pinned your site, pick up your new jump list?
It turns out the next time I launch the site from my pinned site icon, the changes will be picked up.
So after you have launched the updated site from your pinned site icon, you will see the updated Static Jump List. No Muss No Fuss. I know anticlimactic wasn’t it? But when you are trying to send out updates for your code, isn’t that a good thing? Next week we’ll look at how to update the dynamic jump list (there is a little twist to dynamic jump lists)
Today’s My 5:
5 Features You Can Add to a Pinned Site.
You can find instructions and code examples for all of these features at BuildMyPinnedSite.com
1. Favicon - Highlight your site logo! Why display an Internet Explorer logo when you can highlight your brand!
2. Static Jump List – Why limit users to starting at the home page, let them jump straight into the site
3. Dynamic Jump List – Increase the users choices with a dynamic jump list that can change based on what parts of the site you want to highlight week to week.
4: Thumbnail Preview Controls – Make your website feel even more like a native applicaiton by giving the user the ability to perform actions on the site directly from the pinned icon using thumbnail controls.
5: Notifications – Use overlay icons to notify a user when there is no content on your site.