获取我们在 Firebase 峰会上发布的所有信息,了解 Firebase 可如何帮助您加快应用开发速度并满怀信心地运行应用。了解详情

Configura un'app client JavaScript Firebase Cloud Messaging

L'API JavaScript di FCM ti consente di ricevere messaggi di notifica nelle app Web in esecuzione nei browser che supportano l' API Push . Ciò include le versioni del browser elencate in questa matrice di supporto e le estensioni di Chrome tramite l'API Push.

L'SDK FCM è supportato solo nelle pagine servite su HTTPS. Ciò è dovuto al suo utilizzo di service worker, che sono disponibili solo sui siti HTTPS. Se hai bisogno di un provider, Firebase Hosting è consigliato e fornisce un livello gratuito per l'hosting HTTPS sul tuo dominio.

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

Aggiungi e inizializza FCM SDK

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

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

Web version 9

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 version 8

import firebase from "firebase/app";
import "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
firebase.initializeApp(firebaseConfig);


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

Se attualmente utilizzi FCM per il Web e desideri eseguire l'upgrade a SDK 6.7.0 o versioni successive, devi abilitare l' API di registrazione FCM per il tuo progetto in Google Cloud Console. Quando abiliti l'API, assicurati di aver effettuato l'accesso a Cloud Console con lo stesso account Google che utilizzi per Firebase e assicurati 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 "Identificazione volontaria del server delle applicazioni" o chiavi "VAPID" per autorizzare l'invio di richieste ai servizi 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. Apri la scheda Cloud Messaging del riquadro Impostazioni della console Firebase e scorri fino alla sezione Configurazione Web .
  2. Nella scheda Certificati Web Push , fai clic su Genera coppia di chiavi . La console visualizza un avviso che la coppia di chiavi è stata generata e visualizza la stringa della chiave pubblica e la data di aggiunta.

Importa una coppia di chiavi esistente

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

  1. Apri la scheda Cloud Messaging del riquadro Impostazioni della console Firebase e scorri fino alla sezione Configurazione Web .
  2. Nella scheda Certificati Web Push , 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 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 alla tua app, vedi Configurare le credenziali Web nella tua app . Per ulteriori informazioni sul formato delle chiavi e su come generarle, consulta Chiavi del server applicazioni .

Configura le credenziali Web nella tua app

Il metodo getToken(): Promise<string> consente a FCM di utilizzare le credenziali della chiave VAPID durante l'invio di richieste di messaggi a diversi servizi push. Usando la chiave che hai generato o importato secondo le istruzioni in Configure Web Credentials with FCM , aggiungila nel tuo codice dopo che l'oggetto di messaggistica è stato recuperato:

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, richiedi prima le autorizzazioni di notifica all'utente con Notification.requestPermission() . Quando viene chiamato come mostrato, restituisce un token se viene concessa l'autorizzazione o rifiuta la promessa se negata:

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

FCM richiede un firebase-messaging-sw.js . A meno che tu non abbia già un firebase-messaging-sw.js , crea un file vuoto con quel nome e posizionalo nella root del tuo dominio prima di recuperare un token. È possibile aggiungere contenuto significativo al file in un secondo momento nel processo di configurazione del client.

Per recuperare il token corrente:

Web version 9

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);
  // ...
});

Web version 8

// 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);
  // ...
});

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

Prossimi passi

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