Ajouter des notifications Push à votre application Windows

  • Article

Vue d’ensemble

Dans ce didacticiel, vous ajoutez des notifications Push au projet Démarrage rapide Windows afin qu'une notification Push soit envoyée chaque fois qu'un enregistrement est inséré.

Si vous n’utilisez pas le projet de serveur du démarrage rapide téléchargé, vous devrez ajouter le package d’extension de notification Push. Consultez Fonctionnement avec le Kit de développement logiciel (SDK) du serveur principal .NET pour Azure Mobile Apps pour plus d’informations.

Configuration d’un hub de notification

La fonctionnalité Mobile Apps d’Azure App Service utilise Azure Notification Hubs pour envoyer des notifications Push ; vous allez donc devoir configurer un hub de notification pour votre application mobile.

  1. Dans le portail Azure, accédez à App Services, puis sélectionnez votre serveur principal d’applications. Sous Paramètres, sélectionnez Notifications push.

  2. Pour ajouter une ressource de Hub de notification à l’application, sélectionnez Connecter. Vous pouvez créer un concentrateur ou vous connecter à un autre existant.

    Configurer un Hub

Vous avez désormais connecté un hub de notification à votre projet de serveur principal Mobile Apps. Plus tard, vous allez configurer ce Hub de notification pour qu’il se connecte à un système PNS (Platform Notification System) qui envoie des notifications Push aux appareils.

Inscription de votre application pour les notifications Push

Vous devez envoyer votre application au Microsoft Store, puis configurer votre projet de serveur pour l’intégrer à Windows Push Notification Services (WNS) pour envoyer des notifications Push.

  1. Dans Visual Studio Explorateur de solutions, cliquez avec le bouton droit sur le projet d’application UWP, cliquez sur Store>Associer l’application au Windows Store....

    Associer une application avec Microsoft Store

  2. Dans l'Assistant, cliquez sur Suivant, connectez-vous à votre compte Microsoft, saisissez un nom pour votre application dans Réserver un nouveau nom d'application, puis cliquez sur Réserver.

  3. Une fois l’inscription de l’application créée, sélectionnez le nouveau nom d’application, cliquez sur Suivant, puis sur Associer. Cela ajoute les informations d'inscription Microsoft Store requises au manifeste de l'application.

  4. Accédez au Portail d’inscription des applications Microsoft et connectez-vous avec votre compte Microsoft. Cliquez sur l’application Windows Store que vous avez associée à l’étape précédente.

  5. Dans la page d’inscription, notez la valeur sous Secrets de l’application et SID du package. Vous les utiliserez ensuite pour configurer le backend de votre application mobile.

    Associer une application avec Microsoft Store

    Important

    La clé secrète client et le SID du package sont des informations d'identification de sécurité importantes. Ne partagez pas ces valeurs avec quiconque et ne les distribuez pas avec votre application. L’ ID d’application est utilisé avec la clé secrète pour configurer l’authentification du compte Microsoft.

App Center inclut également des instructions de configuration des applications UWP pour les notifications push.

Configurer le serveur principal pour l’envoi de notifications Push

  1. Dans le portail Azure, sélectionnez Parcourir tout>App Services. Puis sélectionnez votre serveur principal Mobile Apps. Sous Paramètres, sélectionnez App Service Push (Notification Push App Service). Ensuite, sélectionnez le nom de votre Hub de notification.

  2. Accédez à Windows (WNS). Ensuite, entrez la Clé de sécurité (clé secrète client) et le SID du package que vous avez obtenus à partir du site des services Microsoft Live. Puis sélectionnez Enregistrer.

    Définition de la clé WNS dans le portail

Votre serveur principal est désormais configuré pour utiliser WNS afin d’envoyer des notifications Push.

Mise à jour du serveur pour l'envoi de notifications Push

Utilisez la procédure ci-dessous qui correspond au type de projet principal ( back-end .NET ou Node.js back-end).

Projet principal .NET

  1. Dans Visual Studio, cliquez avec le bouton droit sur le projet de serveur, puis cliquez sur Gérer les packages NuGet, recherchez Microsoft.Azure.NotificationHubs et cliquez sur Installer. Cette commande installe la bibliothèque cliente Notification Hubs.

  2. Développez Contrôleurs, ouvrez TodoItemController.cs et ajoutez les instructions using suivantes :

    using System.Collections.Generic;
using Microsoft.Azure.NotificationHubs;
using Microsoft.Azure.Mobile.Server.Config;

  3. Dans la méthode PostTodoItem, ajoutez le code suivant après l’appel à InsertAsync :

    // Get the settings for the server project.
HttpConfiguration config = this.Configuration;
MobileAppSettingsDictionary settings =
    this.Configuration.GetMobileAppSettingsProvider().GetMobileAppSettings();

// Get the Notification Hubs credentials for the Mobile App.
string notificationHubName = settings.NotificationHubName;
string notificationHubConnection = settings
    .Connections[MobileAppSettingsKeys.NotificationHubConnectionString].ConnectionString;

// Create the notification hub client.
NotificationHubClient hub = NotificationHubClient
    .CreateClientFromConnectionString(notificationHubConnection, notificationHubName);

// Define a WNS payload
var windowsToastPayload = @"<toast><visual><binding template=""ToastText01""><text id=""1"">"
                        + item.Text + @"</text></binding></visual></toast>";
