Azure Notification Hubs Rich Push

Descrição Geral

Para envolver os utilizadores com conteúdos instantâneos e ricos, uma aplicação pode querer ir além do texto simples. Estas notificações promovem interações de utilizadores e apresentam conteúdos como URLs, sons, imagens/cupões, entre outros. Este tutorial baseia-se no tutorial de Notificação dos Utilizadores e mostra como enviar notificações push que incorporam cargas (por exemplo, imagens).

Este tutorial é compatível com iOS 7 e 8.

Three screenshots: an app screen with a Send Push button, a start screen on a device, and a Windows logo with a Back button.

A um nível elevado:

  1. O backend da aplicação:
    • Armazena a carga útil rica (neste caso, imagem) na base de dados de backend/armazenamento local.
    • Envia identificação desta rica notificação para o dispositivo.
  2. Aplicação no dispositivo:
    • Contacta o backend solicitando a carga útil rica com o ID que recebe.
    • Envia notificações dos utilizadores no dispositivo quando a recuperação de dados está concluída, e mostra a carga útil imediatamente quando os utilizadores tocam para saber mais.

Projeto WebAPI

  1. Em Visual Studio, abra o projeto AppBackend que criou no tutorial de Notificar utilizadores.

  2. Obtenha uma imagem com a quais gostaria de notificar os utilizadores e colocá-la numa pasta img no seu diretório de projeto.

  3. Clique em Mostrar Todos os Ficheiros no Explorador de Soluções e clique com o botão direito na pasta para incluir Project.

  4. Com a imagem selecionada, altere a sua Build Action na janela Propriedades para o Recurso Incorporado.

    Screenshot of Solution Explorer. The image file is selected, and in its Properties pane, embedded resource is listed as the build action.

  5. Em Notifications.cs, adicionar a seguinte using declaração:

    using System.Reflection;
    
  6. Substitua a Notifications classe pelo seguinte código. Certifique-se de substituir os espaços reservados pelas credenciais do seu centro de notificação e nome de ficheiro de imagem:

    public class Notification {
        public int Id { get; set; }
        // Initial notification message to display to users
        public string Message { get; set; }
        // Type of rich payload (developer-defined)
        public string RichType { get; set; }
        public string Payload { get; set; }
        public bool Read { get; set; }
    }
    
    public class Notifications {
        public static Notifications Instance = new Notifications();
    
        private List<Notification> notifications = new List<Notification>();
    
        public NotificationHubClient Hub { get; set; }
    
        private Notifications() {
            // Placeholders: replace with the connection string (with full access) for your notification hub and the hub name from the Azure Classics Portal
            Hub = NotificationHubClient.CreateClientFromConnectionString("{conn string with full access}",  "{hub name}");
        }
    
        public Notification CreateNotification(string message, string richType, string payload) {
            var notification = new Notification() {
                Id = notifications.Count,
                Message = message,
                RichType = richType,
                Payload = payload,
                Read = false
            };
    
            notifications.Add(notification);
    
            return notification;
        }
    
        public Stream ReadImage(int id) {
            var assembly = Assembly.GetExecutingAssembly();
            // Placeholder: image file name (for example, logo.png).
            return assembly.GetManifestResourceStream("AppBackend.img.{logo.png}");
        }
    }
    
  7. Em NotificationsController.cs, redefinir NotificationsController com o seguinte código. Isto envia um ID de notificação silenciosa e silencioso para o dispositivo e permite a recuperação da imagem do lado do cliente:

    // Return http response with image binary
    public HttpResponseMessage Get(int id) {
        var stream = Notifications.Instance.ReadImage(id);
    
        var result = new HttpResponseMessage(HttpStatusCode.OK);
        result.Content = new StreamContent(stream);
        // Switch in your image extension for "png"
        result.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("image/{png}");
    
        return result;
    }
    
    // Create rich notification and send initial silent notification (containing id) to client
    public async Task<HttpResponseMessage> Post() {
        // Replace the placeholder with image file name
        var richNotificationInTheBackend = Notifications.Instance.CreateNotification("Check this image out!", "img",  "{logo.png}");
    
        var usernameTag = "username:" + HttpContext.Current.User.Identity.Name;
    
        // Silent notification with content available
        var aboutUser = "{\"aps\": {\"content-available\": 1, \"sound\":\"\"}, \"richId\": \"" + richNotificationInTheBackend.Id.ToString() + "\",  \"richMessage\": \"" + richNotificationInTheBackend.Message + "\", \"richType\": \"" + richNotificationInTheBackend.RichType + "\"}";
    
        // Send notification to apns
        await Notifications.Instance.Hub.SendAppleNativeNotificationAsync(aboutUser, usernameTag);
    
        return Request.CreateResponse(HttpStatusCode.OK);
    }
    
  8. Agora, re-implementar esta aplicação para um Website Azure de forma a torná-la acessível a partir de todos os dispositivos. Clique com o botão direito do rato no projeto AppBackend e selecione Publicar.

  9. Selecione o Website Azure como o seu alvo de publicação. Faça sedida com a sua conta Azure e selecione um Website existente ou novo, e tome nota da propriedade URL de destino no separador 'Ligação '. Referimo-nos a este URL como o seu ponto final de backend mais tarde neste tutorial. Selecione Publicar.

