Configura un'app client JavaScript di Firebase Cloud Messaging

L'API JavaScript FCM ti consente di ricevere messaggi di notifica in applicazioni web eseguite in browser che supportano API Push. Sono incluse le versioni del browser elencate support matrix e le estensioni di Chrome tramite l'API Push.

L'SDK FCM è supportato solo nelle pagine pubblicate tramite HTTPS. Questo accade perché utilizza i service worker, che sono disponibili solo sui siti HTTPS. Se hai bisogno di un fornitore, ti consigliamo Firebase Hosting, che offre un livello senza costi per l'hosting HTTPS sul tuo dominio.

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

Aggiungi e inizializza l'SDK FCM

  1. Se non l'hai già fatto, installare l'SDK Firebase JS e inizializzare Firebase.

  2. Aggiungi l'SDK JS Firebase Cloud Messaging 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 al momento utilizzi FCM per il web e vuoi eseguire l'upgrade all'SDK 6.7.0 o versioni successive, devi abilitare API FCM Registration per il tuo progetto nella console Google Cloud. Quando attivi l'API, assicurati di aver eseguito l'accesso alla console Cloud con lo stesso Account Google che utilizzi per Firebase e di selezionare il progetto corretto. I nuovi progetti che aggiungono l'SDK FCM hanno questa API abilitata per impostazione predefinita.

Configura le credenziali web con FCM

L'interfaccia web di FCM utilizza credenziali web denominate "Voluntary Application Server Identification" (Identificazione server delle applicazioni) o "VAPID" per autorizzare l'invio delle richieste ai servizi push web supportati. Per iscriverti alle notifiche push per la tua app, devi: associare una coppia di chiavi al tuo progetto Firebase. Puoi Genera una nuova coppia di chiavi o importa quella esistente tramite Firebase Google Cloud.

Genera una nuova coppia di chiavi

  1. Apri la scheda Cloud Messaging del riquadro Impostazioni della console Firebase e scorri fino alla sezione Configurazione web.
  2. Nella scheda Certificati push web, 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 in uso con la tua app web, puoi importarlo in FCM in modo da poter raggiungere la tua app web esistente tramite FCM API. Per importare le chiavi, devi avere: l'accesso a livello di proprietario al progetto Firebase. Importa le chiavi pubblica e privata esistenti in formato con codifica Base64 sicura per l'URL:

  1. Apri la scheda Cloud Messaging del riquadro Impostazioni della console Firebase e scorri fino alla sezione Configurazione web.
  2. Nella scheda Certificati push web, trova 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 pubbliche e private in ai 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 all'app, consulta Configurare le credenziali web nell'app. Per ulteriori informazioni sul formato delle chiavi e su come generarle, consulta Chiavi del server delle applicazioni.

Configura le credenziali web nell'app

Il metodo getToken(): Promise<string> consente a FCM di utilizzare la credenziale chiave VAPID durante l'invio del messaggio richieste a diversi servizi push. Con la chiave generata o importata in base alle istruzioni in Configura le credenziali web con FCM, aggiungilo 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"});

Accedi al token di registrazione

Quando devi recuperare il token di registrazione corrente per un'istanza dell'app, prima richiedi all'utente le autorizzazioni di notifica con Notification.requestPermission(). Se viene chiamato come mostrato, 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. Se non hai già un file firebase-messaging-sw.js, crea un file vuoto con questo nome e posizionalo nella directory principale del 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.

Passaggi successivi

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