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 tue app client web per inviare messaggi in modo affidabile.

L'API JavaScript FCM ti 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. Questo è dovuto all'utilizzo di service worker, disponibili solo sui siti HTTPS. Se hai bisogno di un provider, ti consigliamo Firebase App Hosting, che offre un livello 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 agli ID installazione di Firebase, che ti consentono di designare il destinatario delle notifiche.

Aggiungi e inizializza l'SDK FCM

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

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

Web

Scopri di più sull'API web modulare con tree shaking ed esegui l'upgrade dall'API con spazio dei nomi.

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

Scopri di più sull'API web modulare con tree shaking ed esegui l'upgrade dall'API con spazio dei nomi.

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 attivare l'API FCM Registration per il tuo progetto nella console Google Cloud. Quando attivi 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'SDK FCM, questa API è abilitata per impostazione predefinita.

Configura le credenziali web con FCM

L'interfaccia web di FCM utilizza credenziali web chiamate Voluntary Application Server Identification, o chiavi VAPID, per autorizzare le richieste di invio ai servizi di push web supportati. Per iscrivere 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 la coppia di chiavi esistente tramite la console Firebase.

Genera una nuova coppia di chiavi

1. Nella console Firebase, vai a Impostazioni > Generali. Poi fai clic sulla scheda Cloud Messaging.

2. Vai alla sezione Configurazione web.

3. Nella scheda Certificati Web Push, fai clic su Genera coppia di chiavi.

   La console visualizza un avviso che indica che la coppia di chiavi è stata generata e mostra la stringa della chiave pubblica e la data di aggiunta.

Importa una coppia di chiavi esistente

Se hai già una coppia di chiavi che utilizzi con la tua app web, puoi importarla in FCM per 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 sicura per l'URL:

1. Nella console Firebase, vai a Impostazioni > Generali. Poi fai clic sulla scheda Cloud Messaging.

2. Vai alla sezione Configurazione web.

3. Nella scheda Certificati Web Push, individua e seleziona il testo del link: importa una coppia di chiavi esistente.

4. 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 mostra la stringa della chiave pubblica e la data di aggiunta.

Per istruzioni su come aggiungere la chiave alla tua app, consulta Configura le credenziali web nella tua app. Per ulteriori informazioni sul formato delle chiavi e su come generarle, consulta Chiavi del server dell'applicazione.

Configura le credenziali web nella tua app

Il metodo register(): Promise<void> consente a FCM di utilizzare la credenziale della chiave VAPID quando invia richieste di messaggi a diversi servizi push. Utilizzando la chiave che hai generato o importato seguendo le istruzioni riportate in Configura le credenziali web con FCM, aggiungila al codice dopo aver recuperato l'oggetto di messaggistica:

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

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

Nota: se utilizzi le API token deprecate, devi passare la chiave VAPID a getToken() anziché a register().

Richiedi l'autorizzazione alle notifiche e configura il service worker

Quando devi scegliere come target un'istanza dell'app con FCM, richiedi prima all'utente le autorizzazioni alle notifiche con Notification.requestPermission(). Se viene chiamata come mostrato, restituisce lo stato dell'autorizzazione se concessa:

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. Se non hai già un file firebase-messaging-sw.js, crea un file vuoto con questo nome e inseriscilo nella directory principale del tuo dominio prima di registrarti. Puoi aggiungere contenuti significativi al file in un secondo momento durante la procedura di configurazione del client.

Accedi all'ID di installazione Firebase

Attenzione: non utilizzare contemporaneamente le API Firebase Installation ID e le API dei token di registrazione ritirate per la gestione della registrazione. Ti consigliamo di utilizzare gli ID di installazione di Firebase (FID) per segmentare o scegliere come target le istanze dell'app.

Suggerimento: consulta le best practice per la gestione della registrazione FCM per suggerimenti sulla gestione delle registrazioni.

Per registrare l'istanza dell'app e recuperare l'ID installazione Firebase (FID) per il targeting dei messaggi:

import { getMessaging, onRegistered, register } from "firebase/messaging";

const messaging = getMessaging();

// 1. Implement callback to receive the Firebase installation ID upon registration.
// This is triggered every time a manual register() finishes, a FID change
// is detected, or a pushsubscriptionchange event is fired.
onRegistered(messaging, (installationId) => {
  console.log('Registered installation ID:', installationId);

  // Send the Firebase Installation ID to your app server and update the UI if needed.
  sendRegistrationToServer(installationId);
});

// 2. You can also manually trigger registration (recommended on app startup)
register(messaging, {
  vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>'
}).then(() => {
  // Success! The Firebase Installation ID can be used to target messages to this app
  // instance and will be delivered asynchronously to your onRegistered() callback.
}).catch((err) => {
  console.error('An error occurred while registering', err);
});
messaging_register.js

Il callback onRegistered viene attivato in tre scenari:

1. Ogni volta che termina una chiamata manuale register().
2. È stata rilevata una modifica dell'ID installazione di Firebase.
3. Viene attivato un evento pushsubscriptionchange.

Dopo aver ottenuto l'ID installazione di Firebase, invialo al server dell'app e archivialo utilizzando il metodo che preferisci.

Accedi al token di registrazione (deprecato)

Attenzione: questa funzionalità è deprecata. Utilizza gli ID installazione di Firebase, poiché questo metodo verrà rimosso in una release futura.

Suggerimento: consulta le best practice per la gestione della registrazione FCM per suggerimenti sulla gestione delle registrazioni.

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 memorizzalo utilizzando il metodo che preferisci.

Invia 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 per ricevere notifiche remote.

2. Verifica che l'app sia in esecuzione in background sul dispositivo.

3. Nella console Firebase, vai a DevOps e coinvolgimento > Messaggistica

4. Creare una campagna.

   • Se è il tuo primo messaggio:

     1. Seleziona Crea la tua prima campagna.

     2. Seleziona Messaggi di notifica Firebase e poi Crea.

   • Se hai già creato campagne:

     1. Nella scheda Campagne, seleziona Nuova campagna.

     2. Fai clic su Notifiche.

5. Inserisci il testo del messaggio.

6. Seleziona Invia messaggio di prova nel riquadro a destra.

7. Nel campo Aggiungi un token di registrazione FCM, inserisci il token di registrazione.

8. Seleziona Test.

Dopo aver selezionato Test, il dispositivo client scelto come target, 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):

• Invia messaggi ai dispositivi
• Ricevi messaggi in un client JavaScript
• Invia messaggi agli argomenti