Che cos'è Event Notifications?

Event Notifications è un servizio di instradamento della notifica eventi che ti informa sugli eventi critici che si verificano nel tuo account IBM Cloud o attiva azioni automatizzate utilizzando i webhook. Puoi filtrare e instradare le notifiche di eventi da IBM Cloud servizi come Availability Monitoring, a email, SMS, notifiche di push e webhook.

In che modo i client utilizzano Chrome Web Push Notifications?

Il diagramma riportato di seguito mostra come i client utilizzano le notifiche push web Chrome.

Obiettivi

Questa esercitazione ti mostra come inviare le notifiche di push come segue:

• Crea un sito web con Event Notifications.
• Ottieni credenziali web Chrome.
• Scarica l'SDK e completa la configurazione delle notifiche.
• Configurare e inviare le notifiche push web Chrome a un browser.

Prima di iniziare

È necessario che siano soddisfatti i seguenti prerequisiti:

• Scaricate e installate un qualsiasi editor di codice per creare il codice di un sito web utilizzando HTML, CSS e JavaScript.
• Un account Google per accedere alla console Firebase per ottenere il tuo ID mittente e la tua chiave API server.
• Un IBM Cloud. Se non ne hai uno, crea un account IBM Cloud.

Crea un'istanza del servizio " Event Notifications "

• Accedi al tuo accountIBM Cloud.
• Nel catalogo IBM Cloud, cercare Event Notifications > Event Notifications.
• Selezionare una regione dall'elenco delle regioni supportate e scegliere un piano tariffario.
• Fornisci un nome servizio.
• Seleziona un gruppo di risorse.
• Accettare i termini e gli accordi di licenza facendo clic sulla check box.
• Fai clic su Crea.

Ottieni le credenziali FCM

Firebase Cloud Messaging (FCM) è il gateway che fornisce notifiche push ai dispositivi web Chrome. Per configurare la destinazione di push web Chrome sulla console, devi ottenere le credenziali FCM (chiave server). La chiave del server è memorizzata in modo sicuro e utilizzata dal servizio Event Notifications per connettersi al server FCM.

• Vai a Firebase console. È obbligatorio un account utente Google.
• Fare clic su Crea un progetto. Se hai già un progetto, clicca su " Aggiungi progetto ".
• Nella finestra "Crea un progetto ", inserisci il nome del progetto, accetta i termini e, se lo desideri, attiva o disattiva l'analisi di " Google " selezionando l'interruttore a levetta, quindi fai clic su "Continua".
• Se Google Analytics è abilitato, allora nella finestra Configura Google Analytics, scegli Località di Analytics e accetta i termini.
• Fai clic su Crea progetto.
• Fai clic su Continua quando il nuovo progetto è pronto.
• Nel pannello di navigazione, seleziona l'icona delle impostazioni accanto alla sezione " Panoramica del progetto " e seleziona Impostazioni > Impostazioni del progetto.
• Fai clic sulla scheda " Cloud Messaging " per visualizzare le credenziali del tuo progetto: chiave del server.

Aggiungi un'origine API generica

Per creare una fonte API generica:

• Fare clic su "Sources" nell'istanza di " Event Notifications ".
• Fare clic su "Crea " e selezionare una fonte API nella finestra di dialogo "Crea fonte ".
• Digita un nome e, se lo desideri, una descrizione, quindi fai clic su "Crea sorgente ".

Crea una destinazione Event Notifications

Fare clic su "Destinazioni" nell'istanza di " Event Notifications " e fare clic su "Crea".

Inserisci i seguenti dettagli relativi alla destinazione nella finestra di dialogo "Crea destinazione ".

• Nome: aggiungere un nome alla destinazione.
• Descrizione: aggiunge una descrizione opzionale per la destinazione.
• Tipo: selezionare il tipo di notifiche push di Chrome dall'elenco a discesa.
• Selezionare un piano di destinazione: destinazione di pre - produzione o destinazione di produzione.
  • Destinazione di pre-produzione: selezionare questa destinazione come destinazione push a basso costo per gli ambienti di sviluppo e di test.
  • Destinazione di produzione: utilizzare tutte le capacità di questa destinazione. Non vi sono limiti al numero di dispositivi e ai messaggi in uscita.
• Aggiungete il vostro sito web URL per consentirne l'inserimento nella lista.
• Aggiungere la chiave del server, ottenuta dalla sezione Ottenere le credenziali FCM.
• Fare clic su " Crea destinazione ".
• Una volta creata la destinazione Chrome, modificarla per ottenere la chiave pubblica vapID necessaria per l'SDK web.

Crea un argomento Event Notifications

