Windows 8 Metro: Badges and Lock screen notifications

In the previous number of this series I discussed about Tiles. I’ve introduced how you can configure your own application’s tile, both primary and secondary and then I’ve slightly touched the notification topic that allows to make the tile dynamic in the content allowing the application to share information on its surface. This is an useful feature that comes directly from the Windows Phone 7, with the addition of a number of options, sizes and templates, but at the very base, the concept is almost the same.

Windows 8 make a number of step forward on this way. As I will explain during the article, your notifications on the tile are powered once more by a new and interesting tool called “badge”, but the concept of notification about tiles and badges goes outside of the tile perimeter to pervade the important surface of the lock-screen.

What is a badge?

So, what is a badge and most important how it works? As the name suggest, a badge is a small square shape, that you can put on the tile surface to inform about an event or a number. In the image on the side, the badge is the small star on the lower right corner. When the badge is sent to the tile it appears with a sliding animation from the bottom, and this make it easily visible to the user.

Unfortunately you cannot determine the image of the badge but you can only use a predefined set. The set is limited to eleven shapes, reported on the table below. Together with the shapes you can also send numbers from 1 to 100, presenting a badge with the number you sent. When the number is 100 the badge present a "99+" that indicates that there is an undefined number upper to 100.

activity	alert	available	away
busy	newMessage	paused	playing
unavailable	error	attention	1-100

<badge value="???" />

In place of the question marks you can put the name on the head of each shape in the table, or a number. So to present the star, as in the figure above, you can send the following message:

<badge value="alert" />

To send the message you can use the BadgeUpdateManager class, First of all you create the xml message as an instance of XmlDocument, then you create a BadgeNotification providing the xml message and finally you use the CreareBadgeUpdateForApplication() that creates an updater object. This object has an Update method to send the notification. Ok, its a bit over-engineered, but probably this means the system will have more features in the future. Here's the code:

   1: XmlDocument badgeXml = new XmlDocument();

   2: badgeXml.LoadXml("<badge value=\"attention\" />");

   3: BadgeNotification badge = new BadgeNotification(badgeXml);

   4: BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badge);

If you want to be more “compliant”, you can use the GetTemplateContent method that provides an empty template to be filled with the value. As for tiles, this method is probably better then the generated code because in the case of future changes to the message schema, it prevents your application to break its code.

   1: XmlDocument badgeXml = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeGlyph);

   2: XmlElement badgeElement = (XmlElement)badgeXml.SelectSingleNode("/badge");

   3: badgeElement.SetAttribute("value", "attention");

   4: BadgeNotification badge = new BadgeNotification(badgeXml);

   5: BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badge);

Pay attention that badges are supported also for secondary tiles. The difference is in the method you have to call on the BadgeUpdateManager. Using the CreateBadgeUpdaterForSecondaryTile method allows you to specify the tile id and send the notification to a specific secondary tile.

   1: BadgeUpdateManager.CreateBadgeUpdaterForSecondaryTile(TILE_ID).Update(badge);

Finally you may want to clear the badge notification. Nothing is more simple. The updater has a “Clear” method made just for this purpose:

   1: BadgeUpdateManager.CreateBadgeUpdaterForApplication().Clear();

Pushing badges (and tiles) to the lock screen

Once more, having a notification on the tile is important, just because it adds value to the tasks your application accomplish. But if you think at the normal use to whom is subject a mobile device, you can figure out that it will be locked for most of the time. And this takes to the need of being able to push something on the lock screen just because it will be the place where the user will better appreciate a notification.

To use a son-called lock screen notification you have firstly to setup the application. This means to declare in the manifest that it needs to access this feature:

The "badge logo" property is the shape that is used to present notifications. Differently from the tile, the badge shown on the lock screen must have a shape declared because it has to differentiate from notifications of other apps. In this text box you put the path to the “png” image of 24x24 pixel in size. Then you have to choose a type of notification between "Badge" and "Badge and tile text". The difference is that the second will display also changes made to the tile text but the first will only show the updates to the badge.

Pushing on the lock screen is something that is directly related with background tasks and infact, when you setup your application for lock screen notifications, you are required to declare almost a background task activity.  This does not really means that you can update the notification only from the background task, but it means that there is a logical need for a background task, because if you are running the application it is not useful to push notifications on the lock screen (that is not visible until you do not lock the device).

So, when you change the "Lock screen notification" dropdown to something else to "none", the UI will force you to declare a background task from "Control Channel", "Timer" and "Push Notifications". For the topic of this article please select the "Timer" but the options here listed make you aware that a push notification may be a source of a notification on the lock screen. And it is pretty beautiful.

Once you declares the capability, all the things are ready and you have nothing more to do... this is because there is not a way to notify on the lock screen directly. The notification instead is about changes you made on the tiles. So, when you send an update to a badge it is directly reflected to the lock screen. As an example if you send a badge of type "alert", the star will be shown on the tile's corner but also the badge on the lock screen will acquire the same star on its bottom-right corner. The same way if you send a text update to the tile, the test will be automatically shown on the side of the lock screen's badge.

Opt-in for lock screen notifications

No matter if you correctly set up the notifications in the manifest, they are something of invasive and there is not so much room on the lock screen, and this means they simply do not appear. Windows only allows up to seven badges to be displayed from obviously seven different apps. So a choice have to be done by the user. The main way for the user, to decide to put your app on the lock screen, is by the PC Settings. In the "Personalization" section the user is able to choose the "seven knights" that are honoured by the presence on the lock screen.

Your app have to deserve this space providing helpful services to the user. Every time you think to make your application lock-screen enabled, you have firstly stop and ask yourself if the notifications you want to provide may be really value-adding for the final user - or at least for a category of users - and on the basis of the answer to this question decide if it worth the effort for real.

Once you decided for this road the sole additional thing you can do is to "advertise" your capability, asking to the user only once if he wants to enable this feature. If the user confirms, the capability is automatically enabled but if he denies the authorization you can't ask again once more. To ask this question you can use the following code:

   1: BackgroundAccessStatus status = await BackgroundExecutionManager.RequestAccessAsync();

The code asks exactly for the permission to run background services but this also includes the ability to notify on the lock screen. The resulting value informs about the decision of the user and may be useful to decide whether to start or not the background task. Using the GetAccessStatus() method you can query the current status and it is a good thing to do every time the app is started to decide if you can start activities given that the user may have changed his mind.

Tiles, Badges, Notifications and the Simulator

Just before  Just before to start coding there is another information you need to know. While developing with tiles, badges and the notifications you should not use the "simulator", simply because they doesn't work in this environment. I think it is probably a design choice based on the way the simulator works. If you know it does not work, probably you'll not waste time to ask yourself: "what's happen, it is all perfect: for what reason it does not work?". Believe me, I know what I'm saying :)