Defining badge metadata
Pinned sites are more than just bookmarks. After a site is pinned to the Start menu in Windows 8, its app tile can be updated periodically to show activity.This topic describes how a site developer can use metadata to indicate that a badge update web service is available. This screen shot shows an app tile for a pinned site that indicates there are 3 updates for the site.
.png)
The fresh tweets sample application updates its metadata dynamically as the user selects settings on the home page for the website. After the site is pinned, the badge update interval cannot be changed. Here, we'll focus on a couple things:
- The msapplication-badge metadata element
- A simple method of dynamically updating badge metadata (optional)
msapplication-badge
The msapplication-badge meta element controls how badge updates occur when a website is pinned to the Start menu in Windows 8. The content attribute of this element is made up of the following required parts, separated by semicolons:
| Part | Description |
|---|---|
| polling-uri | A fully qualified or relative URI. The address that receives requests for badge updates. |
| frequency | (Optional) Number of minutes between updates.
One of the following values:
|
The following example demonstrates the basic format of the "msapplication-badge" metadata.
<meta name="msapplication-badge"
value="frequency=360;polling-uri=https://contoso.com/BadgeUpdate.aspx" />
For a badge to be useful, it should show information based on user account or specified app settings. For example, the fresh tweets sample app sends both the desired account name and update interval to the server so that the badge response can be tailored for those settings. It does this by sending app settings in the URL of the request. Here's a typical polling URI for the demo:
http://ietestdrive2.com/pinnedsites/TweetCounter/microsoft/1440/
Settings can also be passed as URL parameters; however, cookie data is not included in the request and cannot be used.
The "msapplication-badge" metadata takes effect only as the website is pinned. In most cases, badge metadata is determined by the server and sent with the webpage, which does not modify it before the site is pinned. The fresh tweets sample app demonstrates that you can update the metadata before the site is pinned to accommodate your user's preferences. Let's look at how this works.
function computePollingData()
{
var streamValue = currentlyActiveStreamLink.id;
var tileName = currentlyActiveStreamLink.name;
var frequencyValue = document.getElementById("frequencyChoice").value;
// update polling URI
var pollingTag = document.getElementsByName("msapplication-badge")[0];
var pollingTagContent = "frequency=" + frequencyValue +
";polling-uri=http://ietestdrive2.com/pinnedsites/TweetCounter/" +
streamValue + "/" + frequencyValue;
pollingTag.content = pollingTagContent;
// update application name
var appName = document.getElementsByName("application-name")[0];
appName.content = "@" + tileName + " tweets";
}
The computePollingData() function does the following:
- Gets the id and name of the current Twitter follow target. The values are used for the polling-uri and app tile name, respectively.
- Gets the selected polling frequency value from the drop-down control.
- Concatenates these values to create a new "msapplication-badge" metadata value, and updates the content attribute of the meta element.
- Sets the name of the "application-name" metadata element, which was introduced in Declaring Pinned Site Metadata.
- Finally, it stores the user selections in client-side cookies. These cookies are used to remember the state of the form, not to send data to the server with the badge request.
Now, the user can customize the behavior of the pinned site before pinning it, and the app tile and badge notifications will correctly reflect these customizations.
Next Steps
In the next section, Requesting badge updates, you will learn how to request badge updates from the client, and respond to the server request.
Related topics
How to Use Badge Notifications