tiles and notifications by jason fox
TRANSCRIPT
![Page 1: Tiles and Notifications by Jason Fox](https://reader036.vdocuments.mx/reader036/viewer/2022062704/5560b5bed8b42af93b8b4a5c/html5/thumbnails/1.jpg)
Tiles and NotificationsJason FoxPremier Field EngineerMicrosoft
![Page 2: Tiles and Notifications by Jason Fox](https://reader036.vdocuments.mx/reader036/viewer/2022062704/5560b5bed8b42af93b8b4a5c/html5/thumbnails/2.jpg)
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
![Page 3: Tiles and Notifications by Jason Fox](https://reader036.vdocuments.mx/reader036/viewer/2022062704/5560b5bed8b42af93b8b4a5c/html5/thumbnails/3.jpg)
Make your app appear alive with activity using Tiles and Notifications
![Page 4: Tiles and Notifications by Jason Fox](https://reader036.vdocuments.mx/reader036/viewer/2022062704/5560b5bed8b42af93b8b4a5c/html5/thumbnails/4.jpg)
Tiles
![Page 5: Tiles and Notifications by Jason Fox](https://reader036.vdocuments.mx/reader036/viewer/2022062704/5560b5bed8b42af93b8b4a5c/html5/thumbnails/5.jpg)
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:
![Page 6: Tiles and Notifications by Jason Fox](https://reader036.vdocuments.mx/reader036/viewer/2022062704/5560b5bed8b42af93b8b4a5c/html5/thumbnails/6.jpg)
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
![Page 7: Tiles and Notifications by Jason Fox](https://reader036.vdocuments.mx/reader036/viewer/2022062704/5560b5bed8b42af93b8b4a5c/html5/thumbnails/7.jpg)
![Page 8: Tiles and Notifications by Jason Fox](https://reader036.vdocuments.mx/reader036/viewer/2022062704/5560b5bed8b42af93b8b4a5c/html5/thumbnails/8.jpg)
Notification Queuing
Opt-in to automatically cycle tile through last five notifications
By default only last notification shown
![Page 9: Tiles and Notifications by Jason Fox](https://reader036.vdocuments.mx/reader036/viewer/2022062704/5560b5bed8b42af93b8b4a5c/html5/thumbnails/9.jpg)
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);
![Page 10: Tiles and Notifications by Jason Fox](https://reader036.vdocuments.mx/reader036/viewer/2022062704/5560b5bed8b42af93b8b4a5c/html5/thumbnails/10.jpg)
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);
![Page 11: Tiles and Notifications by Jason Fox](https://reader036.vdocuments.mx/reader036/viewer/2022062704/5560b5bed8b42af93b8b4a5c/html5/thumbnails/11.jpg)
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>
![Page 12: Tiles and Notifications by Jason Fox](https://reader036.vdocuments.mx/reader036/viewer/2022062704/5560b5bed8b42af93b8b4a5c/html5/thumbnails/12.jpg)
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
![Page 13: Tiles and Notifications by Jason Fox](https://reader036.vdocuments.mx/reader036/viewer/2022062704/5560b5bed8b42af93b8b4a5c/html5/thumbnails/13.jpg)
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);
![Page 14: Tiles and Notifications by Jason Fox](https://reader036.vdocuments.mx/reader036/viewer/2022062704/5560b5bed8b42af93b8b4a5c/html5/thumbnails/14.jpg)
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
![Page 15: Tiles and Notifications by Jason Fox](https://reader036.vdocuments.mx/reader036/viewer/2022062704/5560b5bed8b42af93b8b4a5c/html5/thumbnails/15.jpg)
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
![Page 16: Tiles and Notifications by Jason Fox](https://reader036.vdocuments.mx/reader036/viewer/2022062704/5560b5bed8b42af93b8b4a5c/html5/thumbnails/16.jpg)
Toast Notifications
![Page 17: Tiles and Notifications by Jason Fox](https://reader036.vdocuments.mx/reader036/viewer/2022062704/5560b5bed8b42af93b8b4a5c/html5/thumbnails/17.jpg)
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
![Page 18: Tiles and Notifications by Jason Fox](https://reader036.vdocuments.mx/reader036/viewer/2022062704/5560b5bed8b42af93b8b4a5c/html5/thumbnails/18.jpg)
Toast TemplatesToast notifications use the same template architecture as Live Tiles
Rich set of rendering options available
![Page 19: Tiles and Notifications by Jason Fox](https://reader036.vdocuments.mx/reader036/viewer/2022062704/5560b5bed8b42af93b8b4a5c/html5/thumbnails/19.jpg)
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)
![Page 20: Tiles and Notifications by Jason Fox](https://reader036.vdocuments.mx/reader036/viewer/2022062704/5560b5bed8b42af93b8b4a5c/html5/thumbnails/20.jpg)
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).
![Page 21: Tiles and Notifications by Jason Fox](https://reader036.vdocuments.mx/reader036/viewer/2022062704/5560b5bed8b42af93b8b4a5c/html5/thumbnails/21.jpg)
Windows Notification Service(WNS)
![Page 22: Tiles and Notifications by Jason Fox](https://reader036.vdocuments.mx/reader036/viewer/2022062704/5560b5bed8b42af93b8b4a5c/html5/thumbnails/22.jpg)
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
![Page 23: Tiles and Notifications by Jason Fox](https://reader036.vdocuments.mx/reader036/viewer/2022062704/5560b5bed8b42af93b8b4a5c/html5/thumbnails/23.jpg)
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
![Page 24: Tiles and Notifications by Jason Fox](https://reader036.vdocuments.mx/reader036/viewer/2022062704/5560b5bed8b42af93b8b4a5c/html5/thumbnails/24.jpg)
© 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