Fare clic su " Argomenti " nell'istanza di " Event Notifications " e fare clic su "Crea". Inserisci i seguenti dettagli relativi all'argomento e ai filtri nelle fasi " Dettagli argomento " e " Filtri evento ":

• Nome: inserire un nome per l'argomento.
• Descrizione: aggiunge una descrizione opzionale per l'argomento.
• Fonte: selezionare una fonte dall'elenco a discesa.
• Tipo di evento: selezionare il tipo di evento dall'elenco a discesa.
• Sottotipo di evento: selezionare il sottotipo di evento dall'elenco a discesa Sottotipo di evento.
• Gravità: selezionare la gravità dall'elenco a discesa Gravità.
• Condizioni avanzate: scrivere le proprie condizioni personalizzate, che devono seguire le specifiche di jsonpath. Le espressioni Jsonpath possono essere convalidate in jsonpath.com o extendsclass.com.

Crea una sottoscrizione Event Notifications

Passa alla fase “Abbonamenti ”. Fare clic su Crea e inserire i seguenti dettagli dell'abbonamento nella finestra di dialogo Crea abbonamento.

• Nome dell'abbonamento: inserire un nome per l'abbonamento.
• Tipo di destinazione: selezionare il tipo di destinazione.
• Destinazione: selezionare la destinazione.

Fai clic su Crea sottoscrizione.

Configura SDK web Chrome Event Notifications

L'SDK web Chrome consente ai siti Web Chrome di ricevere notifiche di push. Completa la seguente procedura per installare l'SDK web Chrome Event Notifications, inizializzare l'SDK e registrarti per le notifiche per il sito web.

• Per includere l'SDK nel progetto, aggiungere i file ENPushSDK.js, ENPushServiceWorker.js e manifest_Website.json alla cartella principale del progetto.

• Modifica il file manifest_Website.json.

  {
     "name": "YOUR_WEBSITE_NAME"
  }
  

• Modifica il nome del file manifest_Website.json con manifest.json.

• Inserisci il tag manifest.json all’interno del tag <head> del tuo file HTML.

  <link rel="manifest" href="https://github.com/IBM/event-notifications-destination-webpush-sdk/blob/main/manifest_Website.json">
  

• Includi l'SDK push web IBM Cloud allo script.

  <script src="https://github.com/IBM/event-notifications-destination-webpush-sdk/blob/main/ENPushSDK.js" async></script>
  

• Completare i seguenti passaggi per consentire al sito web di inizializzare l'SDK.

  var enPush = new ENPush()
  function callback(response) {
     alert(response.response)
  }
  var initParams = {
     "instanceGUID": "<instance_guid>",
     "apikey": "<instance_apikey>",
     "region": "<region>",
     "deviceId": "<YOUR_DEVICE_ID>",
     "chromeDestinationId": "<chrome_destination_id>",
     "chromeApplicationServerKey": "<Chrome_VapId_public_key>"
  }
  enPush.initialize(initParams, callback)
  

  • region: regione dell'istanza Event Notifications. Ad esempio, us-south,eu-gb, au-syd, eu-de o eu-es.

  • deviceId: facoltativo deviceId per la registrazione del dispositivo.

• Per registrare le notifiche, utilizza l'API register() o registerWithUserId() per registrare il dispositivo con il servizio Event Notifications. Scegli una delle seguenti opzioni:

  • Registrati senza UserId:

     enPush.register(function(response) {
        alert(response.response)
     })
     ```
  
  * Iscriviti su `userId`. Per la notifica basata su `userId`, il metodo register accetta un ulteriore parametro: `userId`.
  
  ```js
     enPush.registerWithUserId("UserId",function(response) {
        alert(response.response)
     })
     ```
  
     `UserId` è il valore dell'identificativo utente con cui vuoi registrare i dispositivi nell'istanza del servizio push.
  
  

• L'API subscribe sottoscrive il dispositivo per una tag. Una volta che il dispositivo è stato associato a un determinato tag, può ricevere le notifiche inviate per quel tag. Aggiungi il seguente frammento di codice alla tua applicazione web per sottoscrivere un elenco di tag.

  enPush.subscribe(tagName, function(response) {
     alert(response.response)
  })
  

• Quando la configurazione è completa, esegui la tua applicazione e registrati per le notifiche di push.

Invia notifiche al dispositivo web Chrome

Utilizza l'API di invio notifica per inviare la notifica di push per il dispositivo web Chrome. È possibile utilizzare i tasti Node, Vai, Python o Java admin SDK invece di chiamare direttamente l'API.

Ricevuta notifica sul sito web di Chrome in macOS.