IE Pinned Sites Part 8: How to implement a Flashing Taskbar Button
You have probably seen flashing taskbar buttons before. Perhaps you have an instant messaging program which flashes the taskbar button when a new message comes in? Flashing taskbar buttons are used to signal users that their attention or interaction is needed.
Pinned sites can make their taskbar buttons flash as well. To flash the pinned site taskbar button, use the msSiteModeActivate method.
This will cause the taskbar button of the pinned site to start flashing. Now, notice that there is no deactivate method! The taskbar button will continue to flash* until the user comes back to the site (clicks on it so the window has focus). When the pinned site window comes to the foreground, the flashing will deactivate automatically.
Now, notice something else that falls out of this. We deactivate the flashing by giving the window focus. So, if you call the activate method above when the window already has focus, nothing will happen.
* I’m simplifying it slightly here. The taskbar button won’t actually flash forever. It will flash 20 times, and then the button will stay highlighted until the window comes to the foreground.
A real-world example of a pinned site using a flashing taskbar button is the Southwest Airline Blog, “Nuts about Southwest”. When pinned, this site will flash when they add a new item to their social stream (the panel on the right side of the site). Here is the website, pinned:
Here is the taskbar button flashing (well, you can’t really see it flashing from a picture, but hopefully you get the idea…it blinks orange on and off):
Finally, remember, young Spiderman, with great power comes great responsibility. Just because you can do something doesn’t mean that you should. Flashing taskbar buttons can be very annoying. Make sure that you use them only when they make sense, or you will drive your users crazy. There is some good guidance in this article under “To Flash or Not To Flash”.
My next post will be on patterns to support multiple browsers in pinned site code.
Other Blog Posts in this Series