Inviare notifiche push alle app Chrome con Hub di notifica di AzureSend push notifications to Chrome apps with Azure Notification Hubs

Questo articolo illustra come usare Hub di notifica di Azure per inviare notifiche push a un'app Chrome, visualizzata nel contesto del browser Google Chrome.This article shows you how to use Azure Notification Hubs to send push notifications to a Chrome App, which is displayed within the context of the Google Chrome browser. In questa esercitazione si crea un'app Chrome che riceve notifiche push tramite Google Cloud Messaging (GCM).In this tutorial, you create a Chrome app that receives push notifications by using Google Cloud Messaging (GCM).

Nota

Per completare l'esercitazione, è necessario disporre di un account Azure attivo.To complete this tutorial, you must have an active Azure account. Se non si dispone di un account Azure, è possibile creare un account di valutazione gratuito in pochi minuti.If you don't have an account, you can create a free trial account in just a couple of minutes. Per informazioni dettagliate, vedere la pagina relativa alla versione di valutazione gratuita di Azure.For details, see Azure Free Trial.

Questa esercitazione descrive le operazioni di base per abilitare le notifiche push:The tutorial walks you through these basic steps to enable push notifications:

Nota

Le notifiche push alle app Chrome non sono notifiche generiche all'interno del browser, ma sono specifiche del modello di estendibilità del browser. Per informazioni dettagliate, vedere l'articolo che fornisce una panoramica delle app Chrome.Chrome app push notifications are not generic in-browser notifications - they are specific to the browser extensibility model (see [Chrome Apps Overview] for details). Oltre che in browser desktop, le app Chrome vengono eseguite su dispositivi mobili (iOS e Android) tramite Apache Cordova.In addition to the desktop browser, Chrome apps run on mobile (Android and iOS) through Apache Cordova. Per altre informazioni, vedere la pagina relativa alle app Chrome su dispositivi mobili.For more information, see [Chrome Apps on Mobile].

La configurazione di GCM e di Hub di notifica di Azure è identica alla configurazione per Android, perché Google Cloud Messaging per Chrome è stato ritirato e lo stesso GCM ora supporta sia dispositivi Android che istanze di Chrome.Configuring GCM and Azure Notification Hubs is identical to configuring for Android, since [Google Cloud Messaging for Chrome] has been deprecated and the same GCM now supports both Android devices and Chrome instances.

Abilitare Google Cloud MessagingEnable Google Cloud Messaging

  1. Passare al sito Web Google Cloud Console , accedere con le credenziali dell'account Google e fare clic su Create Project .Navigate to the Google Cloud Console website, sign in with your Google account credentials, and then click the Create Project button. Inserire un valore appropriato nel campo Nome progetto e fare clic sul pulsante Crea.Provide an appropriate Project Name, and then click the Create button.

    Google Cloud Console - Create Project

  2. Prendere nota del valore di Project Number (Numero progetto) riportato nella pagina Projects (Progetti) per il progetto appena creato.Make a note of the Project Number on the Projects page for the project that you created. Il numero di progetto verrà usato come ID mittente per GCM nell'app Chrome per la registrazione in GCM.You use the project number as the GCM Sender ID in the Chrome App to register with GCM.

    Google Cloud Console - Project Number

  3. Nel riquadro sinistro fare clic su APIs & auth (API e autenticazione), quindi scorrere verso il basso e fare clic sull'interruttore per abilitare Google Cloud Messaging per Android.In the left pane, click APIs & auth, and then scroll down and click the toggle to enable Google Cloud Messaging for Android. Non è necessario abilitare Google Cloud Messaging for Chrome.You don't have to enable Google Cloud Messaging for Chrome.

    Google Cloud Console - Server Key

  4. Nel riquadro a sinistra fare clic su Credenziali > Crea nuova chiave > Chiave server > Crea.In the left pane, click Credentials > Create New Key > Server Key > Create.

    Google Cloud Console - Credentials

  5. Prendere nota del valore API Keyper il server.Make a note of the server API Key. Questo valore verrà usato nella sezione successiva per configurare l'hub di notifica per l'invio di notifiche push a GCM.You use this value to coinfgure the notification hub in the next section to enable it to send push notifications to GCM.

    Google Cloud Console - API Key

Configurare l'hub di notificaConfigure your notification hub

  1. Accedere al portale di Azure.

  2. Selezionare Crea una risorsa > Web e dispositivi mobili > Hub di notifica.

    Portale di Azure: creare un hub di notifica

  3. Nella casella Hub di notifica digitare un nome univoco. Selezionare l'area, la sottoscrizione e il gruppo di risorse (se già disponibili).

    Se non si ha già uno spazio dei nomi del bus di servizio, è possibile usare il nome predefinito, che viene creato in base al nome dell'hub (se lo spazio dei nomi è disponibile).

    Se si ha già un spazio dei nomi del bus di servizio in cui si vuole creare l'hub, seguire questa procedura

    a. Nell'area Spazio dei nomi selezionare il collegamento Seleziona esistente.

    b. Selezionare Create.

    Portale di Azure: impostare le proprietà dell'hub di notifica

  4. Dopo avere creato lo spazio dei nomi e l'hub di notifica, aprirlo selezionando Tutte le risorse e quindi selezionare l'hub di notifica creato nell'elenco.

    Portale di Azure: pagina del portale dell'hub di notifica

  5. Selezionare Criteri di accesso dall'elenco. Prendere nota delle due stringhe di connessione disponibili. Sono necessarie in un secondo momento per gestire le notifiche push.

    Importante

    NON usare DefaultFullSharedAccessSignature nell'applicazione. Deve essere usato solo nel back-end.

    Portale di Azure: stringhe di connessione dell'hub di notifica

  1. Nella pagina Impostazioni selezionare Servizi di notifica e quindi Google (GCM).On the Settings page, select Notification Services and then Google (GCM). Immettere la chiave API e salvare.Enter the API key and save.

    Hub di notifica di Azure - Google (GCM)

Connettere l'app Chrome all'hub di notificaConnect your Chrome App to the notification hub

A questo punto,l'hub di notifica è configurato per l'uso con GCM e sono disponibili le stringhe di connessione per registrare l'app per l'invio e la ricezione di notifiche push.Your notification hub is now configured to work with GCM, and you have the connection strings to register your app to both receive and send push notifications.

Creare una nuova app ChromeCreate a new Chrome App

L'esempio seguente è basato sull'esempio GCM per app Chrome e usa l'approccio consigliato per la creazione di un'app Chrome.The following sample is based on the [Chrome App GCM Sample] and uses the recommended way to create a Chrome App. Questa sezione illustra i passaggi specifici per Hub di notifica di Azure.This section highlights the steps that are specific to Azure Notification Hubs.

Nota

È consigliabile scaricare l'origine dell'app Chrome dall' esempio di hub di notifica per l'app Chrome.We recommend that you download the source for this Chrome App from [Chrome App Notification Hub Sample].

L'app Chrome viene creata tramite JavaScript ed è possibile usare il proprio editor di testo preferito a questo scopo.The Chrome App is created via JavaScript, and you can use any of your preferred word editors for creating it. L'immagine seguente mostra come si presenta l'app Chrome:The following image shows how the Chrome App looksd like:

App Google Chrome

  1. Creare una cartella e denominarla ChromePushApp.Create a folder and name it ChromePushApp. Il nome è arbitrario. Se si assegna un nome diverso, assicurarsi di sostituire il percorso nei segmenti di codice necessari.The name is arbitrary - if you name it something different, make sure you substitute the path in the required code segments.
  2. Scaricare la libreria crypto-js nella cartella creata nel secondo passaggio.Download the [crypto-js library] in the folder you created in the second step. Questa cartella della libreria contiene due sottocartelle: components e rollups.This library folder contains two subfolders: components and rollups.
  3. Creare un file manifest.json .Create a manifest.json file. Tutte le app Chrome sono accompagnate da un file manifesto che contiene i metadati dell'app e, più importante, tutte le autorizzazioni concesse all'applicazione quando viene installata dall'utente.All Chrome Apps are backed by a manifest file that contains the app metadata and, most importantly, all permissions that are granted to the app when the user installs it.

     {
       "name": "NH-GCM Notifications",
       "description": "Chrome platform app.",
       "manifest_version": 2,
       "version": "0.1",
       "app": {
         "background": {
           "scripts": ["background.js"]
         }
       },
       "permissions": ["gcm", "storage", "notifications", "https://*.servicebus.windows.net/*"],
       "icons": { "128": "gcm_128.png" }
     }
    

    Si noti l'elemento permissions, che specifica che all'app Chrome è consentito ricevere notifiche push da GCM.Notice the permissions element, which specifies that this Chrome App is allowed to receive push notifications from GCM. Deve anche specificare l'URI di Hub di notifica di Azure in cui l'app Chrome eseguirà una chiamata REST per la registrazione.It must also specify the Azure Notification Hubs URI where the Chrome App makes a REST call to register. L'app di esempio usa anche un file di icona, gcm_128.png, disponibile nell'origine riutilizzata dall'esempio GCM originale.The sample app also uses an icon file, gcm_128.png, that you find at the source that's reused from the original GCM sample. È possibile sostituirlo con qualsiasi immagine che soddisfa i criteri relativi alle icone.You can substitute it for any image that fits the icon criteria.

  4. Creare un file denominato background.js con il codice seguente:Create a file called background.js with the following code:

     // Returns a new notification ID used in the notification.
     function getNotificationId() {
       var id = Math.floor(Math.random() * 9007199254740992) + 1;
       return id.toString();
     }
    
     function messageReceived(message) {
       // A message is an object with a data property that
       // consists of key-value pairs.
    
       // Concatenate all key-value pairs to form a display string.
       var messageString = "";
       for (var key in message.data) {
         if (messageString != "")
           messageString += ", "
         messageString += key + ":" + message.data[key];
       }
       console.log("Message received: " + messageString);
    
       // Pop up a notification to show the GCM message.
       chrome.notifications.create(getNotificationId(), {
         title: 'GCM Message',
         iconUrl: 'gcm_128.png',
         type: 'basic',
         message: messageString
       }, function() {});
     }
    
     var registerWindowCreated = false;
    
     function firstTimeRegistration() {
       chrome.storage.local.get("registered", function(result) {
    
         registerWindowCreated = true;
         chrome.app.window.create(
           "register.html",
           {  width: 520,
              height: 500,
              frame: 'chrome'
           },
           function(appWin) {}
         );
       });
     }
    
     // Set up a listener for GCM message event.
     chrome.gcm.onMessage.addListener(messageReceived);
    
     // Set up listeners to trigger the first-time registration.
     chrome.runtime.onInstalled.addListener(firstTimeRegistration);
     chrome.runtime.onStartup.addListener(firstTimeRegistration);
    

    Questo file determina la visualizzazione del codice HTML della finestra dell'app Chrome (register.html) e definisce anche il gestore messageReceived per la gestione della notifica push in ingresso.This file pops up the Chrome App window HTML (register.html) and also defines the handler messageReceived to handle the incoming push notification.

  5. Creare un file denominato register.html, che definisce l'interfaccia utente dell'app Chrome.Create a file called register.html, which defines the UI of the Chrome App.

    Nota

    Questo esempio usa CryptoJS v3.1.2.This sample uses CryptoJS v3.1.2. Se è stata scaricata un'altra versione della libreria, assicurarsi di sostituire correttamente la versione nel percorso src .If you downloaded another version of the library, make sure you properly substitute the version in the src path.

     <html>
    
     <head>
     <title>GCM Registration</title>
     <script src="register.js"></script>
     <script src="CryptoJS v3.1.2/rollups/hmac-sha256.js"></script>
     <script src="CryptoJS v3.1.2/components/enc-base64-min.js"></script>
     </head>
    
     <body>
    
     Sender ID:<br/><input id="senderId" type="TEXT" size="20"><br/>
     <button id="registerWithGCM">Register with GCM</button>
     <br/>
     <br/>
     <br/>
    
     Notification Hub Name:<br/><input id="hubName" type="TEXT" style="width:400px"><br/><br/>
     Connection String:<br/><textarea id="connectionString" type="TEXT" style="width:400px;height:60px"></textarea>
    
     <br/>
    
     <button id="registerWithNH" disabled="true">Register with Azure Notification Hubs</button>
    
     <br/>
     <br/>
    
     <textarea id="console" type="TEXT" readonly style="width:500px;height:200px;background-color:#e5e5e5;padding:5px"></textarea>
    
     </body>
    
     </html>
    
  6. Creare un file denominato register.js con il codice riportato in questo passaggio.Create a file called register.js with the code in this step. Questo file specifica lo script di base di register.html.This file specifies the script behind register.html. Le app Chrome non consentono l'esecuzione in linea, quindi è necessario creare uno script separato per l'interfaccia utente.Chrome Apps do not allow inline execution, so you have to create a separate backing script for your UI.

     var registrationId = "";
     var hubName        = "", connectionString = "";
     var originalUri    = "", targetUri = "", endpoint = "", sasKeyName = "", sasKeyValue = "", sasToken = "";
    
     window.onload = function() {
        document.getElementById("registerWithGCM").onclick = registerWithGCM;  
        document.getElementById("registerWithNH").onclick = registerWithNH;
        updateLog("You have not registered yet. Please provider sender ID and register with GCM and then with  Notification Hubs.");
     }
    
     function updateLog(status) {
       currentStatus = document.getElementById("console").innerHTML;
       if (currentStatus != "") {
         currentStatus = currentStatus + "\n\n";
       }
    
       document.getElementById("console").innerHTML = currentStatus  + status;
     }
    
     function registerWithGCM() {
       var senderId = document.getElementById("senderId").value.trim();
       chrome.gcm.register([senderId], registerCallback);
    
       // Prevent register button from being clicked again before the registration finishes.
       document.getElementById("registerWithGCM").disabled = true;
     }
    
     function registerCallback(regId) {
       registrationId = regId;
       document.getElementById("registerWithGCM").disabled = false;
    
       if (chrome.runtime.lastError) {
         // When the registration fails, handle the error and retry the
         // registration later.
         updateLog("Registration failed: " + chrome.runtime.lastError.message);
         return;
       }
    
       updateLog("Registration with GCM succeeded.");
       document.getElementById("registerWithNH").disabled = false;
    
       // Mark that the first-time registration is done.
       chrome.storage.local.set({registered: true});
     }
    
     function registerWithNH() {
       hubName = document.getElementById("hubName").value.trim();
       connectionString = document.getElementById("connectionString").value.trim();
       splitConnectionString();
       generateSaSToken();
       sendNHRegistrationRequest();
     }
    
     // From http://msdn.microsoft.com/library/dn495627.aspx
     function splitConnectionString()
     {
       var parts = connectionString.split(';');
       if (parts.length != 3)
       throw "Error parsing connection string";
    
       parts.forEach(function(part) {
         if (part.indexOf('Endpoint') == 0) {
         endpoint = 'https' + part.substring(11);
         } else if (part.indexOf('SharedAccessKeyName') == 0) {
         sasKeyName = part.substring(20);
         } else if (part.indexOf('SharedAccessKey') == 0) {
         sasKeyValue = part.substring(16);
         }
       });
    
       originalUri = endpoint + hubName;
     }
    
     function generateSaSToken()
     {
       targetUri = encodeURIComponent(originalUri.toLowerCase()).toLowerCase();
       var expiresInMins = 10; // 10 minute expiration
    
       // Set expiration in seconds.
       var expireOnDate = new Date();
       expireOnDate.setMinutes(expireOnDate.getMinutes() + expiresInMins);
       var expires = Date.UTC(expireOnDate.getUTCFullYear(), expireOnDate
         .getUTCMonth(), expireOnDate.getUTCDate(), expireOnDate
         .getUTCHours(), expireOnDate.getUTCMinutes(), expireOnDate
         .getUTCSeconds()) / 1000;
       var tosign = targetUri + '\n' + expires;
    
       // Using CryptoJS.
       var signature = CryptoJS.HmacSHA256(tosign, sasKeyValue);
       var base64signature = signature.toString(CryptoJS.enc.Base64);
       var base64UriEncoded = encodeURIComponent(base64signature);
    
       // Construct authorization string.
       sasToken = "SharedAccessSignature sr=" + targetUri + "&sig="
                       + base64UriEncoded + "&se=" + expires + "&skn=" + sasKeyName;
     }
    
     function sendNHRegistrationRequest()
     {
       var registrationPayload =
       "<?xml version=\"1.0\" encoding=\"utf-8\"?>" +
       "<entry xmlns=\"http://www.w3.org/2005/Atom\">" +
           "<content type=\"application/xml\">" +
               "<GcmRegistrationDescription xmlns:i=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns=\"http://schemas.microsoft.com/netservices/2010/10/servicebus/connect\">" +
                   "<GcmRegistrationId>{GCMRegistrationId}</GcmRegistrationId>" +
               "</GcmRegistrationDescription>" +
           "</content>" +
       "</entry>";
    
       // Update the payload with the registration ID obtained earlier.
       registrationPayload = registrationPayload.replace("{GCMRegistrationId}", registrationId);
    
       var url = originalUri + "/registrations/?api-version=2014-09";
       var client = new XMLHttpRequest();
    
       client.onload = function () {
         if (client.readyState == 4) {
           if (client.status == 200) {
             updateLog("Notification Hub Registration succesful!");
             updateLog(client.responseText);
           } else {
             updateLog("Notification Hub Registration did not succeed!");
             updateLog("HTTP Status: " + client.status + " : " + client.statusText);
             updateLog("HTTP Response: " + "\n" + client.responseText);
           }
         }
       };
    
       client.onerror = function () {
             updateLog("ERROR - Notification Hub Registration did not succeed!");
       }
    
       client.open("POST", url, true);
       client.setRequestHeader("Content-Type", "application/atom+xml;type=entry;charset=utf-8");
       client.setRequestHeader("Authorization", sasToken);
       client.setRequestHeader("x-ms-version", "2014-09");
    
       try {
           client.send(registrationPayload);
       }
       catch(err) {
           updateLog(err.message);
       }
     }
    

    Lo script contiene i parametri chiave seguenti:The script has the following key parameters:

    • window.onload definisce gli eventi clic dei due pulsanti nell'interfaccia utente.window.onload defines the button-click events of the two buttons on the UI. Il primo gestore di eventi clic del pulsante effettua la registrazione in GCM, mentre l'altro usa l'ID registrazione restituito dopo la registrazione in GCM per effettuare la registrazione in Hub di notifica di Azure.The first button-click event handler registers with GCM, and the other one uses the registration ID that's returned after registration with GCM to register with Azure Notification Hubs.
    • updateLog è la funzione che consente al codice di registrare informazioni.updateLog is the function that allows the code log information.
    • registerWithGCM è il primo gestore di eventi clic del pulsante che esegue la chiamata chrome.gcm.register a GCM per registrare questa istanza corrente dell'app Chrome.registerWithGCM is the first button-click handler, which makes the chrome.gcm.register call to GCM to register the current Chrome App instance.
    • registerCallback è la funzione di callback che riceve la chiamata quando viene restituita la chiamata di registrazione GCM.registerCallback is the callback function that gets called when the GCM registration call returns.
    • registerWithNH è il secondo gestore di eventi clic del pulsante che esegue la registrazione con Hub di notifica.registerWithNH is the second button-click handler, which registers with Notification Hubs. Ottiene hubName e connectionString specificati dall'utente e crea la chiamata all'API REST per la registrazione con Hub di notifica.It gets hubName and connectionString (which the user has specified) and crafts the Notification Hubs Registration REST API call.
    • splitConnectionString e generateSaSToken sono helper che rappresentano l'implementazione JavaScript del processo di creazione di un token di firma di accesso condiviso da usare in tutte le chiamate all'API REST.splitConnectionString and generateSaSToken are helpers that represent the JavaScript implementation of a SaS token creation process, that must be used in all REST API calls. Per altre informazioni, vedere Concetti comuni.For more information, see Common Concepts.
    • sendNHRegistrationRequest è la funzione che esegue una chiamata HTTP REST a Hub di notifica di Azure.sendNHRegistrationRequest is the function that makes an HTTP REST call to Azure Notification Hubs.
    • registrationPayload definisce il payload XML di registrazione.registrationPayload defines the registration XML payload. Per altre informazioni, vedere Creare una registrazione dell'API REST per l'Hub di notifica.For more information, see [Create Registration NH REST API]. È necessario aggiornare l'ID registrazione incluso con il valore ricevuto da GCM.You need to update the registration ID in it with the value received from GCM.
    • client è un'istanza di XMLHttpRequest usata dall'applicazione per eseguire la richiesta HTTP POST.client is an instance of XMLHttpRequest that the application uses to make the HTTP POST request. Aggiornare l'intestazione Authorization con sasToken.Update the Authorization header with sasToken. Il completamento di questa chiamata determina la registrazione dell'istanza dell'app Chrome in Hub di notifica di Azure.Successful completion of this call registers this Chrome App instance with Azure Notification Hubs.

