Tutoriel : Envoyer des notifications Push localisées vers iOS à l’aide d’Azure Notification Hubs

  • Article

Ce tutoriel montre comment utiliser la fonctionnalité de modèles d’Azure Notification Hubs pour diffuser des notifications relatives aux dernières nouvelles qui ont été localisées par langue et par appareil. Dans ce tutoriel, vous commencez avec l’application iOS que vous avez créée dans le cadre du tutoriel Utilisation de Notification Hubs pour envoyer les dernières nouvelles. Lorsque vous aurez terminé, vous pourrez vous inscrire aux catégories qui vous intéressent, spécifier une langue dans laquelle recevoir les notifications et recevoir uniquement des notifications Push pour les catégories sélectionnées dans cette langue.

Ce scénario comporte deux parties :

  • L'application iOS permet aux appareils clients d'indiquer une langue et de s'abonner à différentes catégories de dernières nouvelles.
  • Le serveur principal diffuse les notifications à l’aide des fonctionnalités de balise et de modèle d’Azure Notification Hubs.

Dans ce tutoriel, vous effectuez les étapes suivantes :

  • Mettre à jour l’interface utilisateur de l’application
  • Générer l’application iOS
  • Envoyer des notifications de modèle localisé à partir de l’application console .NET
  • Envoyer des notifications de modèle localisé à partir de l’appareil

Vue d’ensemble

Dans le tutoriel Utilisation de Notification Hubs pour envoyer les dernières nouvelles , vous avez créé une application qui se sert de balises pour s'abonner aux notifications relatives à différentes catégories de nouvelles. Cependant, de nombreuses applications sont destinées à plusieurs marchés et doivent donc être localisées. Cela signifie que le contenu des notifications proprement dites doit lui aussi être localisé et envoyé au bon ensemble d’appareils. Ce tutoriel vous montre comment utiliser la fonctionnalité de modèle de Notification Hubs pour facilement envoyer des notifications de dernières nouvelles localisées.

Notes

Pour envoyer des notifications localisées, vous pouvez notamment créer plusieurs versions de chaque balise. Par exemple, pour prendre en charge l'anglais, le français et le mandarin, vous auriez besoin de trois balises différentes pour les nouvelles internationales : « world_en », « world_fr » et « world_ch ». Il faudrait ensuite que vous envoyiez une version localisée des nouvelles internationales à chacune de ces balises. Dans cette rubrique, vous utilisez des modèles afin d'éviter la prolifération de balises et d'éliminer la nécessité d'envoyer plusieurs messages.

Les modèles permettent de spécifier comment un appareil particulier reçoit une notification. Le modèle spécifie le format de charge utile exact en se référant aux propriétés qui font partie du message envoyé par le serveur principal de votre application. Aux fins de notre exemple, vous allez envoyer un message de paramètres régionaux contenant toutes les langues prises en charge :

{
    "News_English": "...",
    "News_French": "...",
    "News_Mandarin": "..."
}

Ensuite, vous allez vous assurer que les appareils s'inscrivent avec un modèle qui se réfère à la bonne propriété. Par exemple, une application iOS qui souhaite s’abonner aux nouvelles françaises utilisera la syntaxe suivante :

{
    aps: {
        alert: "$(News_French)"
    }
}

Pour plus d’informations sur les modèles, consultez l’article Modèles.

Prérequis

Mettre à jour l’interface utilisateur de l’application

Dans cette section, vous allez modifier l’application de dernières nouvelles que vous avez créée à la rubrique Utilisation de Notification Hubs pour envoyer les dernières nouvelles pour envoyer les dernières nouvelles localisées à l’aide de modèles.

Dans votre MainStoryboard_iPhone.storyboard, ajoutez un contrôle segmenté avec les trois langues suivantes : anglais, français et mandarin.

Création de la table de montage séquentiel de l’interface utilisateur iOS

Puis, assurez-vous d’ajouter un IBOutlet dans votre ViewController.h comme indiqué dans l’image suivante :

Créer des sorties pour les commutateurs

Générer l’application iOS

  1. Dans Notification.h, ajoutez la méthode retrieveLocale, puis modifiez le magasin et les méthodes d’abonnement comme indiqué dans le code suivant :

    - (void) storeCategoriesAndSubscribeWithLocale:(int) locale categories:(NSSet*) categories completion: (void (^)(NSError* error))completion;

- (void) subscribeWithLocale:(int) locale categories:(NSSet*) categories completion:(void (^)(NSError *))completion;

- (NSSet*) retrieveCategories;

