Démarrage rapide : envoi de notifications à une vignette secondaire (HTML)

Article
12/11/2015

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Remarque Vous n’utilisez pas JavaScript ? Voir Démarrage rapide : envoi de notifications à une vignette secondaire (XAML).

Cette rubrique de démarrage rapide explique comment mettre à jour la vignette secondaire d’une application par l’envoi d’une notification locale. Vous verrez que l’envoi d’une notification à une vignette secondaire est identique à l’envoi d’une notification à la vignette principale de l’application, à l’exception de l’étape finale. La seule différence entre les deux procédures tient au fait que, pour les vignettes secondaires, vous utilisez un programme de mise à jour de vignette spécifique aux vignettes secondaires (CreateTileUpdaterForSecondaryTile).

Pour voir le code fourni dans cette rubrique utilisé dans un exemple complet, voir Exemple de vignettes secondaires. L’exemple est fourni dans les versions JavaScript, C#, C++ et Visual Basic.

Lors du lancement d’une application, cette dernière doit toujours énumérer ses vignettes secondaires, au cas où des ajouts ou des suppressions auraient eu lieu dont elle ne serait pas consciente. Quand un utilisateur supprime une vignette secondaire, Windows supprime simplement la vignette. L’application elle-même est responsable de la libération des éventuelles ressources utilisées par la vignette secondaire. Lorsque Windows copie les vignettes secondaires via le cloud, les notifications par vignette ou de badge actuelles sur la vignette secondaire, les notifications planifiées, les canaux de notification Push et les URI (Uniform Resource Identifiers) utilisés avec les notifications périodiques ne sont pas copiés avec la vignette secondaire et doivent être reconfigurés.

Remarque Dans cette rubrique de démarrage rapide, vous allez manipuler le contenu de la notification directement via le modèle DOM (Document Object Model) XML. Une approche facultative est disponible via la bibliothèque NotificationsExtensions, présentant le contenu XML sous forme de propriétés d’objet, y compris IntelliSense. Pour plus d’informations, voir Démarrage rapide : utilisation de la bibliothèque NotificationsExtensions dans votre code. Pour accéder au code de cette rubrique de démarrage rapide exprimé à l’aide de NotificationsExtensions, voir l’exemple de vignettes secondaires.

Prérequis

Conditions préalables à la compréhension de cette rubrique :

Bonnes connaissances des termes et des concepts de vignette et de notification. Pour plus d’informations, voir Vignettes, badges et notifications.
Bonne connaissance du schéma XML de vignette. Pour plus d’informations, voir Schéma des vignettes.
Aptitude à créer une application élémentaire Windows Store en JavaScript à l’aide des API Windows Runtime. Pour plus d’informations, voir Créer votre première application du Windows Store en JavaScript.
Une vignette secondaire existante pour votre application. Pour plus d’informations, voir Démarrage rapide : épinglage d’une vignette secondaire.
Bonne connaissance du langage XML et de sa manipulation via les API DOM (Document Object Model).

Instructions

1. Facultatif : Déclarer une variable d’espace de noms

Cette étape permet d’utiliser un nom court à la place du nom complet de l’espace de noms. Elle équivaut à l’instruction « using » dans C# ou « Imports » dans Visual Basic. Elle vous permet de simplifier votre code.

Remarque Il est supposé que cette variable est déclarée pour le reste du code inclus dans la présente rubrique de démarrage rapide.

var notifications = Windows.UI.Notifications;

2. Récupérer un modèle de vignette vide

Tout modèle de vignette peut être utilisé pour une vignette secondaire. Dans cet exemple, nous utilisons le modèle de texte seul simple TileWide310x150Text04.


var wideTemplate = notifications.TileTemplateType.tileWide310x150Text04;                       
var tileXml = notifications.TileUpdateManager.getTemplateContent(wideTemplate);

3. Affecter du texte à la notification

Le modèle TileWide310x150Text04 contient un élément de texte unique auquel nous attribuons une chaîne.


var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("This text was delivered through a notification"));

4. Fournir la version moyenne de la notification

