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.
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 unpricing 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
.

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 tipoChrome 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 sezioneGet 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.


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 inDestination
e fare clic suAdd
.
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
emanifest_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
conmanifest.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
oeu-es
. -
deviceId
: facoltativodeviceId
per la registrazione del dispositivo.
-
-
Per registrare le notifiche, utilizza l'API
register()
oregisterWithUserId()
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 suuserId
, 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.