Modifique o projeto iOS

Agora que modificou o seu backend da aplicação para enviar apenas o ID de uma notificação, altere a sua aplicação iOS para lidar com esse ID e recupere a mensagem rica do seu backend:

  1. Abra o seu projeto iOS e permita notificações remotas indo para o seu alvo principal de aplicação na secção Alvos .

  2. Selecione capacidades, ative modos de fundo e verifique a caixa de verificação de Notificações Remotas .

    Screenshot of the iOS project showing the Capabilities screen. Background Modes is turned on, and the Remote notifications check box is selected.

  3. Abra Main.storyboard, e certifique-se de que tem um Controlador de Visualização (referido como Controlador de Visualização Doméstica neste tutorial) a partir do tutorial do Utilizador notificado .

  4. Adicione um Controlador de Navegação ao seu storyboard e arraste o controlador home view para torná-lo a visão principal da navegação. Certifique-se de que o controlador de visualização inicial no inspetor Atributos é selecionado apenas para o Controlador de Navegação.

  5. Adicione um Controlador de visualização ao storyboard e adicione uma visualização de imagem. Esta é a página que os utilizadores verão assim que optarem por saber mais clicando na notificação. O seu storyboard deve parecer o seguinte:

    Screenshot of a storyboard. Three app screens are visible: a navigation view, a home view, and an image view.

  6. Clique no Controlador de Visualização Doméstica no storyboard e certifique-se de que tem homeViewController como o seu ID de Classe Personalizada e Storyboard sob o inspetor de identidade.

  7. Faça o mesmo para o Controlador de Visualização de Imagem, como imageViewController.

  8. Em seguida, crie uma nova classe de Controlador de Visualização chamada imageViewController para lidar com o UI que acabou de criar.

  9. Em imagemViewController.h, adicione o seguinte código às declarações de interface do controlador. Certifique-se de controlar o arrastar da vista de imagem do storyboard para estas propriedades para ligar as duas:

    @property (weak, nonatomic) IBOutlet UIImageView *myImage;
    @property (strong) UIImage* imagePayload;
    
  10. In imageViewController.m, adicione o seguinte no final de viewDidload:

    // Display the UI Image in UI Image View
    [self.myImage setImage:self.imagePayload];
    
  11. Em AppDelegate.m, importe o controlador de imagem que criou:

    #import "imageViewController.h"
    
  12. Adicione uma secção de interface com a seguinte declaração:

    @interface AppDelegate ()
    
    @property UIImage* imagePayload;
    @property NSDictionary* userInfo;
    @property BOOL iOS8;
    
    // Obtain content from backend with notification id
    - (void)retrieveRichImageWithId:(int)richId completion: (void(^)(NSError*)) completion;
    
    // Redirect to Image View Controller after notification interaction
    - (void)redirectToImageViewWithImage: (UIImage *)img;
    
    @end
    
  13. Em AppDelegate, certifique-se de que a sua aplicação se regista para notificações silenciosas em application: didFinishLaunchingWithOptions:

    // Software version
    self.iOS8 = [[UIApplication sharedApplication] respondsToSelector:@selector(registerUserNotificationSettings:)] && [[UIApplication sharedApplication] respondsToSelector:@selector(registerForRemoteNotifications)];
    
    // Register for remote notifications for iOS8 and previous versions
    if (self.iOS8) {
        NSLog(@"This device is running with iOS8.");
    
        // Action
        UIMutableUserNotificationAction *richPushAction = [[UIMutableUserNotificationAction alloc] init];
        richPushAction.identifier = @"richPushMore";
        richPushAction.activationMode = UIUserNotificationActivationModeForeground;
        richPushAction.authenticationRequired = NO;
        richPushAction.title = @"More";
    
        // Notification category
        UIMutableUserNotificationCategory* richPushCategory = [[UIMutableUserNotificationCategory alloc] init];
        richPushCategory.identifier = @"richPush";
        [richPushCategory setActions:@[richPushAction] forContext:UIUserNotificationActionContextDefault];
    
        // Notification categories
        NSSet* richPushCategories = [NSSet setWithObjects:richPushCategory, nil];
    
        UIUserNotificationSettings *settings = [UIUserNotificationSettings settingsForTypes:UIUserNotificationTypeSound |
                                                UIUserNotificationTypeAlert |
                                                UIUserNotificationTypeBadge
                                                                                    categories:richPushCategories];
    
        [[UIApplication sharedApplication] registerUserNotificationSettings:settings];
        [[UIApplication sharedApplication] registerForRemoteNotifications];
    
    }
    else {
        // Previous iOS versions
        NSLog(@"This device is running with iOS7 or earlier versions.");
    
        [[UIApplication sharedApplication] registerForRemoteNotificationTypes: UIRemoteNotificationTypeAlert | UIRemoteNotificationTypeBadge | UIRemoteNotificationTypeSound | UIRemoteNotificationTypeNewsstandContentAvailability];
    }
    
    return YES;
    
  14. Substitua a seguinte implementação para application:didRegisterForRemoteNotificationsWithDeviceToken ter em conta as alterações da UI no storyboard:

    // Access navigation controller which is at the root of window
    UINavigationController *nc = (UINavigationController *)self.window.rootViewController;
    // Get home view controller from stack on navigation controller
    homeViewController *hvc = (homeViewController *)[nc.viewControllers objectAtIndex:0];
    hvc.deviceToken = deviceToken;
    
  15. Em seguida, adicione os seguintes métodos para AppDelegate.m recuperar a imagem do seu ponto final e enviar uma notificação local quando a recuperação estiver completa. Certifique-se de substituir o espaço reservado {backend endpoint} pelo seu ponto final de backend:

    NSString *const GetNotificationEndpoint = @"{backend endpoint}/api/notifications";
    
    // Helper: retrieve notification content from backend with rich notification id
    - (void)retrieveRichImageWithId:(int)richId completion: (void(^)(NSError*)) completion {
        UINavigationController *nc = (UINavigationController *)self.window.rootViewController;
        homeViewController *hvc = (homeViewController *)[nc.viewControllers objectAtIndex:0];
        NSString* authenticationHeader = hvc.registerClient.authenticationHeader;
        // Check if authenticated
        if (!authenticationHeader) return;
    
        NSURLSession* session = [NSURLSession
                                sessionWithConfiguration:[NSURLSessionConfiguration defaultSessionConfiguration]
                                delegate:nil
                                delegateQueue:nil];
    
        NSURL* requestURL = [NSURL URLWithString:[NSString stringWithFormat:@"%@/%d", GetNotificationEndpoint, richId]];
        NSMutableURLRequest* request = [NSMutableURLRequest requestWithURL:requestURL];
        [request setHTTPMethod:@"GET"];
        NSString* authorizationHeaderValue = [NSString stringWithFormat:@"Basic %@", authenticationHeader];
        [request setValue:authorizationHeaderValue forHTTPHeaderField:@"Authorization"];
    
        NSURLSessionDataTask* dataTask = [session dataTaskWithRequest:request completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
    
            NSHTTPURLResponse* httpResponse = (NSHTTPURLResponse*) response;
            if (!error && httpResponse.statusCode == 200) {
                // From NSData to UIImage
                self.imagePayload = [UIImage imageWithData:data];
    
                completion(nil);
            }
            else {
                NSLog(@"Error status: %ld, request: %@", (long)httpResponse.statusCode, error);
                if (error)
                    completion(error);
                else {
                    completion([NSError errorWithDomain:@"APICall" code:httpResponse.statusCode userInfo:nil]);
                }
            }
        }];
        [dataTask resume];
    }
    
    // Handle silent push notifications when id is sent from backend
    - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult result))handler {
        self.userInfo = userInfo;
        int richId = [[self.userInfo objectForKey:@"richId"] intValue];
        NSString* richType = [self.userInfo objectForKey:@"richType"];
    
        // Retrieve image data
        if ([richType isEqualToString:@"img"]) {  
            [self retrieveRichImageWithId:richId completion:^(NSError* error) {
                if (!error){
                    // Send local notification
                    UILocalNotification* localNotification = [[UILocalNotification alloc] init];
    
                    // "5" is arbitrary here to give you enough time to quit out of the app and receive push notifications
                    localNotification.fireDate = [NSDate dateWithTimeIntervalSinceNow:5];
                    localNotification.userInfo = self.userInfo;
                    localNotification.alertBody = [self.userInfo objectForKey:@"richMessage"];
                    localNotification.timeZone = [NSTimeZone defaultTimeZone];
    
                    // iOS8 categories
                    if (self.iOS8) {
                        localNotification.category = @"richPush";
                    }
    
                    [[UIApplication sharedApplication] scheduleLocalNotification:localNotification];
    
                    handler(UIBackgroundFetchResultNewData);
                }
                else{
                    handler(UIBackgroundFetchResultFailed);
                }
            }];
        }
        // Add "else if" here to handle more types of rich content such as url, sound files, etc.
    }
    
  16. Manuseie a notificação local anterior abrindo o controlador de visualização AppDelegate.m de imagem com os seguintes métodos:

    // Helper: redirect users to image view controller
    - (void)redirectToImageViewWithImage: (UIImage *)img {
        UINavigationController *navigationController = (UINavigationController*) self.window.rootViewController;
        UIStoryboard *mainStoryboard = [UIStoryboard storyboardWithName:@"Main" bundle: nil];
        imageViewController *imgViewController = [mainStoryboard instantiateViewControllerWithIdentifier: @"imageViewController"];
        // Pass data/image to image view controller
        imgViewController.imagePayload = img;
    
        // Redirect
        [navigationController pushViewController:imgViewController animated:YES];
    }
    
    // Handle local notification sent above in didReceiveRemoteNotification
    - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification {
        if (application.applicationState == UIApplicationStateActive) {
            // Show in-app alert with an extra "more" button
            UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Notification" message:notification.alertBody delegate:self cancelButtonTitle:@"OK" otherButtonTitles:@"More", nil];
            [alert show];
        }
        // App becomes active from user's tap on notification
        else {
            [self redirectToImageViewWithImage:self.imagePayload];
        }
    }
    
    // Handle buttons in in-app alerts and redirect with data/image
    - (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex {
        // Handle "more" button
        if (buttonIndex == 1)
        {
            [self redirectToImageViewWithImage:self.imagePayload];
        }
        // Add "else if" here to handle more buttons
    }
    
    // Handle notification setting actions in iOS8
    - (void)application:(UIApplication *)application handleActionWithIdentifier:(NSString *)identifier forLocalNotification:(UILocalNotification *)notification completionHandler:(void (^)())completionHandler {
        // Handle richPush related buttons
        if ([identifier isEqualToString:@"richPushMore"]) {
            [self redirectToImageViewWithImage:self.imagePayload];
        }
        completionHandler();
    }
    

Executar a Aplicação

  1. No XCode, execute a aplicação num dispositivo físico iOS (as notificações push não funcionarão no simulador).
  2. Na aplicação iOS UI, introduza um nome de utilizador e senha do mesmo valor para autenticação e clique em Iniciar sessão.
  3. Clique em Enviar o push e deverá ver um alerta in-app. Se clicar em Mais, será levado à imagem que escolheu incluir no seu apoio de aplicações.
  4. Também pode clicar em Enviar a pressão e premir imediatamente o botão inicial do seu dispositivo. Dentro de momentos, receberá uma notificação push. Se tocar nele ou clicar em Mais, será levado para a sua aplicação e para o rico conteúdo de imagem.