Configurare un'app client JavaScript Firebase Cloud Messaging

L'API JavaScript FCM consente di ricevere messaggi di notifica in applicazioni web che funzionano nei browser che supportano l' API push . Questo include le versioni del browser elencate in questa matrice di supporto e 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 avete bisogno di un fornitore, Firebase Hosting è raccomandato per libero HTTPS di hosting sul tuo dominio.

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

Aggiungi Firebase al tuo progetto JavaScript

Se non l'hai già, aggiungi Firebase al progetto JavaScript .

Se si sta utilizzando FCM per il web e si desidera effettuare l'aggiornamento a SDK 6.7.0 o versioni successive, è necessario attivare l' API di registrazione FCM per il vostro progetto nel Cloud Console di Google. 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 chiavi "Voluntary Application Server Identification" o "VAPID" per autorizzare le richieste di invio 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 tua coppia di chiavi esistente tramite la console Firebase.

Genera una nuova coppia di chiavi

  1. Aprire la Nuvola di messaggistica scheda del riquadro Firebase Impostazioni della console e scorrere fino alla sezione di configurazione Web.
  2. Nella scheda certificati web push, fare clic su Genera coppia di chiavi. La console visualizza un avviso che indica 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 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 tua chiave pubblica e privata esistente nella forma codificata sicura dell'URL base64:

  1. Aprire la Nuvola di messaggistica scheda del riquadro Firebase Impostazioni della console e scorrere fino alla sezione di configurazione Web.
  2. Nella scheda certificati push Web, individuare e selezionare il testo del link, "importare una coppia di chiavi esistente".
  3. Nella finestra di dialogo Importa una coppia di chiavi, di fornire le chiavi pubbliche e private nei campi corrispondenti e fare clic su Importa. La console visualizza la stringa della chiave pubblica e la data di aggiunta.

Per le istruzioni su come aggiungere la chiave per la vostra applicazione, vedere le credenziali Configurare Web in vostra applicazione . Per ulteriori informazioni sul formato delle chiavi e come generare loro, vedere le chiavi server applicazioni .

Recupera un oggetto di messaggistica

Versione web 9

import { getMessaging } from "firebase/messaging";

const messaging = getMessaging();

Versione web 8

const messaging = firebase.messaging();

Configura le credenziali Web nella tua app

Il metodo getToken(): Promise<string> permette FCM per utilizzare la chiave di credenziali insulso per l'invio di richieste di messaggi a diversi servizi di push. Con il tasto si prodotta o importata in base alle istruzioni di credenziali Configure Web con FCM , aggiungerlo nel codice dopo che l'oggetto di messaggistica viene recuperato:

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

Accedi al token di registrazione

Quando è necessario recuperare la registrazione corrente gettone per un'istanza app, chiamata getToken . Se l'autorizzazione di notifica non è stata concessa, questo metodo richiederà all'utente le autorizzazioni di notifica. In caso contrario, restituisce un token o rifiuta la promessa a causa di un errore.

Il servizio di messaggistica richiede un firebase-messaging-sw.js file. A meno che non si dispone già di un firebase-messaging-sw.js di file, creare un file vuoto con quel nome e posizionarlo nella directory principale 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:

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

Versione web 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 server dell'app e archivialo utilizzando il metodo che preferisci.

Prossimi passi

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