在2014 年 4 月 //learn/ - Global Community Webcast Event 微軟全球線上廣播活動中,所講述到有關 Tiles, badges and toasts and action center 的課程。
http://channel9.msdn.com/Blogs/twmvp/Tiles-badges-and-toasts-and-action-center
sample code: http://goo.gl/ydh1tk
1. 2014/04/24 - Global Community Webcast Event
Tiles, Badges, Toasts
and Action Center
Yu-Hsun Lin (Pou)
poumason@live.com
http://www.dotblogs.com.tw/pou/
2. This module…
Introduction to Tiles and Notifications
• How tiles enhance the Windows experience
• Tile template examples
• Tile terminology
• Sending notifications
•Managing notifications with the action center
3. Tiles: What Are They Good For?
Tiles are a defining Windows experience
Tiles across all screens
Initial interaction point for apps
Live tiles drive user engagement
Essential piece of the Windows
brand
The alternative to a “good tile” is not “no tile”
4. Users and Their Tiles
Full functionality tiles are #1 driver
in high app ratings
Secondary tiles a highly
sought-after feature among
Windows Phone users
5. Tile Types
Windows 8.1
Tile Templates
Tiles are cross-platform
Windows Phone
Tile Templates
40 cross platform tile templates available
Full list: http://aka.ms/TileTemplates
9. Tile Terminology
Peek
Second part of an animated tile
Block
Large number text
Image Collection
10. My First Tile - appxmanifest
Set up primary tile in the Visual Assets section
How to customize Start screen tiles for desktop apps (Windows Runtime apps)
11. My First Tile
Square (71 x 71)
Square (150 x 150)
Wide (310 x 150)
Large (310 x 310)
Every size can set scale range: Scale 100, Scale 140, Scale 240.
12. My First Tile - Badges
Badge Phone Windows
1-99
alert
attention
activity
available
away
busy
unavailable
newMessage
paused
playing
error
alarm
14. Tile XML Schema
tile Base tile element, contains one “visual” element Defines one (1) tile template
visual Can contains multiple binding child elements, each of which defines a tile
binding Defines one (1) tile template
text Text used in the tile template.
image
Image used in the tile template. Should match the size and shape image requirements for the template.
22. Notifications
Lots of ways to send notifications
Scheduled
- Set tile template and time
ScheduledTileNotification
ScheduledToastNotification
Periodic
pull from URL every half hour / hour / 6 hours / 12 hours / day.
Local
Update from within application (foreground or background)
Push
Using WNS Push Services
23. Scheduled updates
var scheduleToast = new ScheduledToastNotification(
xmlDoc,
DateTimeOffset.UtcNow + TimeSpan.FromDays(1.0) );
var toastNotify = ToastNotificationManager.CreateToastNotifier();
toastNotify.AddToSchedule(scheduleToast);
24. HTTP request for
Periodic updates XML payload
Windows Services
System process 30m –
24 hour frequency
var periodic = TileUpdateManager.CreateTileUpdaterForApplication();
Uri myTileFeed = new Uri("http://mysite.com/tileRSS.xml");
periodic.StartPeriodicUpdate(myTileFeed, PeriodicUpdateRecurrence.Hour);
25. Periodic updates (the easy way)
Open Package.appxmanifest
<tile>
<visual version="2">
<binding template="TileSquare150x150Text04"
fallback="TileSquareText04">
<text id="1">Hello world!</text>
</binding>
</visual>
</tile>
26. Local Updates
BadgeNotification newBadge = new BadgeNotification(badgeDoc);
BadgeUpdater update = BadgeUpdateManager.CreateBadgeUpdaterForApplication();
update.Update(newBadge);
28. Notification Queueing
Tiles can cycle notifications
Up to five (5) notifications in queue
Can replace tiles in the queue
Set expirations for tiles in queue
Support local, scheduled, push notifications and periodic updates
29.
30. Windows Notification Service
One service across Windows devices
One process to register an app for push
One tile template to push to Windows & Phone apps
31. WNS – Push Architecture
1. Request Channel URI
2. Register with your
Cloud Service
3. Authenticate & Push
Notification
My Developer
Service
Windows Push
Notification Service
39. How get WNS
http://msdn.microsoft.com/en-us/windows/
Login your windows live account
Create a application
Open the services
Click online service get the application setting
Copy SID and Application identify
Options
Add SID/Application identify to Azure Mobile Service
Or 3rd Server
40.
41.
42. Action Center
20 Notifications per app
Persistent notifications for 7 days (or shorter)
Users can
- “chase” (tap) a notification (which removes the notification)
- remove a group of notifications
- remove all notifications
Available on Phone only
43. Action Center Management APIs
Manage app notifications
Developers can
• Remove one or many notifications
• Tag and group notifications
• Replace a notification with a new one
• Set an expiration on notifications
• Send “Ghost Toast” notifications (only show up in the notification center)
44. Add Context To Notification
Example
ToastNotification toasty = new ToastNotification(doc);
toasty.Tag = "Windows Phone";
toasty.Group = "JumpStart";
45. Set Expiration for Notification
Example
ToastNotification toasty = new ToastNotification(doc);
toasty.Tag = "Windows Phone";
toasty.Group = "JumpStart";
toasty.ExpirationTime = (DateTimeOffset.Now +
TimeSpan.FromHours(2));
46. Set “Ghost Toast” (suppress toast popup)
Example
ToastNotification toasty = new ToastNotification(doc);
toasty.Tag = "Windows Phone";
toasty.Group = "JumpStart";
toasty.ExpirationTime = (DateTimeOffset.Now +
TimeSpan.FromHours(2));
toasty.SuppressPopup = true;
47. Remove Notifications
Example
ToastNotificationHistory tnh = ToastNotificationManager.History;
tnh.Remove("WindowsPhone");
tnh.RemoveGroup("JumpStart");
48.
49. References
Tiles, badges, and notifications (Windows Runtime apps)
Working with tiles, badges, and toast notifications (Windows Runtime apps
using JavaScript and HTML)
How to customize Start screen tiles for desktop apps (Windows Runtime apps)
Quickstart: Creating a default tile using the Microsoft Visual Studio manifest
editor (Windows Runtime apps) (Windows)
Quickstart: Sending a badge update (Windows Runtime apps using C#/VB/C++
and XAML)
50. References
Quickstart: Pinning a secondary tile (Windows Runtime apps using C#/VB/C++
and XAML)
Quickstart: Sending a tile update (Windows Runtime apps using C#/VB/C++ and
XAML)
How to schedule a tile notification (Windows Runtime apps using C#/VB/C++
and XAML)
How to schedule a toast notification (Windows Runtime apps using C#/VB/C++
and XAML)
51. References
Quickstart: Setting up periodic notifications (Windows Runtime apps using
C#/VB/C++ and XAML)
Using the notification queue (Windows Runtime apps)
Let’s start with some of the tile terminology.
Peek is the term we use to describe a tile that has 2 parts to it. On a tablet, this will look like a top and a bottom of the tile. On a phone, this will look like a front and a back as the tile flips from one to the other.
In addition to there being a lot of types of notifications, there are a lot of ways to send those notifications.
You can schedule your notification, which will queue the notification into a system process and run it at a specific time.
You can schedule a periodic update, which will pull the notification from a URL at a specified time interval.
You can raise a notification from within the foreground or background of your application.
Or you can use the Windows Notification Service Push Service to send a notification to your app.
Lets dig into each of these.
Let’s start with scheduled updates. We start from our application and within this application we call the Scheduler notification APIs.
(click)
Let’s look at the code that makes this happen.
(click)
Line 1: Walking through the code: We create a scheduled toast notification using the xml document that defines our tile, badge or toast notification and we add a time. In this case, it scheduling this notification to fire 1 day from now.
Line 2: We create a notification manager… in this case, it is a toast notification manager.
Line 3: We add our notification to the scheduler. And we’re done!
(click)
That puts the notification into the system schedule queue. The system will check that queue to see when it needs to execute the queue itesm and, when the time is right, it will push that toast or tile to be the live tile for your app.
Periodic updates require us to create the tile at a secondary service. We can set that service in our application with this code.
(click)
In which we set up a pointer to where we want to call for our tile code. Then we simply start the update at the frequency we prefer, which can be as much as a day or as little as 30 minutes.
(click)
This will register our update with the Windows System Services which will check for the update at the appropriate time.
(click)
It will then use the Tile an Badge Updater APIs to request a new tile.
(click)
It will send an HTTP Request for that tile XML payload.
(click)
And use that payload to update the tile.
Periodic updates are particularly cool because they can actually be done without any client side code.
(click)
Just open the package.appmanifest and in the application tab, you can set the tile update with the frequency you want and just paste in the URI template you want to use.
Local notifications are nice and straightforward. We start in your app, either in the foreground or the background.
(click)
Then we create a tile, badge, or toast notification based on the XML document. The, using the Tile, Badge, or Toast updater, we simply call the update.
(click)
And using the Tile, Badge, and Toast APIs, our tiles badges or toasts are immediately notified of the update. One important note is that calling a toast update on your app from the foreground will do nothing. We will only get a toast notification if we call it from the background.
From this table we can see that not every notification option is available to every kind of notification. We can’t send badges as scheduled notifications. We can’t send toasts as periodic notifications and we can only send raw notification through the push notification service.
One more thing about notifications: with this release of Windows we can place multiple tiles into a notification queue.
(click)
We can place up to 5 tile notifications in that queue and the tile will cycle through those notifications.
(Click)
Then we can replace a tile in that queue with another tile or
(click)
set expirations for those tiles.
To think of what kinds of the scenarios this enables, imaging there is a sports fan following multiple games, or a news reader that can list the 5 most important stories, all from 1 tile.
efore you can send notifications using WNS, your app must be registered with the Windows Store Dashboard. This will provide you with credentials for your app that your cloud service will use in authenticating with WNS. These credentials consist of a Package Security Identifier (SID) and a secret key.
Previous to this release, Microsoft had Microsoft Push Notification Services (MPNS) driving notifications on the phone and the Windows Notification Service (WNS) drive notifications on Windows devices. But now push notifications on Windows devices are driven by the Windows Notification Service, which delivers push notifications across all devices.
(click)
We’ve integrated the push registration service so that we have one process for all devices to register your app to handle these push notifications.
(click)
And, as previously mentioned, we have one set of tile templates that drive push across all devices to simplify the process of driving those key tile experience on Windows Phone.
The architecture behind WNS are this:
Your windows phone application contacts the Windows Notification Client platform to request a channel URI, which is a push uri unique to that device and application.
Register this Uri with your cloud service. Save that Uri in your service so you can use it to push notifications to the device.
Authenticate your service WNS. The cloud service authenticates with WNS by providing its credentials (Package SID and secret key) and getting back an access token that allows your service to send a notification. Then you can send that notification with that token to the push notification service.
For more information: http://msdn.microsoft.com/en-us/library/windows/apps/hh465435.aspx
Here, we’re just going to do a quick walk-through of setting an app up for push notifications. Right-click on your phone project and go down to the Store section to associate your app with the store.
This will pull up a wizard for associating your app with the store. Sign in with your Microsoft account and walk through the wizard and you will be able to see all the app names that you’ve provisioned through your store account. If you haven’t yet reserved an app name, you can actually do that here.
As you finalize your association, you’ll be given the final package name and publisher ID.
But you don’t even need to keep track of these because when you finalize the association, it will add the file Pachage.StoreAssociation.xml to your project.
With that in place, we can start the push process we outlines earlies.
(click)
We get our Channel URL with the following code and we save that Uri to our notification service. You’ll have to write this code yourself, but it would be a simple HTTP call to your service.
(click)
We can also add an event handler so that we can catch these notifications while our application is open.
In terms of the services for collecting your device channel URIs and authenticating to the WNS service, we have published a sample project for push notifications. You can see how that project runs at http://pushtestservce.azurewebsites.net/wns
If you’re looking for a turnkey solution to abstract the notification handling away, you could also turn to the Microsoft Azure Notification Hub, which you can use to deliver cross-device notifications as well as take advantage of the Azure scaling as your notifications start to ramp up.
But I can hear you saying “I don’t want to write and host a service just to write the push component of my app”. The Windows Phone team listened and have responded by integrating a notification simulator into the tools. Let’s take a look at how this tool works.