Inizia a utilizzare Firebase Cloud Messaging nelle app web

Seleziona la piattaforma: iOS+ Android Web Flutter Unity C++


Questa guida descrive come iniziare a utilizzare Firebase Cloud Messaging nelle app client web per poter inviare messaggi in modo affidabile.

L'API FCM JavaScript consente di ricevere messaggi di notifica nelle app web in esecuzione nei browser che supportano l' API Push. Sono incluse le versioni del browser elencate in questa matrice di supporto e le estensioni di Chrome che utilizzano l'API Push.

L'SDK FCM è supportato solo nelle pagine pubblicate tramite HTTPS. Ciò è dovuto al suo utilizzo dei service worker, disponibili solo sui siti HTTPS. Se hai bisogno di un provider, Firebase App Hosting è consigliato e offre un piano senza costi per l'hosting HTTPS sul tuo dominio.

Per iniziare a utilizzare l'API JavaScript FCM, devi aggiungere Firebase alla tua app web e aggiungere la logica per accedere ai token di registrazione.

Aggiungere e inizializzare l'SDK FCM

  1. Se non l'hai già fatto, installa l'SDK Firebase JS e inizializza Firebase.

  2. Aggiungi l'SDK Firebase Cloud Messaging JS e inizializza Firebase Cloud Messaging:

Web 

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = getMessaging(app);

Web 

import firebase from "firebase/compat/app";
import "firebase/compat/messaging";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = firebase.messaging();

Se utilizzi FCM per il web e vuoi eseguire l'upgrade all'SDK 6.7.0 o versioni successive, devi abilitare l' API di registrazione FCM per il tuo progetto in Google Cloud. Quando abiliti l'API, assicurati di aver eseguito l'accesso alla console Google Cloud con lo stesso Account Google che utilizzi per Firebase e di selezionare il progetto corretto. Per i nuovi progetti che aggiungono l' FCM SDK, questa API è abilitata per impostazione predefinita.

Configurare le credenziali web con FCM

L'FCMinterfaccia web utilizza credenziali web chiamate Voluntary Application Server Identification o chiavi VAPID per autorizzare le richieste di invio ai servizi push web supportati. Per abbonare la tua app alle notifiche push, devi associare una coppia di chiavi al tuo progetto Firebase. Puoi generare una nuova coppia di chiavi o importare quella esistente tramite la Firebase console.

Generare una nuova coppia di chiavi

  1. Apri la scheda Cloud Messaging della console Firebase e vai alla sezione Configurazione web.
  2. Nella scheda Certificati push web, fai clic su Genera coppia di chiavi. La console visualizza un messaggio che indica che la coppia di chiavi è stata generata, nonché la stringa della chiave pubblica e la data di aggiunta.

Importare una coppia di chiavi esistente

Se hai una coppia di chiavi esistente che utilizzi già con la tua app web, puoi importarla in FCM in modo da poter raggiungere le istanze dell'app web esistenti tramite le API FCM. Per importare le chiavi, devi disporre dell'accesso a livello di proprietario al progetto Firebase. Importa la chiave pubblica e privata esistente in formato con codifica Base64 URL safe:

  1. Apri la scheda Cloud Messaging della console Firebase e vai alla sezione Configurazione web.
  2. Nella scheda Certificati push web, individua e seleziona il testo del link: importa una coppia di chiavi esistente.
  3. Nella finestra di dialogo Importa una coppia di chiavi, fornisci le chiavi pubblica e privata nei campi corrispondenti e fai clic su Importa. La console visualizza la stringa della chiave pubblica e la data di aggiunta.

Per istruzioni su come aggiungere la chiave all'app, consulta Configurare le credenziali web nell'app. Per ulteriori informazioni sul formato delle chiavi e su come generarle, consulta Chiavi del server applicazioni.

Configurare le credenziali web nell'app

Il metodo getToken(): Promise<string> consente a FCM di utilizzare la credenziale della chiave VAPID quando invia richieste di messaggi a diversi servizi push. Utilizzando la chiave generata o importata in base alle istruzioni riportate in Configurare le credenziali web con FCM, aggiungila al codice dopo aver recuperato l'oggetto di messaggistica:

import { getMessaging, getToken } from "firebase/messaging";

const messaging = getMessaging();
// Add the public key generated from the console here.
getToken(messaging, {vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu"});

Accedere al token di registrazione

Quando devi recuperare il token di registrazione corrente per un'istanza dell'app, prima richiedi le autorizzazioni alle notifiche all'utente con Notification.requestPermission(). Se chiamato come mostrato, questo metodo restituisce un token se l'autorizzazione viene concessa o rifiuta la promessa se viene negata: 

function requestPermission() {
  console.log('Requesting permission...');
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log('Notification permission granted.');

FCM richiede un file firebase-messaging-sw.js. A meno che tu non abbia già un file firebase-messaging-sw.js, creane uno vuoto con questo nome e inseriscilo nella root del tuo dominio prima di recuperare un token. Puoi aggiungere contenuti significativi al file in un secondo momento durante la procedura di configurazione del client.

Per recuperare il token corrente:

Web

import { getMessaging, getToken } from "firebase/messaging";

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
const messaging = getMessaging();
getToken(messaging, { vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
});
messaging_get_token.js

Web

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken({ vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
});
index.js

Dopo aver ottenuto il token, invialo al server dell'app e archivialo utilizzando il metodo che preferisci.

Inviare un messaggio di notifica di prova

  1. Installa ed esegui l'app sul dispositivo di destinazione. Sui dispositivi Apple, dovrai accettare la richiesta di autorizzazione a ricevere notifiche remote.
  2. Verifica che l'app sia in background sul dispositivo.
  3. Nella console Firebase, apri la pagina Messaggi.
  4. Se è il tuo primo messaggio, seleziona Crea la tua prima campagna.
    1. Seleziona Messaggi di notifica Firebase e poi Crea.
  5. In caso contrario, nella scheda Campagne, seleziona Nuova campagna e poi Notifiche.
  6. Inserisci il testo del messaggio.
  7. Seleziona Invia messaggio di prova nel riquadro a destra.
  8. Nel campo Aggiungi un token di registrazione, inserisci il tuo token di registrazione.FCM
  9. Seleziona Test.

Dopo aver selezionato Test, il dispositivo client di destinazione, con l'app in background, dovrebbe ricevere la notifica.

Passaggi successivi

Dopo aver completato i passaggi di configurazione, ecco alcune opzioni per procedere con FCM per il web (JavaScript):