Condividi tramite


Notifiche push Web con Hub di notifica di Azure

Questo articolo descrive come inviare notifiche push del browser a singoli utenti usando Hub di notifica di Azure.

A livello generale, il processo è:

  1. Impostare le credenziali:

  2. Creare registrazioni e installazioni.

  3. Inviare notifiche push:

Informazioni generali

Il push Web (o il push del browser) è un tipo di notifica che i clienti ricevono nei browser desktop o in alcuni casi browser per dispositivi mobili, in base al sito Web.

Hub di notifica di Azure supporta ora il push del browser per tutti i principali browser, tra cui Microsoft Edge, Google Chrome e Mozilla Firefox. Apple Safari non è incluso. Per Apple Safari, è possibile usare il supporto APNS esistente come descritto in Configurare le notifiche push di Safari con l'autenticazione basata su certificati.

Il push del browser è supportato su più piattaforme nei dispositivi con i sistemi operativi e i browser seguenti.

Supporto push del browser nei computer portatili:

Sistema operativo Browser
Sistema operativo Windows Google Chrome v48+
Microsoft Edge v17+
Mozilla Firefox v44+
Safari v7+
Opera v42+
macOS Chrome v48+
Firefox v44+
Safari v7+
Opera v42+
Sistema operativo Linux Chrome v48+
Firefox v44+
Safari v7+
Opera v42+

Supporto push del browser nei PC tablet:

Sistema operativo Browser
Sistema operativo Windows Chrome v48+
Firefox v44+
Opera v42+
Ios Non supportato.
Sistema operativo Android Chrome v48+
Firefox v44+
Opera v42+

Supporto push del browser nei dispositivi mobili:

Sistema operativo Browser
Ios Non supportato.
Sistema operativo Android Chrome v48+
Firefox v44+
Opera v42+

Impostare le credenziali

Per sottoscrivere le notifiche push del browser nel sito Web, è possibile usare le chiavi VAPID . È possibile generare credenziali VAPID usando servizi come il generatore di chiavi VAPID. Le credenziali dovrebbero essere simili all'esempio seguente:

{ 
    "location": "South Central US", 
    "properties": { 
        "browserCredential": { 
            "properties": { 
                "subject": "mailto:email@microsoft.com", 
                "vapidPublicKey": "some-vapid-public-key", 
                "vapidPrivateKey":"some-vapid-private-key" 
            } 
        } 
    } 
} 

Impostare le credenziali nel portale di Azure

Per impostare le credenziali push del browser nel portale di Azure, seguire questa procedura:

  1. Nel portale di Azure aprire il pannello Browser (Web Push) nell'hub di notifica.

    Screenshot che mostra il pannello Browser Web Push nei Hub di notifiche.

  2. Immettere le chiavi VAPID esistenti o generare una nuova coppia di chiavi VAPID usando un servizio come il generatore di chiavi VAPID.

  3. Seleziona Salva.

Impostare le credenziali usando l'API REST

È anche possibile impostare le credenziali del browser per il push del browser utilizzando l'API REST, ad esempio il metodo API REST di Creazione o Aggiornamento Hub, l'API di Azure Resource Manager o la V2 RP.

Immettere le credenziali in questo formato, specificando l'ID di sottoscrizione, il gruppo di risorse, lo spazio dei nomi e l'hub di notifica.

https://management.azure.com/subscriptions/{subscription}/resourceGroups/{resource-group}/providers/Microsoft.NotificationHubs/namespaces/{namespace}/notificationHubs/{hub}api-version=2016-03-01

Impostare le credenziali usando Gli SDK di Azure

È possibile impostare le credenziali per il push del browser usando gli SDK di Azure. Ecco un esempio che usa .NET SDK:

var browserCreds = new BrowserCredential 
{ 
    Subject = "<subject>", 
    VapidPublicKey = "<vapid public key>", 
    VapidPrivateKey = "<vapid private key>", 
} 

e:

await nhManagementClient.NotificationHubs.CreateOrUpdateAsync(config.ResourceGroupName, config.NamespaceName, config.HubName, new NotificationHubCreateOrUpdateParameters(config.Location) 
{ 
   BrowserCredential = browserCreds 
});

Creare registrazioni e installazioni

Gli invii in blocco richiedono registrazioni o installazioni. È anche possibile usare le registrazioni e le installazioni negli invii di debug.

Gli esempi seguenti illustrano il corpo della richiesta di registrazione per una registrazione nativa, una registrazione del modello e un'installazione del browser.

Corpo della richiesta di registrazione nativa

<?xml version="1.0" encoding="utf-8"?><entry xmlns="http://www.w3.org/2005/Atom"><content type="application/xml"><BrowserRegistrationDescription xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.microsoft.com/netservices/2010/10/servicebus/connect"><Endpoint></Endpoint><P256DH></P256DH><Auth></Auth></BrowserRegistrationDescription></content></entry> 

