Come inviare notifiche push Web utilizzando Firebase (FCM)?

Pubblicato: 2021-12-29

Per facilitare i suoi servizi di notifica su Web, IOS e Android, Firebase utilizza i servizi cloud. Firebase Cloud Messaging (FCM) opera generando token univoci per ciascun dispositivo e successivamente utilizzando quelli per inviare messaggi ai rispettivi dispositivi. Per l'invio di notifiche push web , Firebase genera token utilizzando javascript.

In questo blog imparerai tutto su come implementare le notifiche push web firebase .

Che cos'è la messaggistica cloud di Firebase?

Che cos'è Firebase-Cloud-Messaging

Firebase Cloud Messaging è il servizio di notifica mobile gratuito di Google. Consente agli sviluppatori di app di terze parti di inviare notifiche ai propri utenti dai server di Google Cloud Messaging (GCM). Ciò consente di informare gli utenti sui vari dati disponibili per la sincronizzazione in tempo reale.

Esegue l'upstream dei messaggi dalle app degli utenti ai server FCM e i messaggi a valle dai server FCM alle app degli utenti e. Puoi utilizzare FCM per coinvolgere, trattenere e reindirizzare i tuoi utenti indipendentemente da dove si trovano nel mondo.

Quali sono i vantaggi dell'invio di notifiche push Web utilizzando Firebase?

Di seguito sono riportati i vantaggi dell'invio di notifiche push Web da Firebase .

  • Libero per iniziare: non è necessario pagare Google per avvalersi di FCM servizio di notifica push. Inoltre, è facile da ridimensionare.  
  • Nessuna preoccupazione per le autorizzazioni: poiché le librerie FCM utilizzano l'unione di manifest, aggiunge automaticamente qualsiasi autorizzazione richiesta. Ciò riduce la quantità di sforzo necessario.
  • Registrazione semplificata: l'indirizzo utilizzato da FCM per recapitare il messaggio a un dispositivo è denominato "token di registrazione". Questo processo ora è stato reso asincrono. Alla biblioteca di Google viene assegnato automaticamente un token per tuo conto. Quindi, quando richiedi un token, ti viene inviato un token di registrazione. Per iniziare a inviare messaggi, devi solo inviare questo token ai tuoi server.
  • Facile implementazione: l' implementazione di FCM è semplice e veloce. Poiché le sue API intuitive sono disponibili in un unico SDK, puoi risolvere immediatamente i problemi dei clienti senza creare un'infrastruttura complicata.
  • Analisi: ottieni analisi illimitate gratuitamente da Firebase. Ottieni dati preziosi sull'utilizzo delle app da parte degli utenti, sui clic sugli annunci e altro ancora. Altre funzionalità di Firebase funzionano bene con Firebase Analytics. Quindi, puoi agire su tutto.
  • Supporto multipiattaforma: poiché le API sono disponibili in un unico SDK per C++, JavaScript, Android e iOS, puoi estenderlo a varie piattaforme senza alterare la tua infrastruttura.
  • Messaggistica di argomenti comuni: quando desideri notificare agli utenti interessati a un argomento particolare, devi semplicemente pubblicare il tuo messaggio su FCM. FCM lo consegnerà a tutti gli utenti che si sono iscritti a quell'argomento. La cosa migliore è che non ha limiti alla messaggistica per argomento.
  • Messaggistica per argomenti diversi: FCM consente inoltre alla segmentazione dei clienti di inviare loro messaggi pertinenti. Ad esempio, se invii notifiche relative al traffico ai tuoi utenti, i tuoi utenti nella città A riceveranno messaggi sul traffico relativi solo alla loro città e gli utenti nella città B riceveranno messaggi sul traffico relativi solo alla loro città.

Come inviare notifiche push web utilizzando Firebase?

Ecco le istruzioni dettagliate per aiutarti a implementare le notifiche push web Firebase .

1. Registra l'app Firebase

Registrati-Firebase-App
  1. Visita questo link https://console.firebase.google.com/u/0/ e premi la scheda "Aggiungi progetto".
  2. Assegna un nome al progetto e seleziona il paese. Quindi premere sulla scheda "Crea progetto". Google controllerà il nome del progetto per verificarne la disponibilità e l'unicità.
  3. Ora fai clic sulla scheda "accetta termini e condizioni" per continuare. Il tuo progetto sarà costruito all'interno
  4. pochi secondi.
  5. Ora aggiungi la tua app Android/IOS/Web/Unity al tuo progetto. Poiché questo blog è incentrato sulle notifiche push web di Firebase , devi procedere facendo clic sull'icona web mostrata come </>.
  6. Dai un soprannome alla tua app. Questo nickname è riservato agli utenti. Quindi, puoi utilizzare questa funzione per facilitare una migliore differenziazione tra le app in un progetto per uso interno.
  7. Se il tuo progetto non è in esecuzione su un server HTTPS, aggiungi l'hosting per esso. In caso contrario, salta questo passaggio.
  8. Ora fai clic su "Registra app".  
  9. Ora che la tua app è registrata, riceverai un Firebase SDK, che è un codice. Copia questo codice

