1 / 35

Alive with activity Tiles, notifications , and background t asks

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

ama
Download Presentation

Alive with activity Tiles, notifications , and background t asks

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Alive with activityTiles, notifications, and background tasks KraigBrockschmidt Senior Program Manager, Windows Ecosystem Team Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript 3-101

  2. Agenda • 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

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

  4. Demo:a visual tour

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

  6. Toast templates

  7. The lock screen • App content

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

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

  10. XML badge update schema • <?xmlversion="1.0"encoding="utf-8" ?> • <badgevalue = "1-99"|"none"|"activity"|"alert"|"available"|"away"|... • version? = "integer" />

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

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

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

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

  15. Scheduled notifications Scheduled notification API Running app orbackground task System process Queue Suspendedor not running In Windows.UI.Notifications namespace: ScheduledTileNotification >> TileUpdater, SecondaryTileUpdaterScheduledToastNotification >> ToastNotifier

  16. Configuring periodic updates System process30m to 24h frequency per service Tile and badge updater API Running app or background task URI web service HTTP Request Suspendedor not running In Windows.UI.Notifications namespace: TileUpdater.StartPeriodicUpdateand StartPeriodicUpdateBatch BadgeUpdater.StartPeriodicUpdate

  17. Demo:writing and debugging aperiodic update service

  18. Configuring push notifications web service Channel request API Running app or background task Send channel to web service Sendupdate Suspendedor not running Push updatesto client (tile, badge,toast, raw) WNS Running app: PushNotificationChannel.PushNotificationReceived event(in Windows.Networking.PushNotificationsnamespace) Background task: PushNotificationTrigger

  19. Register the app via Store dashboard

  20. Demo:writing and debugging aservice for WNS

  21. 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 • www.WindowsAzure.com/mobile • 11/1 4:15pm - Baker – Windows 8 Connectathon with Windows Azure Mobile Services (3-129) • Also see offerings from Urban Airship:http://urbanairship.com • What a push service needs to support: • Secure service API for channel URI registration • Persistent storage ofchannel URIs • Storage for tile andtoast images

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

  23. Renewing WNS channels (register task, C#) usingWindows.ApplicationModel.Background; 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); taskBuilder.AddCondition(internetCondition); taskBuilder.Register();

  24. Renewing WNS channels (task, C#) using System; usingSystem.Threading.Tasks; usingWindows.ApplicationModel.Background; 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(); notifier.RenewAllAsync(false).AsTask().Wait(); } } }

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

  26. Receiving raw notification (register task, C#) usingWindows.ApplicationModel.Background;usingWindows.Networking.PushNotifications; BackgroundTaskBuildertaskBuilder = newBackgroundTaskBuilder(); PushNotificationTriggertrigger = newPushNotificationTrigger();taskBuilder.SetTrigger(trigger);taskBuilder.TaskEntryPoint= "BackgroundTasks.RawNotification"; taskBuilder.Name = "ReceiveRawNotification"; taskBuilder.Register();

  27. Receiving raw notification (task, C#) usingSystem.Diagnostics; usingWindows.ApplicationModel.Background; usingWindows.Networking.PushNotifications; usingWindows.Storage; 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; } } }

  28. Capability summary for notifications

  29. Personalized, real-time status When should I update my tile or toast? Push e.g. a friend achieves a new high score within a game we share e.g. comments on my photo Subscribed tailored content updates Push 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 Periodic e.g. every 30 minutes for stock or weather updates Missed toast notifications Local / Push e.g. missed phone calls in a VOIP app

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

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

  32. Resources • 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 http://aka.ms/BuildSessions

  33. Resources • Develop: http://msdn.microsoft.com/en-US/windows/apps/br229512 • Design: http://design.windows.com/ • Samples: http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples • Videos: http://channel9.msdn.com/Windows Please submit session evals by using the Build Windows 8 app or at http://aka.ms/BuildSessions

More Related