La struttura di cartelle complessiva per questo progetto sarà analoga alla seguente: App di Google Chrome - Struttura cartelleThe overall folder structure for this project should resemble this: Google Chrome App - Folder Structure

Configurare e testare l'app ChromeSet up and test your Chrome App

  1. Aprire il browser Chrome.Open your Chrome browser. Aprire le estensioni Chrome e abilitare la Modalità sviluppatore.Open Chrome extensions and enable Developer mode.

    Google Chrome - Enable Developer Mode

  2. Fare clic su Load unpacked extension e selezionare la cartella in cui sono stati creati i file.Click Load unpacked extension and navigate to the folder where you created the files. È facoltativamente possibile usare anche lo strumento per sviluppatori di estensioni e app Chrome.You can also optionally use the Chrome Apps & Extensions Developer Tool. Questo strumento è a sua volta un'app Chrome (installata da Chrome Web Store) e fornisce capacità di debug avanzate per lo sviluppo di app Chrome.This tool is a Chrome App in itself (installed from the Chrome Web Store) and provides advanced debugging capabilities for your Chrome App development.

    Google Chrome - Load Unpacked Extension

  3. Se l'app Chrome è stata creata senza errori, verrà visualizzata.If the Chrome App is created without any errors, then you see your Chrome App show up.

    Google Chrome - Chrome App Display

  4. Immettere il valore Nome progetto ottenuto in precedenza da Google Cloud Console come ID del mittente e fare clic su Register with GCM (Registra con GCM).Enter the Project Number that you got earlier from the Google Cloud Console as the sender ID, and click Register with GCM. Verrà visualizzato un messaggio Registration with GCM succeededYou must see the message Registration with GCM succeeded.

    Google Chrome - Chrome App Customization

  5. Immettere i valori Nome hub di notifica e DefaultListenSharedAccessSignature ottenuti in precedenza dal portale, quindi fare clic su Register with Azure Notification Hub (Registra con l'hub di notifica di Azure).Enter your Notification Hub Name and the DefaultListenSharedAccessSignature that you obtained from the portal earlier, and click Register with Azure Notification Hub. Verrà visualizzato un messaggio Notification Hub Registration successful!You must see the message Notification Hub Registration successful! e i dettagli della risposta della registrazione, che contiene l'ID di registrazione di Hub di notifica di Azure.and the details of the registration response, which contains the Azure Notification Hubs registration ID.

    Google Chrome - Specify Notification Hub Details

Inviare una notifica all'app ChromeSend a notification to your Chrome App

A scopo di test, inviare notifiche push a Chrome usando un'applicazione console .NET.For testing purposes, send Chrome push notifications by using a .NET console application.

Nota

È possibile inviare notifiche push con Hub di notifica da qualsiasi back-end tramite l'interfaccia REST pubblica.You can send push notifications with Notification Hubs from any backend via the public REST interface. Per altri esempi multipiattaforma, vedere il portale della documentazione.Check out the documentation portal for more cross-platform examples.

  1. In Visual Studio scegliere Nuovo dal menu File, quindi fare clic su Progetto.In Visual Studio, from the File menu, select New and then Project. In Visual C# fare clic su Windows e Applicazione console, quindi selezionare OK.Under Visual C#, click Windows and Console Application, and then click OK. Questo passaggio crea un nuovo progetto di applicazione console.This step creates a new console application project.
  2. Nel menu Strumenti fare clic su Gestione pacchetti NuGet e quindi su Console di Gestione pacchetti.From the Tools menu, click Nuget Package Manager and then Package Manager Console. Nella finestra in basso verrà visualizzata la console di Gestione pacchetti.You see displays the Package Manager Console in the bottom window.
  3. Nella finestra della console eseguire il comando seguente:In the console window, execute the following command:

     Install-Package Microsoft.Azure.NotificationHubs
    
    This adds a reference to the Azure Service Bus SDK with the <a href="http://nuget.org/packages/  WindowsAzure.ServiceBus/">WindowsAzure.ServiceBus NuGet package</a>.
    
  4. Aprire Program.cs e aggiungere l'istruzione using:Open Program.cs and add the following using statement:

     using Microsoft.Azure.NotificationHubs;
    
  5. Nella classe Program aggiungere il metodo seguente.In the Program class, add the following method:

     private static async void SendNotificationAsync()
     {
         NotificationHubClient hub = NotificationHubClient.CreateClientFromConnectionString("<connection string with full access>", "<hub name>");
         String message = "{\"data\":{\"message\":\"Hello Chrome from Azure Notification Hubs\"}}";
         await hub.SendGcmNativeNotificationAsync(message);
     }
    
    Make sure to replace the `<hub name>` placeholder with the name of the notification hub that appears in the [portal](https://portal.azure.com) in your Notification Hub blade. Also, replace the connection string placeholder with the connection string called `DefaultFullSharedAccessSignature` that you obtained in the notification hub configuration section.
    

    Nota

    Assicurarsi di usare la stringa di connessione con accesso Full, non con accesso Listen.Make sure that you use the connection string with Full access, not Listen access. La stringa di connessione di accesso di tipo Listen non ha le autorizzazioni per l'invio di notifiche push.The Listen access connection string does not grant permissions to send push notifications.

  6. Aggiungere le chiamate seguenti al metodo Main :Add the following calls in the Main method:

      SendNotificationAsync();
      Console.ReadLine();
    
  7. Assicurarsi che Chrome sia in esecuzione ed eseguire l'applicazione console.Make sure that Chrome is running, and run the console application.
  8. Sul desktop dovrebbe essere visualizzato il popup di notifica seguente.You should see the following notification pop-up on your desktop.

    Google Chrome - Notification

  9. È anche possibile visualizzare tutte le notifiche tramite la finestra delle notifiche di Chrome sulla barra delle applicazioni (in Windows) quando Chrome è in esecuzione.You can also see all your notifications by using the Chrome Notifications window in the taskbar (in Windows) when Chrome is running.

    Google Chrome - Notifications List

Nota

Non è necessario che l'app Chrome sia in esecuzione o aperta nel browser, anche se il browser Chrome deve essere in esecuzione.You don't need to have the Chrome App running or open in the browser (though the Chrome browser itself must be running). È inoltre possibile ottenere una vista consolidata di tutte le notifiche nella finestra delle notifiche di Chrome.You also get a consolidated view of all your notifications in the Chrome Notifications window.

Passaggi successivi Next steps

Per altre informazioni sugli hub di notifica, vedere Panoramica dell'Hub di notifica.Learn more about Notification Hubs in [Notification Hubs Overview].

Per rivolgersi a utenti specifici, vedere l'esercitazione Uso di Hub di notifica di Azure per inviare notifiche agli utenti .To target specific users, refer to the [Azure Notification Hubs Notify Users] tutorial.

Per segmentare gli utenti in base ai gruppi di interesse, eseguire l'esercitazione Uso di Hub di notifica per inviare le ultime notizie .If you want to segment your users by interest groups, you can follow the [Azure Notification Hubs breaking news] tutorial.