- (int) retrieveLocale;

    Dans Notification.m, modifiez la méthode storeCategoriesAndSubscribe, en ajoutant le paramètre locale et en le stockant dans les valeurs par défaut de l’utilisateur :

    - (void) storeCategoriesAndSubscribeWithLocale:(int) locale categories:(NSSet *)categories completion:(void (^)(NSError *))completion {
    NSUserDefaults* defaults = [NSUserDefaults standardUserDefaults];
    [defaults setValue:[categories allObjects] forKey:@"BreakingNewsCategories"];
    [defaults setInteger:locale forKey:@"BreakingNewsLocale"];
    [defaults synchronize];

    [self subscribeWithLocale: locale categories:categories completion:completion];
}

    Puis, modifiez la méthode subscribe afin d'inclure les paramètres régionaux :

    - (void) subscribeWithLocale: (int) locale categories:(NSSet *)categories completion:(void (^)(NSError *))completion{
    SBNotificationHub* hub = [[SBNotificationHub alloc] initWithConnectionString:@"<connection string>" notificationHubPath:@"<hub name>"];

    NSString* localeString;
    switch (locale) {
        case 0:
            localeString = @"English";
            break;
        case 1:
            localeString = @"French";
            break;
        case 2:
            localeString = @"Mandarin";
            break;
    }

    NSString* template = [NSString stringWithFormat:@"{\"aps\":{\"alert\":\"$(News_%@)\"},\"inAppMessage\":\"$(News_%@)\"}", localeString, localeString];

    [hub registerTemplateWithDeviceToken:self.deviceToken name:@"localizednewsTemplate" jsonBodyTemplate:template expiryTemplate:@"0" tags:categories completion:completion];
}

    Vous utilisez la méthode registerTemplateWithDeviceToken au lieu de registerNativeWithDeviceToken. Quand vous inscrivez un modèle, vous devez fournir le modèle json ainsi qu’un nom pour le modèle (car l’application peut vouloir inscrire différents modèles). Prenez soin d’inscrire vos catégories sous forme de balises, car nous voulons être certains de recevoir les notifications pour ces nouvelles.

    Ajoutez une méthode pour extraire les paramètres régionaux des paramètres utilisateur par défaut :

    - (int) retrieveLocale {
    NSUserDefaults* defaults = [NSUserDefaults standardUserDefaults];

    int locale = [defaults integerForKey:@"BreakingNewsLocale"];

    return locale < 0?0:locale;
}

  2. La classe Notifications étant modifiée, vous devez vous assurer que le paramètre ViewController utilise le nouveau paramètre UISegmentControl. Ajoutez la ligne suivante dans la méthode viewDidLoad pour garantir l’affichage des paramètres régionaux sélectionnés :

    self.Locale.selectedSegmentIndex = [notifications retrieveLocale];

    Ensuite, dans la méthode subscribe, changez votre appel à storeCategoriesAndSubscribe à l’aide du code suivant :

    [notifications storeCategoriesAndSubscribeWithLocale: self.Locale.selectedSegmentIndex categories:[NSSet setWithArray:categories] completion: ^(NSError* error) {
    if (!error) {
        UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Notification" message:
                                @"Subscribed!" delegate:nil cancelButtonTitle:
                                @"OK" otherButtonTitles:nil, nil];
        [alert show];
    } else {
        NSLog(@"Error subscribing: %@", error);
    }
}];

  3. Enfin, vous devez mettre à jour la méthode didRegisterForRemoteNotificationsWithDeviceToken dans votre AppDelegate.m afin que vous puissiez correctement actualiser votre abonnement quand votre application démarre. Changez votre appel à la méthode subscribe de notifications à l’aide du code suivant :

    NSSet* categories = [self.notifications retrieveCategories];
int locale = [self.notifications retrieveLocale];
[self.notifications subscribeWithLocale: locale categories:categories completion:^(NSError* error) {
    if (error != nil) {
        NSLog(@"Error registering for notifications: %@", error);
    }
}];

(facultatif) Envoyer des notifications de modèle localisé à partir de l’application console .NET

Quand vous envoyez des notifications de modèle, vous devez uniquement fournir un ensemble de propriétés. Dans ce scénario, l’ensemble de propriétés contient la version localisée des informations actuelles.

{
    "News_English": "World News in English!",
    "News_French": "World News in French!",
    "News_Mandarin": "World News in Mandarin!"
}

Envoyer des notifications à l’aide d’une application de console C#

Cette section explique comment envoyer des notification à l’aide de l’application console. Le code diffuse des notifications aux appareils iOS et Windows Store. Modifiez la méthode SendTemplateNotificationAsync dans l’application console que vous avez créée précédemment avec le code suivant :

