1 / 36

Alive with activity Tiles, notifications, and background tasks

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.

errol
Download Presentation

Alive with activity Tiles, notifications, and background tasks

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 Kraig Brockschmidt Senior Program Manager, Windows Ecosystem Team Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript 3-159

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

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

  4. Demo • A visual tour

  5. Live tiles Tiles updated using pre-defined templates. Updates include square, wide, and large tiles. 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.

  6. Toast templates

  7. The lock screen App content

  8. Alive with activity without apps running • There are three ways an app configures this • to happen. • 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.

  9. What makes an update? • Tiles, badges, and toasts are bits of XML that come from predefined templates (promotes unity/avoids chaos). • 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.

  10. XML badge update schema • <?xmlversion = "1.0"encoding = "utf-8" ?> • <badgevalue = "1-99"|"none"|"activity"|"alert"|"available"|"away"|... • version? = "integer" /> Note: version for <badge> is 1 in Windows 8, 2 in 8.1 Preview

  11. XML tile update schema Set version to “2” to enableWindows 8.1 Preview templates <?xmlversion="1.0"encoding="utf-8" ?> <tile> <visualversion? = "integer" lang? = "string" baseUri? = "anyURI" branding? = "string" addImageQuery? = "boolean" > <!-- One or more binding elements: *always place large tiles last* --> <bindingtemplate = "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 --> <imageid = "integer"src = "string" alt? = "string"addImageQuery? = "boolean" /> <textid = "integer"lang? = "string" /> </binding> </visual> </tile> Best practice: use updates that include all tile sizes

  12. XML toast notification schema <?xmlversion="1.0"encoding="utf-8" ?> <toastlaunch? = "string"duration? = "long"|"short" > <visualversion? = "integer"lang? = "string" baseUri? = "anyURI"branding? = "string"addImageQuery? = "boolean" > <bindingtemplate = "ToastImageAndText01"|"ToastImageAndText02"|...="" fallback? = "string"lang? = "string"baseUri? = "anyURI" branding? = "string"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 Increases 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.

  14. Issuing updates from the app Updates appear immediately Running app orbackground task. Tile and badge API.Toast API. In Windows.UI.Notifications namespace: TileNotification >> TileUpdater, SecondaryTileUpdaterBadgeNotification >> BadgeUpdater ToastNotification >> ToastNotifier

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

  16. Configuring periodic updates Running app, background task, or manifest. Tile and badge updater API. System process30 minutes to 24 hours frequency per service URI HTTP request Web service. Suspendedor not running. In Windows.UI.Notifications namespace: TileUpdater.StartPeriodicUpdateand StartPeriodicUpdateBatch BadgeUpdater.StartPeriodicUpdate Set in manifest to have live tile before first launch.

  17. Configuring periodic updates in manifest <m2:TileUpdateRecurrence="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.

  18. Demo • Writing and debugging a periodic update service

  19. Configuring push notifications Running app or background task. Channel request API. Web service. Send channel to web service Send update Suspendedor not running. Push updates to client (tile, badge, toast, raw) WNS Running app: PushNotificationChannel.PushNotificationReceived event(in Windows.Networking.PushNotifications namespace). Background task: PushNotificationTrigger.

  20. Register the app via Store dashboard

  21. Demo • Writing and debugging aservice for WNS

  22. Azure Mobile Service for Push Notifications Building a Cloud Service with Window Azure • Secure 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)

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

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

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

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

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

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

  29. Capability summary for notifications

  30. Related sessions • 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.

  31. Resources • Alive with Activity: 3-part series on the Windows Developer Blog • UX Guidelines: Tiles and Notifications section • Working 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

  32. Resources • Develop: http://dev.windows.com • Design: http://design.windows.com/ • Samples: Windows 8.1 Samples • Videos: http://channel9.msdn.com/Windows

  33. Required Slide *delete this box when your slide is finalized Your MS Tag will be inserted here during the final scrub. Evaluate this session • Scan this QR codeto evaluate this session and be automatically entered in a drawing to win a prize!

More Related