alive with activity tiles, notifications, and background tasks
DESCRIPTION
Alive with activity Tiles, notifications, and background tasks. Kraig Brockschmidt Senior Program Manager, Windows Ecosystem Team Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript 3-159. Agenda. Visual tour: understanding the user experience. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/1.jpg)
![Page 2: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/2.jpg)
Alive with activityTiles, notifications, and background tasksKraig BrockschmidtSenior Program Manager, Windows Ecosystem TeamAuthor, Programming Windows 8 Apps with HTML, CSS, and JavaScript3-159
![Page 3: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/3.jpg)
AgendaVisual tour: understanding the user experience.Three ways an app configures updates.The role of background tasksfor notifications.Writing and debugging web services for notifications.Windows Azure Mobile Services for push notifications.
![Page 4: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/4.jpg)
How do we create an environment that’s “alive with activity” without having apps running all the time?
![Page 5: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/5.jpg)
A visual tourDemo
![Page 6: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/6.jpg)
Live tiles
Updates include square, wide, and large tiles.
Tiles updated using pre-defined templates.
Text-only, image-only or combination.
JPEG, GIF, or PNG, max size 200 KB, max 1024 px size.
Optional “peek” animation.
Local, scheduled, periodic, and push updates.
![Page 7: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/7.jpg)
![Page 8: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/8.jpg)
Toast templates
![Page 9: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/9.jpg)
The lock screen
App content
![Page 10: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/10.jpg)
Issue direct updates, perhaps using queue, scheduled, and expiring updates.Tell Windows a service URL where it can obtain periodic updates (can be specified in app manifest).Obtain a Windows Push Notification Service (WNS) channel and have a service send notifications there.These actions can happen from app code or background tasks.
There are three ways an app configures thisto happen.
Alive with activity without apps running
![Page 11: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/11.jpg)
Choices: tile template catalog, badge catalog, toast template catalog, plus toast audio options catalog.Tile catalog also shows many suggested uses.
Whoever issues an update builds the XML.URIs for images can use http[s]://, ms-appx:///, or ms-appdata:///local/
Notifications Extensions Library provides an object model.Reduces mistakes that cause updates to not show.
Tiles, badges, and toasts are bits of XML that come from predefined templates (promotes unity/avoids chaos).
What makes an update?
![Page 12: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/12.jpg)
XML badge update schema<?xml version = "1.0" encoding = "utf-8" ?><badge value = "1-99" | "none" | "activity" | "alert" | "available" | "away" | ... version? = "integer" />
Note: version for <badge> is 1 in Windows 8, 2 in 8.1 Preview
![Page 13: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/13.jpg)
XML tile update schema
Best practice: use updates that include all tile sizes
<?xml version="1.0" encoding="utf-8" ?><tile> <visual version? = "integer" lang? = "string" baseUri? = "anyURI" branding? = "string" addImageQuery? = "boolean" >
<!-- One or more binding elements: *always place large tiles last* --> <binding template = "TileSquare150x150Image" | "TileSquare150x150Block" | ... fallback? = "TileSquareImage" | "TileSquareBlock" | ... contentId = "string" lang? = "string" baseUri? = "anyURI" branding? = "string" addImageQuery? = "boolean" >
<!-- Some combination of image and text. id's used to de-dupe updates --> <image id = "integer" src = "string" alt? = "string" addImageQuery? = "boolean" /> <text id = "integer" lang? = "string" /> </binding> </visual></tile>
Set version to “2” to enableWindows 8.1 Preview templates
![Page 14: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/14.jpg)
XML toast notification schema<?xml version="1.0" encoding="utf-8" ?><toast launch? = "string" duration? = "long" | "short" > <visual version? = "integer" lang? = "string" baseUri? = "anyURI" branding? = "string" addImageQuery? = "boolean" >
<binding template = "ToastImageAndText01" | "ToastImageAndText02" | ...="" fallback? = "string" lang? = "string" baseUri? = "anyURI" branding? = "string" addImageQuery? = "boolean" >
<!-- Some number of child elements --> <image id = "integer" src = "string" alt = "string" addImageQuery? = "boolean" /> <text id = "integer" lang? = "string" /> </binding> </visual>
<!-- Optional audio --> <audio src? = "ms-winsoundevent:Notification.Default" |... loop? = "boolean" silent? = "boolean" /></toast>
![Page 15: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/15.jpg)
Secondary tilesIncreases Start screen presence: launch leads to relevant content.Exposes a personalized surface for app: roamed by default to other devices.Tiles created by “pinning” content from app: can include multiple images and size options.Pin initiated by app via simple runtime call.User confirms pin operation via system UI and chooses a size and image (in a FlipView).Same update capabilities as app tiles.See Windows.UI.StartScreen.SecondaryTiles class and
Secondary Tiles Sample.
![Page 16: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/16.jpg)
Issuing updates from the appRunning app orbackground task.
Tile and badge API.
Toast API.
In Windows.UI.Notifications namespace:TileNotification >> TileUpdater, SecondaryTileUpdaterBadgeNotification >> BadgeUpdaterToastNotification >> ToastNotifier
Updates appear immediately
![Page 17: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/17.jpg)
Scheduled notifications
In Windows.UI.Notifications namespace:ScheduledTileNotification >> TileUpdater, SecondaryTileUpdaterScheduledToastNotification >> ToastNotifier
Running app orbackground task.
Scheduled notification API.
Queue
System processSuspendedor not running.
![Page 18: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/18.jpg)
Configuring periodic updatesRunning app, background task, or manifest.
Tile and badge updater API.
Suspendedor not running.
URI System process30 minutes to 24 hours frequency per service
HTTP requestWeb service.
In Windows.UI.Notifications namespace:TileUpdater.StartPeriodicUpdate and StartPeriodicUpdateBatchBadgeUpdater.StartPeriodicUpdate
Set in manifest to have live tile before first launch.
![Page 19: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/19.jpg)
Configuring periodic updates in manifest
<m2:TileUpdate Recurrence="halfHour" UriTemplate="http://my.service.com/tileupdates.aspx?lang={language}" />
Applies only to tiles (not badges).Periodic updates start when app is installed.Calls to tile updater API replace the manifest configuration.Cycling must be enabled from the running app, however.
![Page 20: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/20.jpg)
Writing and debugging a periodic update service
Demo
![Page 21: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/21.jpg)
Configuring push notificationsRunning app orbackground task.
Channel request API.
Suspendedor not running.
Web service.
Running app: PushNotificationChannel.PushNotificationReceived event(in Windows.Networking.PushNotifications namespace).
Background task: PushNotificationTrigger.
WNS
Send update Push updates to
client (tile, badge, toast, raw)
Send channel to web service
![Page 22: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/22.jpg)
Register the app via Store dashboard
![Page 23: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/23.jpg)
Writing and debugging aservice for WNS
Demo
![Page 24: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/24.jpg)
Building a Cloud Service with Window Azure
Azure Mobile Service for Push NotificationsSecure service API for channel URI registration: use a database where client-side insertions translate to HTTP requests.Server-side insertion scripts or scheduled jobs can trigger push notifications to other devices/users.Use push.wns.send*(<channel>, <updates>) to send.See session WCL-116 for more demos.See http://bit.ly/YgviPT blog for details.
Also check out partner offerings:
Urban Airship(http://urbanairship.com)
Push.io(http://push.io)
![Page 25: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/25.jpg)
Background tasks for notificationsMaintenance triggers: monitor state changes, renew WNS channels.
System triggers: AC power, non-lock screen.InternetAvailable, NetworkStateChange for connectivity.LockScreenApplication[Added | Removed].ServicingComplete app has been updated.
Lock screen triggers: AC or battery power.ControlChannelTrigger (sockets for RTC), TimeTrigger, SessionConnected, UserAway, UserPresent.PushNotificationTrigger to receive raw notifications.
All tasks subject to CPU and network activity quotas.Independent of main app (can use mixed languages).
![Page 26: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/26.jpg)
Renewing WNS channels (register task, C#)using Windows.ApplicationModel.Background;
BackgroundTaskBuilder taskBuilder = new BackgroundTaskBuilder();MaintenanceTrigger trigger = new MaintenanceTrigger( 10 * 24 * 60, false); //10 * 24 * 60 == 10 daystaskBuilder.SetTrigger(trigger);//In JavaScript, taskEntryPoint is the path of a .js filetaskBuilder.TaskEntryPoint = "PushNotificationsHelper.MaintenanceTask";taskBuilder.Name = "UpdateChannels";
SystemCondition internetCondition = new SystemCondition( SystemConditionType.InternetAvailable);taskBuilder.AddCondition(internetCondition);taskBuilder.Register();
![Page 27: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/27.jpg)
Renewing WNS channels (task, C#)using System;using System.Threading.Tasks;using Windows.ApplicationModel.Background;
namespace PushNotificationsHelper { public sealed class MaintenanceTask : IBackgroundTask { public void Run(IBackgroundTaskInstance taskInstance) { // This is a helper function to renew WNS channels. // Important here to not block the UI thread. Notifier notifier = new Notifier(); notifier.RenewAllAsync(false).AsTask().Wait(); } }}
![Page 28: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/28.jpg)
Renewing WNS channels (task, JavaScript)// This code runs as a web worker(function () { // Import the Notifier helper object importScripts("//Microsoft.WinJS.1.0/js/base.js"); importScripts("notifications.js");
var closeFunction = function () { close(); // This is worker.close };
var notifier = new SampleNotifications.Notifier(); notifier.renewAllAsync().done(closeFunction, closeFunction);})();
![Page 29: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/29.jpg)
Receiving raw notification (register task, C#)using Windows.ApplicationModel.Background;using Windows.Networking.PushNotifications;
BackgroundTaskBuilder taskBuilder = new BackgroundTaskBuilder();PushNotificationTrigger trigger = new PushNotificationTrigger();taskBuilder.SetTrigger(trigger);taskBuilder.TaskEntryPoint = "BackgroundTasks.RawNotification";taskBuilder.Name = "ReceiveRawNotification";taskBuilder.Register();
![Page 30: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/30.jpg)
Receiving raw notification (task, C#)using System.Diagnostics;using Windows.ApplicationModel.Background;using Windows.Networking.PushNotifications;using Windows.Storage;
namespace BackgroundTasks { public sealed class RawNotification : IBackgroundTask { public void Run(IBackgroundTaskInstance taskInstance) { // Get the background task details ApplicationDataContainer settings = ApplicationData.Current.LocalSettings;
// Store the content received from the notification so it // can be retrieved from the UI. RawNotification notification = (RawNotification)taskInstance.TriggerDetails; settings.Values[taskName] = notification.Content; } }}
![Page 31: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/31.jpg)
Capability summary for notificationsNotification type
Cycling
Scheduled
Expiring
Recurring
Audio
Periodic
Push
Tile ✔ ✔ ✔ ✔ ✔Badge ✔ ✔ ✔Toast ✔ ✔ ✔ ✔ ✔Raw ✔
![Page 32: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/32.jpg)
3-116: Developing Apps with Windows Azure Mobile Services.3-071: Lighting Up Your Site on Windows 8.1 (Live Tiles for Web Sites).3-108: Running Apps in the Background Using Background Tasks.
Related sessions
![Page 33: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/33.jpg)
Alive with Activity: 3-part series on the Windows Developer BlogUX Guidelines: Tiles and Notifications sectionWorking with tiles, badges, and toast notifications See Windows 8.1 Samples:• App tiles and badges sample• Secondary tiles sample• Push and periodic notifications sample• Raw notifications sample• Lock screen apps sample
Programming Windows 8 Apps in HTML, CSS, and JavaScriptSecond edition preview: http://aka.ms/SecondEdition/FirstPreview
Resources
![Page 34: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/34.jpg)
Develop: http://dev.windows.com Design: http://design.windows.com/ Samples: Windows 8.1 SamplesVideos: http://channel9.msdn.com/Windows
Resources
![Page 35: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/35.jpg)
Evaluate this session
Scan this QR code to evaluate this session and be automatically entered in a drawing to win a prize!
![Page 36: Alive with activity Tiles, notifications, and background tasks](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816685550346895dda2d0a/html5/thumbnails/36.jpg)
© 2013 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.