private static async void SendTemplateNotificationAsync()
{
    // Define the notification hub.
    NotificationHubClient hub = NotificationHubClient.CreateClientFromConnectionString(
            "<connection string with full access>", "<hub name>");

    // Apple requires the apns-push-type header for all requests
    var headers = new Dictionary<string, string> {{"apns-push-type", "alert"}};

    // Sending the notification as a template notification. All template registrations that contain 
    // "messageParam" or "News_<local selected>" and the proper tags will receive the notifications. 
    // This includes APNS, GCM, WNS, and MPNS template registrations.
    Dictionary<string, string> templateParams = new Dictionary<string, string>();

    // Create an array of breaking news categories.
    var categories = new string[] { "World", "Politics", "Business", "Technology", "Science", "Sports"};
    var locales = new string[] { "English", "French", "Mandarin" };

    foreach (var category in categories)
    {
        templateParams["messageParam"] = "Breaking " + category + " News!";

        // Sending localized News for each tag too...
        foreach( var locale in locales)
        {
            string key = "News_" + locale;

            // Your real localized news content would go here.
            templateParams[key] = "Breaking " + category + " News in " + locale + "!";
        }

        await hub.SendTemplateNotificationAsync(templateParams, category);
    }
}

La méthode SendTemplateNotificationAsync remet l’information localisée à tous vos appareils, indépendamment de la plateforme. Votre Notification Hub génère et remet la charge utile native appropriée à tous les appareils abonnés à une balise spécifique.

Envoi de notification avec Mobile Services

Dans votre Mobile Service Scheduler, utilisez le script suivant :

var azure = require('azure');
var notificationHubService = azure.createNotificationHubService('<hub name>', '<connection string with full access>');
var notification = {
        "News_English": "World News in English!",
        "News_French": "World News in French!",
        "News_Mandarin", "World News in Mandarin!"
}
notificationHubService.send('World', notification, function(error) {
    if (!error) {
        console.warn("Notification successful");
    }
});

(facultatif) Envoyer des notifications de modèle localisé à partir de l’appareil

Si vous n’avez pas accès à Visual Studio ou si vous souhaitez simplement essayer d’envoyer les notification de modèle localisé directement depuis l’application sur votre appareil. Vous pouvez ajouter les paramètres de modèle localisé à la méthode SendNotificationRESTAPI que vous avez défini précédemment, dans le tutoriel.

- (void)SendNotificationRESTAPI:(NSString*)categoryTag
{
    NSURLSession* session = [NSURLSession sessionWithConfiguration:[NSURLSessionConfiguration
                                defaultSessionConfiguration] delegate:nil delegateQueue:nil];

    NSString *json;

    // Construct the messages REST endpoint
    NSURL* url = [NSURL URLWithString:[NSString stringWithFormat:@"%@%@/messages/%@", HubEndpoint,
                                        HUBNAME, API_VERSION]];

    // Generated the token to be used in the authorization header.
    NSString* authorizationToken = [self generateSasToken:[url absoluteString]];

    //Create the request to add the template notification message to the hub
    NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:url];
    [request setHTTPMethod:@"POST"];

    // Add the category as a tag
    [request setValue:categoryTag forHTTPHeaderField:@"ServiceBusNotification-Tags"];

    // Template notification
    json = [NSString stringWithFormat:@"{\"messageParam\":\"Breaking %@ News : %@\","
            \"News_English\":\"Breaking %@ News in English : %@\","
            \"News_French\":\"Breaking %@ News in French : %@\","
            \"News_Mandarin\":\"Breaking %@ News in Mandarin : %@\","
            categoryTag, self.notificationMessage.text,
            categoryTag, self.notificationMessage.text,  // insert English localized news here
            categoryTag, self.notificationMessage.text,  // insert French localized news here
            categoryTag, self.notificationMessage.text]; // insert Mandarin localized news here

    // Signify template notification format
    [request setValue:@"template" forHTTPHeaderField:@"ServiceBusNotification-Format"];

    // JSON Content-Type
    [request setValue:@"application/json;charset=utf-8" forHTTPHeaderField:@"Content-Type"];

    //Authenticate the notification message POST request with the SaS token
    [request setValue:authorizationToken forHTTPHeaderField:@"Authorization"];

    //Add the notification message body
    [request setHTTPBody:[json dataUsingEncoding:NSUTF8StringEncoding]];

    // Send the REST request
    NSURLSessionDataTask* dataTask = [session dataTaskWithRequest:request
                completionHandler:^(NSData *data, NSURLResponse *response, NSError *error)
        {
        NSHTTPURLResponse* httpResponse = (NSHTTPURLResponse*) response;
            if (error || httpResponse.statusCode != 200)
            {
                NSLog(@"\nError status: %d\nError: %@", httpResponse.statusCode, error);
            }
            if (data != NULL)
            {
                //xmlParser = [[NSXMLParser alloc] initWithData:data];
                //[xmlParser setDelegate:self];
                //[xmlParser parse];
            }
        }];

    [dataTask resume];
}

Étapes suivantes

Dans ce tutoriel, vous avez envoyé des notifications localisées à des appareils iOS. Pour savoir comment envoyer des notifications Push à des utilisateurs spécifiques d’applications iOS, passez au tutoriel suivant :

Notifications Push vers des utilisateurs spécifiques