alive with activity tiles notifications and background t asks n.
Skip this Video
Download Presentation
Alive with activity Tiles, notifications , and background t asks

Loading in 2 Seconds...

play fullscreen
1 / 35

Alive with activity Tiles, notifications , and background t asks - PowerPoint PPT Presentation

  • Uploaded on

Alive with activity Tiles, notifications , and background t asks. Kraig Brockschmidt Senior Program Manager, Windows Ecosystem Team Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript 3-101. Agenda. Visual tour: understanding the user e xperience

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Alive with activity Tiles, notifications , and background t asks' - ama

Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
alive with activity tiles notifications and background t asks

Alive with activityTiles, notifications, and background tasks


Senior Program Manager, Windows Ecosystem Team

Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript


  • Visual tour: understanding the user experience
  • Three ways an app configures updates
  • The role of background tasks for notifications
  • Writing and debugging web services for notifications
How do we create an environment that’s “alive with activity”without having apps runningall the time?
live tiles
Live tiles

Tiles updated using pre-defined templates

Updates include both square and wide tiles

Text-only, image-only or combination

Local, scheduled, periodic and push updates

JPEG, GIF, or PNG, max size 200 KB, max 1024px size

Optional “peek” animation

the lock s creen
The lock screen
  • App content
alive with activity without apps r unning
Alive with activity without apps running
  • Issue direct updates, perhaps using queue, scheduled, and expiring updates
  • Tell Windows a service URL where it can to obtain periodic updates
  • Obtain a Windows Push Notification Service (WNS) channel and have a service send notifications to that
  • These actions can happen from app code or background tasks
  • There are three ways an app configures this
  • to happen
what makes an update
What makes an update?
  • Choices: Tile template catalog, badge catalog, toast template catalog, plus Toast audio options catalog
  • Whoever issues an update builds the XML
    • URIs for images can use http[s]://, ms-appx:///, orms-appdata:///local/
  • Notifications Extensions Library providesan object model
  • Reduces mistakes that cause updates to not show
  • Tiles, badges, and toasts are bits of XML that come from predefined templates (to avoid chaos)
xml badge u pdate s chema
XML badge update schema
  • <?xmlversion="1.0"encoding="utf-8" ?>
  • <badgevalue = "1-99"|"none"|"activity"|"alert"|"available"|"away"|...
  • version? = "integer" />
xml tile u pdate s chema
XML tile update schema
  • <?xmlversion="1.0"encoding="utf-8" ?>
  • <tile>
  • <visualversion? = "integer" lang? = "string" baseUri?= "anyURI"
  • branding? = "none" addImageQuery? = "boolean" >
  • <!-- One or more binding elements -->
  • <bindingtemplate = "TileSquareImage"|"TileSquareBlock"|...
  • fallback? = "string" lang? = "string" baseUri? = "anyURI"
  • branding? = "none" addImageQuery? = "boolean" >
  • <!-- Some combination of image and text -->
  • <imageid = "integer"src = "string"
  • alt? = "string"addImageQuery? = "boolean" />
  • <textid= "integer"lang? = "string" />
  • </binding>
  • </visual>
  • </tile>
xml toast n otification s chema
XML toast notification schema
  • <?xmlversion="1.0"encoding="utf-8" ?>
  • <toastlaunch? = "string"duration? = "long"|"short" >
  • <visualversion? = "integer"lang? = "string"
  • baseUri? = "anyURI"branding? = "none"addImageQuery? = "boolean" >
  • <!-- One or more bindings -->
  • <bindingtemplate = "ToastImageAndText01"|"ToastImageAndText02"|...=""
  • fallback? = "string"lang? = "string"baseUri? = "anyURI"
  • branding? = "none"addImageQuery? = "boolean" >
  • <!-- Some number of child elements -->
  • <imageid = "integer"src = "string" alt = "string"addImageQuery? = "boolean" />
  • <textid = "integer"lang? = "string" />
  • </binding>
  • </visual>
  • <!-- Optional audio -->
  • <audiosrc? = "ms-winsoundevent:Notification.Default"|...
  • loop?= "boolean"silent? = "boolean" />
  • </toast>
secondary t iles
Secondary tiles

Tiles created by “pinning” content from app

Pin initiated by app via simple runtime call

User confirms pin operation via system UI

Exposes a personalized surface for app

Increases Start screen presence

Same capabilities as app tiles

Launch leads to relevant content

See Windows.UI.StartScreen.SecondaryTiles classand Secondary Tiles Sample

issuing updates from the app
Issuing updates from the app

Updates appear immediately

Running app orbackground task

Tile and badge APItoast API

In Windows.UI.Notifications namespace:

TileNotification >> TileUpdater, SecondaryTileUpdaterBadgeNotification >> BadgeUpdater

ToastNotification >> ToastNotifier

scheduled notifications
Scheduled notifications

Scheduled notification API

Running app orbackground task

System process


Suspendedor not running

In Windows.UI.Notifications namespace:

ScheduledTileNotification >> TileUpdater, SecondaryTileUpdaterScheduledToastNotification >> ToastNotifier

configuring periodic u pdates
Configuring periodic updates

System process30m to 24h frequency per service

Tile and badge updater API

Running app or

background task


web service

HTTP Request

Suspendedor not running

In Windows.UI.Notifications namespace:

TileUpdater.StartPeriodicUpdateand StartPeriodicUpdateBatch


configuring push n otifications
Configuring push notifications

web service

Channel request API

Running app or

background task

Send channel to web service


Suspendedor not running

Push updatesto client (tile, badge,toast, raw)


Running app: PushNotificationChannel.PushNotificationReceived event(in Windows.Networking.PushNotificationsnamespace)

Background task: PushNotificationTrigger

building a cloud s ervice with windows azure
Building a cloud service withWindows Azure

Building a Cloud Service with Window Azure

  • How do I do that with Windows Azure?
  • Windows Azure Mobile Services
  • 11/1 4:15pm - Baker – Windows 8 Connectathon with Windows Azure Mobile Services (3-129)
  • Also see offerings from Urban Airship:
  • What a push service needs to support:
  • Secure service API for channel URI registration
  • Persistent storage ofchannel URIs
  • Storage for tile andtoast images
background tasks for notifications
Background tasks for notifications
  • Maintenance 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 t ask c
Renewing WNS channels (register task, C#)


BackgroundTaskBuildertaskBuilder = newBackgroundTaskBuilder();

MaintenanceTrigger trigger = newMaintenanceTrigger( 10 * 24 * 60, false); //10 * 24 * 60 == 10 days

taskBuilder.SetTrigger(trigger);//In JavaScript, taskEntryPoint is the path of a .js file

taskBuilder.TaskEntryPoint = "PushNotificationsHelper.MaintenanceTask";

taskBuilder.Name = "UpdateChannels";

SystemConditioninternetCondition = newSystemCondition(SystemConditionType.InternetAvailable);



renewing wns channels task c
Renewing WNS channels (task, C#)

using System;



namespacePushNotificationsHelper {

publicsealedclassMaintenanceTask : IBackgroundTask{

publicvoid Run(IBackgroundTaskInstancetaskInstance)

{// This is a helper function to renew WNS channels. // Important here to not block the UI thread.

Notifiernotifier = newNotifier();





renewing wns channels task javascript
Renewing WNS channels (task, JavaScript)

// This code runs as a web worker

(function () {// Import the Notifier helper objectimportScripts("//Microsoft.WinJS.1.0/js/base.js");importScripts("notifications.js");varcloseFunction = function () { close(); // This is worker.close };varnotifier = newSampleNotifications.Notifier();notifier.renewAllAsync().done(closeFunction, closeFunction);})();

receiving raw n otification r egister t ask c
Receiving raw notification (register task, C#)


BackgroundTaskBuildertaskBuilder = newBackgroundTaskBuilder();

PushNotificationTriggertrigger = newPushNotificationTrigger();taskBuilder.SetTrigger(trigger);taskBuilder.TaskEntryPoint= "BackgroundTasks.RawNotification";

taskBuilder.Name = "ReceiveRawNotification";


receiving raw n otification task c
Receiving raw notification (task, C#)





namespaceBackgroundTasks {

publicsealedclassRawNotification: IBackgroundTask {

publicvoid Run(IBackgroundTaskInstancetaskInstance) {

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




when should i update my tile or toast
Personalized, real-time statusWhen should I update my tile or toast?


e.g. a friend achieves a new high score within a game we share

e.g. comments on my photo

Subscribed tailored content updates


e.g. ongoing sporting event scores

e.g. breaking news

Application launch/usage

Local / Push

e.g. update app tile to match more recent app content

e.g. clearing the unread mail count when mail is opened

Periodically for non-personalized content


e.g. every 30 minutes for stock or weather updates

Missed toast notifications

Local / Push

e.g. missed phone calls in a VOIP app

how s hould i not u pdate m y t ile
How should I notupdate my tile?

Avoid high frequency, streaming updates

e.g. every minute to report a play-by-play sporting event

e.g. real-time stock ticker on the tile

Do not clear the tile when the app launches/exits

Leave content on the tile to draw your user back to the app.

It is okay to update the tile on app exit, however.

Do not update to explicitly replace ‘old content’

Set the optional expirationon the tile at the time it is sent.

Only send new updates if there is new data to show the user.

Do not depend on tile ordering

Notification queue tile display order is not guaranteed – “storyboards” will not work on tiles. Tile updates must be independent of one another.

related sessions

Related sessions

  • 11/1 4:15pm - Baker – Windows 8 Connectathon with Windows Azure Mobile Services (3-129)


  • UX Guidelines – section on Tiles and Notifications
  • Working with tiles, badges, and toast notifications
  • 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 JavaScript

Please submit session evals by using the Build Windows 8 app

or at



  • Develop:
  • Design:
  • Samples:
  • Videos:

Please submit session evals by using the Build Windows 8 app

or at