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
Top Related