Tiles and NotificationsJason FoxPremier Field EngineerMicrosoft

AgendaBasic Tiles

Live Tiles

Toast Notifications

You’ll leave with examples of how to:

Create compelling tiles and notifications that bring users back to your app

Windows Push Notification Service

Make your app appear alive with activity using Tiles and Notifications

Tiles

Wide (2x1)Square (1x1)

Basic Tiles

Both sizes can have live updates

Tap on tile to launch or switch to an app

Static default tile specified in app manifest

Two sizes:

Live Tiles

Templates provide rich rendering options

Tiles updated using pre-defined templates

Text-only, image-only or combination

JPEG or PNG only, max size 150 KB

Optional “peek” animation

Local or cloud updates

Notification Queuing

Opt-in to automatically cycle tile through last five notifications

By default only last notification shown

JS: Creating a Basic Tilevar Notifications = Windows.UI.Notifications;

//Pick a template for your tile and get its XML contentsvar tileXml = Notifications.TileUpdateManager.getTemplateContent(

Notifications.TileTemplateType.tileWideText03); //Supply template content through document object model (DOM) methodsvar tileAttributes = tileXml.getElementsByTagName("text"); tileAttributes[0].appendChild(tileXml.createTextNode("My very own tile notification"));

var squareTileImageAttributes = tileXml.getElementsByTagName("image"); squareTileImageAttributes[0].setAttribute("src", "ms-resource:images/graySquare.png");

//Create the notification based on the XML content you've specifiedvar tileNotification = new Notifications.TileNotification(tileXml);

//Send the notification to the app tile.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

C#: Creating a Basic Tilevar updater = TileUpdateManager.CreateTileUpdaterForApplication();

//tell the updater to cycle through the queueupdater.EnableNotificationQueue(true);//use this for square image and textvar tileTemplate = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareImage);var xDocument = System.Xml.Linq.XDocument.Parse(tileTemplate.GetXml());

xDocument.Root.Element("visual").Element("binding").Element("image").Attribute(XName.Get("src")).Value =

imageUri;

//set this for wide image and textWindows.Data.Xml.Dom.XmlDocument xmlDocument = new Windows.Data.Xml.Dom.XmlDocument();xmlDocument.LoadXml(xDocument.ToString());

var tileNotification = new TileNotification(xmlDocument);updater.Update(tileNotification);

Square and Wide Tile in One XML<tile> <visual lang="en-US"> <binding template="TileSquareImage"> <image id="1" src="ms-appx:///images/graySquare.png"/> </binding>

<binding template="TileWideImageAndText01"> <image id="1" src="ms-appx:///images/redWide.png"/> <text id="1">This tile uses images</text> </binding> </visual></tile>

Badges

• Overlays status on top of tile• Supports square and wide tiles• Number up to 99 or pre-defined glyph

• Always visible on top of images

BadgeBadge

Updating a Badgevar Notifications = Windows.UI.Notifications;

// Select to display a numbervar badgeXml = Notifications.BadgeUpdateManager.getTemplateContent(

Notifications.BadgeTemplateType.badgeNumber);

// Assign a value to the badgevar badgeAttributes = badgeXml.getElementsByTagName("badge");badgeAttributes[0].setAttribute("value", "7");

// Create the badge notification and send it to the badgevar badgeNotification = new Notifications.BadgeNotification(badgeXml); Notifications.BadgeUpdateManager.createBadgeUpdaterForApplication().update(

badgeNotification);

Secondary Tiles

• Tiles created by “pinning” content from app• Pin initiated by app via simple runtime call• Exposes a personalized surface for app• Same capabilities as app tiles• Launch leads to relevant content• User confirms pin operation via system UI

Best Practices for Tiles

• Display new, tailored and engaging content to the user• Keep tile fresh by updating as your app content

changes• Reference content that lives on your app’s home page

so the user can find it easily.• Keep content safely ignorable and glanceable - for

short messages only• Use square size if tile is not live• Don’t display ads

Toast Notifications

Toast Notifications

• Toast notifications deliver transient messages outside the context of the app

• Use toast notifications to get user’s attention immediately

• User is in control and can permanently turn off toast notifications from your app

• Allows quick navigation to a contextually relevant location in your app

• Toast notifications are easy to invoke from your app or from the cloud

• Can be sent from Desktop app as well

Toast TemplatesToast notifications use the same template architecture as Live Tiles

Rich set of rendering options available

Best Practices for Toasts

• Use for real-time, personal content such as IM, Call, or Mail

• Provide glanceable information - for familiar, short messages only

• Show enough information for the user to decide to react

• Use with tiles and badges to help users find what they missed

• Show toast only when app is in the background• Don’t assume user will see every toast (there is no

history)

Four kinds of notifications• Local Notifications

Used only when your app is running. Most useful for updating tiles and badges, limited use for toast. Ex. Music app updates “playing” status on tile

• Scheduled Notifications Schedule ‘preformed’ toast for a precise time. Ex. Calendar app sets a reminder

• Periodic: Regularly at fixed time interval Ex. Weather app

• Push Notifications Update tiles, show badges and raise toast from the cloud

(even if your app isn’t running).

Windows Notification Service(WNS)

Windows Notification ServiceEnables delivery of tile and toast notifications over the internet.Tile updates and notifications shown to the user even if your app is not running.

WNS handles communication with your app

Scales to millions of users

WNS is a free service for your app to use

Push Notification OverviewWindows 8 Cloud Service

Windows Notification

Service

Win Store App

Notification

Client Platform

2

3

1 3

1. Request Channel URI

2. Register with your Cloud Service

3. Authenticate & Push Notification

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION