IBM Cloud Docs
Creare e inviare notifiche push a Chrome Web utilizzando Event Notifications

Creare e inviare notifiche push a Chrome Web utilizzando Event Notifications

Crea un servizio Event Notifications, aggiungi una destinazione di push per Chrome Push Notifications e invia i messaggi ai dispositivi web Chrome.

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.

Come i clienti utilizzano le
i clienti utilizzano le notifiche

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 disporre dei seguenti prerequisiti:

  • Scarica e installa qualsiasi editor di codice per correggere il codice del sito web utilizzando HTML, CSS e js.
  • 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.

Creare un'istanza del servizio Event Notifications

  • Accedi al tuo accountIBM Cloud.
  • Nel catalogo IBM Cloud, cerca Event Notifications > Event Notifications.
  • Selezionare un Region dall'elenco di regioni supportate e selezionare un pricing plan.
  • Fornire un 'Service name.
  • Selezionare un 'resource group.
  • Accettare i termini e gli accordi di licenza facendo clic sulla check box.
  • Fare clic su 'Create.

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 'Create a project. Se si dispone già di un progetto, fare clic su 'Add Project.
  • In 'Create a project window, inserite il nome del progetto, accettate i termini e abilitate o disabilitate Google analytics (opzionale) selezionando l'interruttore a levetta e fate clic su 'Continue.
  • Se Google analytics è abilitato, nella finestra " Configure Google Analytics scegliere il " Analytics location e accettare i termini.
  • Fare clic su 'Create Project.
  • Fare clic su " Continue quando il nuovo progetto è pronto.
  • Nel pannello di navigazione, selezionare l'icona 'settings accanto al 'Project Overview e selezionare 'Settings > Project settings.
  • Fare clic sulla scheda Cloud Messaging per visualizzare le credenziali del progetto: Server Key.

caption-side=bottom"
FCM

Aggiungi un'origine API generica

Effettuare le seguenti operazioni:

  • Vai alla sezione Sources del dashboard Event Notifications.
  • Fare clic su Add e selezionare un'origine API.
  • Immettere un nome e una descrizione facoltativa e fare clic su Add.

Crea una destinazione Event Notifications

Fai clic Destinations nella console Event Notifications e aggiungi i seguenti dettagli di destinazione:

  • Name: aggiungere un nome per la destinazione.
  • Description: aggiungere una descrizione facoltativa per la destinazione.
  • Type: selezionare il tipo Chrome Push Notifications dall'elenco a discesa.
  • Selezionare un piano di destinazione: destinazione di pre - produzione o destinazione di produzione.
    • Pre-production destination- seleziona questa destinazione come destinazione push a basso costo, per i tuoi ambienti di sviluppo e test.
    • Production destination- utilizzare la funzionalità completa di questa destinazione. Dispositivi illimitati e messaggi in uscita consentiti.
  • Aggiungete l'URL del vostro sito web per ottenere l'inserimento nell'elenco.
  • Aggiungi Server Key, che hai ottenuto dalla sezione Get FCM credentials.
  • Fai clic su Aggiungi.
  • Quando viene creata la destinazione Chrome, modifica la destinazione creata per ottenere la chiave vapId pubblica richiesta per web sdk.

caption-side=bottom"

Destination
Receive notifications

Crea un argomento Event Notifications

Selezionare Topics nella console Event Notifications e fare clic su Create. Immettere i seguenti dettagli argomento:

  • Name: immettere un nome per l'argomento.
  • Description: aggiungere una descrizione facoltativa per l'argomento.
  • Source: selezionare un'origine dall'elenco a discesa.
  • Event type: selezionare il tipo di evento dall'elenco a discesa.
  • Event sub type selezionare il tipo secondario di evento dall'elenco a discesa del tipo secondario di evento.
  • Severity: selezionare la severità dall'elenco a discesa della severità.
  • Advanced conditions: scrivi le tue proprie condizioni personalizzate, che devono seguire le specifiche jsonpath.

Crea una sottoscrizione Event Notifications

Fai clic su Subscriptions nella console Event Notifications. Immettere i dettagli della sottoscrizione riportati di seguito:

  • Click Crea per visualizzare la procedura guidata di sottoscrizione.
  • Completare le seguenti informazioni di sottoscrizione:
    • Subscription name: nome della sottoscrizione.
    • Subscription description: aggiungere una descrizione facoltativa.
  • Nella sezione Subscribe to a topic, selezionare un argomento dall'elenco a discesa e selezionare una destinazione dall'elenco a discesa di destinazione.
  • Destination type: selezionare il tipo in Destination e fare clic su Add.

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 tuo progetto, aggiungi i file ENPushSDK.js,ENPushServiceWorker.js e manifest_Website.json alla cartella root del progetto.

  • Modifica il file manifest_Website.json.

    {
       "name": "YOUR_WEBSITE_NAME"
    }
    
  • Modifica il nome del file manifest_Website.json con manifest.json.

  • Includere il tag 'manifest.json nel tag '<head> del 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>
    
  • Completa la seguente procedura per abilitare il sito web per 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)
      })
      
    • Registrarsi con 'userId. Per la notifica basata su userId, il metodo di registrazione accetta un altro parametro - userId.

      bmsPush.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. Dopo aver sottoscritto un particolare tag, il dispositivo 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. Puoi utilizzare l'SDK admin Node o Go invece di richiamare direttamente l'API.

Ricevuta notifica sul sito web di Chrome in MacOS.

Ricevere le
le