Corpo della richiesta di registrazione del modello del browser

<?xml version="1.0" encoding="utf-8"?> 
<entry xmlns="http://www.w3.org/2005/Atom"> 
    <content type="application/xml"> 
        <BrowserTemplateRegistrationDescription xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.microsoft.com/netservices/2010/10/servicebus/connect"> 
            <Endpoint></Endpoint> 
            <P256DH></P256DH> 
            <Auth></Auth> 
            <BodyTemplate><![CDATA[{"title":"asdf","message":"xts"}]]></BodyTemplate> 
        </BrowserTemplateRegistrationDescription> 
    </content> 
</entry> 

Corpo della richiesta di installazione

{  
    "installationId": "installation-id", 
    "platform": "browser", 
    "pushChannel": { 
            "endpoint": "", 
            "p256dh": "", 
            "auth": "" 
        } 
}   

Creare registrazioni native (SDK)

await notificationHubClient.CreateBrowserNativeRegistrationAsync(subscriptionInfo, tagSet);

Creare registrazioni dei modelli (SDK)

await notificationHubClient.CreateBrowserTemplateRegistrationAsync(subscriptionInfo, template, tagSet);

Creare installazioni di browser (SDK)

var browserPushSubscription = new BrowserPushSubscription 
            { 
                Endpoint = "", 
                P256DH = "", 
                Auth = "", 
            }; 

var browserInstallation = new BrowserInstallation 
            { 
                InstallationId = installationId, 
                Tags = tags, 
                Subscription = browserPushSubscription, 
                UserId = userId, 
                ExpirationTime = DateTime.UtcNow.AddDays(1), 
            }; 

await notificationHubClient.CreateOrUpdateInstallationAsync(browserInstallation);

Inviare notifiche push

Dopo aver impostato le credenziali per il push del browser e aver creato registrazioni e installazioni per i dispositivi, è possibile creare notifiche push. Questa sezione descrive come creare una notifica per l'invio diretto, l'invio a un pubblico e l'invio di prova (debug).

Creare invii diretti

Per un invio diretto, è necessario l'URI dell'endpoint, la chiave p25DH e il segreto di autenticazione da una sottoscrizione del browser. Per altre informazioni sulle notifiche di invio diretto, vedere Direct Send.For more information about direct send notifications, see Direct send.

Per creare una notifica di invio diretto, seguire questa procedura:

  1. Impostare le intestazioni seguenti per il push del browser:

    • ServiceBusNotification-Format - browser
    • ServiceBusNotification-DeviceHandle - endpoint: campo endpoint della sottoscrizione
    • P256DH: campo p256dh della sottoscrizione
    • Auth: campo auth della sottoscrizione
  2. Creare il corpo del messaggio. Il corpo del messaggio è in genere in questo formato:

    { 
      "title": "Some Title", 
      "body": "Some body of a message" 
    } 
    

    È possibile specificare altri campi nel corpo; ad esempio icon, per modificare l'icona per ogni messaggio.

  3. Inviare la notifica.

È anche possibile usare .NET SDK per creare un invio diretto:

var browserSubscriptionEndpoint = ""; 
var browserPushHeaders = new Dictionary<string, string> 
            { 
               { "P256DH", "" }, 
               { "Auth", "" }, 
            }; 

var directSendOutcome = await notificationHubClient.SendDirectNotificationAsync(new BrowserNotification("payload", browserPushHeaders), browserSubscriptionEndpoint);

Creare gruppi di destinatari inviati

Per un invio a un pubblico, usare la stessa ServiceBus Notification-Format intestazione usata per un invio diretto e modificare il payload del messaggio come desiderato. Facoltativamente, specificare un'espressione di tag usando l'intestazione ServiceBusNotification-Tags . Per ulteriori informazioni sulla creazione di un invio a un pubblico, vedere Inviare una notifica nativa APNS.

Per creare un gruppo di destinatari inviato tramite l'SDK, usare l'istruzione seguente:

var outcome = await notificationHubClient.SendNotificationAsync(new BrowserNotification(payload, tagExpression);

Creare invii di debug/test

Gli invii di debug vengono creati nel portale di Azure e richiedono registrazioni e installazioni.

Dopo aver creato le registrazioni per i dispositivi, seguire questa procedura per creare una notifica di invio di debug:

  1. Nel portale di Azure aprire il pannello Invio di test nell'hub di notifica.

    Screenshot che mostra il pannello Invio di test in un hub di notifica per l'invio di una notifica di test/debug.

  2. Nel campo Piattaforma selezionare Browser.

  3. Specificare Invia a espressione di tag.

  4. Modificare payload nel messaggio desiderato.

  5. Seleziona Invia.

Passaggi successivi