Google is committed to advancing racial equity for Black communities. See how.
Questa pagina è stata tradotta dall'API Cloud Translation.
Switch to English

Configurare un'app client JavaScript Firebase Cloud Messaging

L'API JavaScript FCM 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 pubblicate su HTTPS. Ciò è dovuto al suo uso di operatori del servizio, che sono disponibili solo sui siti HTTPS. Se hai bisogno di un provider, Firebase Hosting è consigliato per l'hosting HTTPS gratuito sul tuo dominio.

Per iniziare con l'API JavaScript FCM, è necessario aggiungere Firebase all'app Web e aggiungere la logica per accedere ai token di registrazione.

Aggiungi Firebase al tuo progetto JavaScript

Se non lo hai già fatto, aggiungi Firebase al tuo progetto JavaScript .

Se al momento stai utilizzando 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 usi per Firebase e assicurati di selezionare il progetto corretto. I nuovi progetti che aggiungono l'SDK FCM hanno questa API abilitata per impostazione predefinita.

Configurare le credenziali Web con FCM

L'interfaccia Web FCM utilizza credenziali Web denominate "Identificazione volontaria del server delle applicazioni" 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. È possibile generare una nuova coppia di chiavi o importare la coppia di chiavi esistente tramite Firebase Console.

Genera una nuova coppia di chiavi

  1. Apri la scheda Messaggi cloud del riquadro Impostazioni della console di 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 relativo alla generazione della coppia di chiavi e la stringa di chiave pubblica e la data aggiunte.

Importa una coppia di chiavi esistente

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

  1. Apri la scheda Messaggi cloud del riquadro Impostazioni della console di 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 , inserisci le tue chiavi pubbliche e private nei campi corrispondenti e fai clic su Importa . La console visualizza la stringa della chiave pubblica e la data aggiunte.

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, consultare Chiavi del server delle applicazioni .

Recupera un oggetto di messaggistica

// Retrieve Firebase Messaging object.
const messaging = firebase.messaging();

Configura le credenziali Web nella tua app

Il metodo usePublicVapidKey consente a FCM di utilizzare le credenziali della chiave usePublicVapidKey quando si inviano richieste di messaggi a diversi servizi push. Utilizzando la chiave generata o importata in base alle istruzioni in Configura credenziali Web con FCM , aggiungerla nel codice dopo aver recuperato l'oggetto di messaggistica:

 // Add the public key generated from the console here.
messaging.usePublicVapidKey("BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu");
 

Accedi al token di registrazione

Questa sezione descrive come recuperare il token di registrazione per un'istanza dell'app e come monitorare gli eventi di aggiornamento del token. Poiché il token potrebbe essere ruotato dopo l'avvio iniziale, è necessario monitorare l'aggiornamento del token e recuperare sempre l'ultimo token di registrazione aggiornato.

Il token di registrazione può cambiare quando:

  • L'app Web elimina il token di registrazione.
  • L'utente cancella i dati del browser. In questo caso, chiamare getToken per recuperare il nuovo token.

Recupera il token di registrazione corrente

Quando è necessario recuperare il token corrente, chiamare getToken . Se l'autorizzazione di notifica non è stata concessa, questo metodo chiederà 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 file firebase-messaging-sw.js . A meno che tu non abbia già un file firebase-messaging-sw.js , crea un file vuoto con quel nome e posizionalo nella radice del tuo dominio prima di recuperare un token. È possibile aggiungere contenuti significativi al file in un secondo momento nel processo di installazione del client.

Per recuperare il token corrente:

// Get Instance ID token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken().then((currentToken) => {
  if (currentToken) {
    sendTokenToServer(currentToken);
    updateUIForPushEnabled(currentToken);
  } else {
    // Show permission request.
    console.log('No Instance ID token available. Request permission to generate one.');
    // Show permission UI.
    updateUIForPushPermissionRequired();
    setTokenSentToServer(false);
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  showToken('Error retrieving Instance ID token. ', err);
  setTokenSentToServer(false);
});

Monitorare l'aggiornamento token

Il callback onTokenRefresh ogni volta che viene generato un nuovo token, quindi la chiamata di getToken nel suo contesto garantisce che si acceda a un token di registrazione corrente e disponibile.

// Callback fired if Instance ID token is updated.
messaging.onTokenRefresh(() => {
  messaging.getToken().then((refreshedToken) => {
    console.log('Token refreshed.');
    // Indicate that the new Instance ID token has not yet been sent to the
    // app server.
    setTokenSentToServer(false);
    // Send Instance ID token to app server.
    sendTokenToServer(refreshedToken);
    // ...
  }).catch((err) => {
    console.log('Unable to retrieve refreshed token ', err);
    showToken('Unable to retrieve refreshed token ', err);
  });
});

Dopo aver ottenuto il token, inviarlo al server delle app e memorizzarlo utilizzando il metodo preferito. È possibile utilizzare l'API del server ID istanza per ottenere informazioni sugli abbonamenti

Prossimi passi

Dopo aver completato la procedura di installazione, ecco alcune opzioni per andare avanti con FCM per Web (JavaScript):