giù. Entrerà in uso nella prossima sezione. Nel caso in cui non lo copi ora, puoi recuperarlo dalla sezione "Impostazioni".

2. Aggiungi Firebase al tuo progetto

Aggiungi firebase al tuo progetto
  1. Vai alla dashboard. Nella barra laterale troverai l'icona "Impostazioni". Cliccaci sopra. Nel menu che ti viene presentato, fai clic su Impostazioni progetto.
  2. Quando si apre la pagina Impostazioni (Impostazioni generali), scorri fino in fondo alla pagina e copia il codice mostrato per la CDN selezionata.
  3. Includi il codice seguente nel tuo file HTML alla fine. Includere anche lo script CDN per la messaggistica Firebase.

< script src = “https://www.gstatic.com/firebasejs/8.3.2/firebase-app.js” > </script>

<script src = “https://www.gstatic.com/firebasejs/8.3.2/firebase-analytics.js” > </script>

3. Servizio operativo Firebase

1. Per il codice menzionato in alto, aggiungi il codice fornito in basso, dopo che trovi // Inizializza Firebase.

// Inizializza Firebase

firebase.initializeApp(firebaseConfig);const messaging=firebase.messaging(); //Funzione personalizzata creata per eseguire il servizio Firebase

  getStartToken(); //Questo codice riceve un messaggio dal server /la tua app e stampa il messaggio sulla console se la stessa scheda è aperta come del progetto nel browser

messaging.onMessage(function(payload){console.log("onMessage",payload);});

2. Puoi scrivere il codice in basso in un file js separato presente nella tua pagina HTML oppure puoi aggiungerlo al codice in alto nel tag <script>.

messaging.getToken() è una funzione utilizzata per recuperare i token utilizzando Firebase SDK. Se viene trovato un token, viene inviato al server per essere archiviato, altrimenti viene richiesta l'autorizzazione dell'utente tramite la funzione RequestPermission().

setTokenSentToServer() è un'altra funzione che utilizza l'archiviazione locale per assegnare 1 come valore di sendTokenToServer nel caso in cui il token sia già stato inviato al server e 0 nel caso in cui il token non venga inviato al server a causa del verificarsi di un errore quando viene inviato a il server o viene recuperato dall'SDK di Firebase.

4. Invio di notifiche dal progetto

Invio-messaggio-dal-progetto

Ora che tutto il necessario per inviare notifiche dal progetto è pronto, ecco i dettagli su come inviare una notifica all'utente finale di cui conosci il token-

1. Inizialmente, è necessario ricevere una chiave di servizio. Eseguire i seguenti passaggi-

  • Apri la console Firebase
  • Fare clic sulle impostazioni del progetto
  • Tocca "Messaggistica cloud"
  • Troverai un codice nel campo Chiave del server. Copialo.

2. Invio di notifiche push

Usiamo la piattaforma postino per inviare notifiche push web da Firebase . Ecco le cose che devi fare è-

3. Impostare il tipo di richiesta POST.

4. Immettere l'URL: https://fcm.googleapis.com/fcm/send

5. Fare clic sulla sezione Intestazioni.

Devi riempire due intestazioni, vale a dire, autorizzazione e tipo di contenuto.

· Autorizzazione: incolla la chiave del server che hai copiato.

· Tipo di contenuto: applicazione/JSON (JavaScript Object Notation)

6. Ora fai clic su Apri la sezione Corpo. Incolla il token utente che Firebase ha recuperato al momento della registrazione dell'utente.

7. Ora invia la richiesta. Potrai inviare notifiche push ai tuoi utenti dal server.

Tieni presente che quando invii la tua prima notifica push a un utente, il browser web chiederà il suo permesso per ricevere notifiche da te. Solo se lui/lei concede il permesso, sarai continuamente in grado di inviare push. Puoi assicurarti che il tuo utente conceda la sua autorizzazione seguendo i nostri suggerimenti per le notifiche push.

Conclusione A questo punto avresti capito che inviare notifiche push web utilizzando Firebase non è così difficile come sembra. Non richiede molte risorse e non richiede molto tempo. Inoltre, usando notifiche push web Firebase non influenza le spese di manutenzione del tuo sito web o dell'applicazione web. Se hai ancora bisogno di maggiori dettagli sulla sua funzionalità, consulta la documentazione di Firebase.

Fai un tour del prodotto

Leggi anche:

  • 7 fattori sopravvalutati delle notifiche push web
  • Notifiche push web | Una tattica di marketing diretto tramite e-mail
  • 41 Statistiche sulle notifiche push Web che gli esperti di marketing devono conoscere
  • 15 migliori software e strumenti di notifica push nel 2022 {Confronto}
  • In che modo le notifiche push Web sono efficaci rispetto ad altri mezzi di marketing?