try
{
    // Send the push notification.
    var result = await hub.SendWindowsNativeNotificationAsync(windowsToastPayload);

    // Write the success result to the logs.
    config.Services.GetTraceWriter().Info(result.State.ToString());
}
catch (System.Exception ex)
{
    // Write the failure result to the logs.
    config.Services.GetTraceWriter()
        .Error(ex.Message, null, "Push.SendAsync Error");
}

    Ce code indique au hub de notification d'envoyer une notification Push après l'insertion d’un nouvel élément.

  4. Publier à nouveau le projet de serveur

projet principal Node.js

  1. Configurez votre projet back-end.

  2. Remplacez le code présent dans le fichier todoitem.js par le code suivant :

    var azureMobileApps = require('azure-mobile-apps'),
promises = require('azure-mobile-apps/src/utilities/promises'),
logger = require('azure-mobile-apps/src/logger');

var table = azureMobileApps.table();

table.insert(function (context) {
// For more information about the Notification Hubs JavaScript SDK,
// see https://aka.ms/nodejshubs
logger.info('Running TodoItem.insert');

// Define the WNS payload that contains the new item Text.
var payload = "<toast><visual><binding template=\ToastText01\><text id=\"1\">"
                            + context.item.text + "</text></binding></visual></toast>";

// Execute the insert.  The insert returns the results as a Promise,
// Do the push as a post-execute action within the promise flow.
return context.execute()
    .then(function (results) {
        // Only do the push if configured
        if (context.push) {
            // Send a WNS native toast notification.
            context.push.wns.sendToast(null, payload, function (error) {
                if (error) {
                    logger.error('Error while sending push notification: ', error);
                } else {
                    logger.info('Push notification sent successfully!');
                }
            });
        }
        // Don't forget to return the results from the context.execute()
        return results;
    })
    .catch(function (error) {
        logger.error('Error while running context.execute: ', error);
    });
});

module.exports = table;

    Ce code envoie une notification toast WNS contenant item.text quand un nouvel élément todo est inséré.

  3. Quand vous modifiez le fichier sur votre ordinateur local, republiez le projet serveur.

Ajout de notifications Push à votre application

Ensuite, votre application doit s’inscrire pour les notifications Push au démarrage. Si vous avez déjà activé l'authentification, assurez-vous que l'utilisateur est connecté avant d'essayer de s'inscrire aux notifications Push.

  1. Ouvrez le fichier de projet App.xaml.cs et ajoutez les instructions using suivantes :

    using System.Threading.Tasks;
using Windows.Networking.PushNotifications;

  2. Dans le même fichier, ajoutez la définition de la méthode InitNotificationsAsync à la classe App :

    private async Task InitNotificationsAsync()
{
    // Get a channel URI from WNS.
    var channel = await PushNotificationChannelManager
        .CreatePushNotificationChannelForApplicationAsync();

    // Register the channel URI with Notification Hubs.
    await App.MobileService.GetPush().RegisterAsync(channel.Uri);
}

    Ce code récupère l'URI de canal ChannelURI pour l'application dans WNS et l'inscrit avec votre application App Service Mobile App.

  3. En haut du handle d’événements OnLaunched dans App.xaml.cs, ajoutez le modificateur async à la définition de méthode et ajoutez l’appel suivant à la nouvelle méthode InitNotificationsAsync, comme dans l’exemple suivant :

    protected async override void OnLaunched(LaunchActivatedEventArgs e)
{
    await InitNotificationsAsync();

    // ...
}

    Cela garantit l'inscription de l'URI de canal ChannelURI de courte durée chaque fois que l'application est lancée.

  4. Recréez votre projet d’application UWP. Votre application est maintenant prête à recevoir des notifications toast.

Test des notifications Push dans votre application

  1. Cliquez avec le bouton droit sur le projet Windows Store, cliquez sur Définir comme projet de démarrage, puis appuyez sur la touche F5 pour exécuter l'application Windows Store.

    Une fois l'application démarrée, l'appareil est enregistré pour les notifications Push.

  2. Arrêtez l’application Windows Store et répétez l’étape précédente pour l’application Windows Phone Store.

    À cette étape, les deux appareils sont enregistrés pour recevoir des notifications Push.

  3. Exécutez à nouveau l’application Windows Store, tapez du texte dans Insert a TodoItem, puis cliquez sur Enregistrer.

    Notez qu'une fois l'insertion terminée, l'application Windows Store et l'application Windows Phone reçoivent toutes les deux une notification Push de WNS. La notification est affichée sur le Windows Phone, même si l'application n'est pas en cours d'exécution.

Étapes suivantes

Apprenez-en plus sur les notifications Push :

  • Utilisation du client géré pour Azure Mobile Apps Les modèles vous apportent la souplesse nécessaire pour envoyer des notifications push multiplateformes et localisées. Apprenez à inscrire des modèles.
  • Diagnostiquer les problèmes de notification Push Il existe différentes raisons pour lesquelles les notifications peuvent être perdues ou n’arrivent pas sur les appareils. Cette rubrique vous explique comment analyser et déterminer la cause première des défaillances de notification Push.

Vous pouvez poursuivre avec l’un des didacticiels suivants :