Nous vous recommandons de toujours fournir une liaison pour chaque taille de vignette prise en charge par votre application dans toute charge utile de notification envoyée à une vignette. Dans le cadre de l’opération d’épinglage, l’utilisateur peut sélectionner la taille de vignette secondaire à partir des options que vous proposez. Le fait de fournir une liaison dans chaque notification pour chacune de ces options de taille permet de garantir l’affichage de votre notification quelle que soit la taille de la vignette. Si vous prenez également en charge une grande vignette secondaire, répétez cette étape et la suivante pour l’un des grands modèles.

Remarque Toutes les vignettes, y compris les vignettes secondaires, sont épinglées en tant que vignettes moyennes sur Windows Phone 8.1, après quoi l’utilisateur peut les redimensionner.


var squareTemplate = notifications.TileTemplateType.tileSquare150x150Text04;                       
var squareTileXml = notifications.TileUpdateManager.getTemplateContent(squareTemplate);

var squareTileTextAttributes = squareTileXml.getElementsByTagName("text");
squareTileTextAttributes[0].appendChild(squareTileXml.createTextNode("This text was delivered through a notification"));

5. Ajouter la notification de taille moyenne à la charge utile de la notification large

var node = tileXml.importNode(squareTileXml.getElementsByTagName("binding").item(0), true);
tileXml.getElementsByTagName("visual").item(0).appendChild(node);

6. Empaqueter le code XML final en tant que notification par vignette

var tileNotification = new notifications.TileNotification(tileXml);

7. Créer un programme de mise à jour de vignettes secondaires

Jusqu’à cette étape, le processus est le même que pour une notification par vignette standard. Dans cette étape, toutefois, nous utilisons la méthode createTileUpdaterForSecondaryTile qui est spécifique aux vignettes secondaires. Cette méthode requiert l’ID unique de la vignette secondaire cible. Dans cet exemple, nous supposons qu’une vignette secondaire dont l’ID est stocké dans la variable appbarTileId est actuellement épinglée à l’écran d’accueil.

var updater = notifications.TileUpdateManager.createTileUpdaterForSecondaryTile(appbarTileId);

8. Envoyer la notification à la vignette secondaire

updater.update(tileNotification);

9. Facultatif : mise à jour du logo de la vignette secondaire

Vous devez fournir une image de logo lorsque vous créez votre vignette secondaire. L’image de logo, nommée ainsi car elle représente normalement le logo d’une application, est une image de la taille de la vignette qui est affichée sur la vignette avant la réception d’éventuelles notifications. La vignette revient à l’image de logo si la notification est supprimée ou expire. Dans certains scénarios, vous pouvez modifier l’image de logo par défaut, éventuellement pour indiquer un changement dans le contenu épinglé lorsque vous ne voulez pas envoyer une mise à jour de notification complète. Cette étape vous explique comment changer le logo de la vignette secondaire avec un ID stocké dans la variable appbarTileId, en utilisant une image issue du stockage local de l’application. Notez que cet exemple fait référence à la classe Windows.Foundation.Uri.


var tileToUpdate = new Windows.UI.StartScreen.SecondaryTile("SecondaryTile.01");
var uriUpdatedLogo = new Windows.Foundation.Uri("ms-appdata:///local/NewSecondaryTileDefault.png");
tileToUpdate.logo = uriUpdatedLogo;
tileToUpdate.updateAsync();

Récapitulatif et étapes suivantes

Dans cette rubrique de démarrage rapide, vous avez envoyé une notification à une vignette secondaire associée à votre application. Vous avez vu qu’il n’existe qu’une légère différence entre l’envoi d’une notification à la vignette principale de l’application et l’envoi d’une notification à l’une de ses vignettes secondaires. Vous avez également mis à jour l’image de logo par défaut de votre vignette secondaire.

Dans cette procédure, la mise à jour de la vignette secondaire a été envoyée sous forme de notification locale. Vous pouvez également explorer les autres méthodes de remise de notification : planifiée, périodique et Push. Pour plus d’informations, voir Remise de notifications.