Alive with activityTiles, notifications, and background tasksKraig BrockschmidtSenior Program Manager, Windows Ecosystem TeamAuthor, Programming Windows 8 Apps with HTML, CSS, and JavaScript3-159

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.

How do we create an environment that’s “alive with activity” without having apps running all the time?

A visual tourDemo

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.

Toast templates

The lock screen

App content

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

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?

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

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

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>

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.

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

Scheduled notifications

In Windows.UI.Notifications namespace:ScheduledTileNotification >> TileUpdater, SecondaryTileUpdaterScheduledToastNotification >> ToastNotifier

Running app orbackground task.

Scheduled notification API.

Queue

System processSuspendedor not running.

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.

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.

Writing and debugging a periodic update service

Demo

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

Register the app via Store dashboard

Writing and debugging aservice for WNS

Demo

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)

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).

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();

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(); } }}

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);})();

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();

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; } }}

Capability summary for notificationsNotification type

Cycling

Scheduled

Expiring

Recurring

Audio

Periodic

Push

Tile ✔ ✔ ✔ ✔ ✔Badge ✔ ✔ ✔Toast ✔ ✔ ✔ ✔ ✔Raw ✔

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

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

Develop: http://dev.windows.com Design: http://design.windows.com/ Samples: Windows 8.1 SamplesVideos: http://channel9.msdn.com/Windows

Resources

Evaluate this session

Scan this QR code to evaluate this session and be automatically entered in a drawing to win a prize!

© 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.