Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

Ricevi messaggi in un client JavaScript

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Il comportamento dei messaggi varia a seconda che la pagina sia in primo piano (con lo stato attivo) o in background, nascosta dietro altre schede o completamente chiusa. In tutti i casi la pagina deve gestire la richiamata onMessage , ma nei casi in background potrebbe essere necessario gestire anche onBackgroundMessage o configurare la notifica di visualizzazione per consentire all'utente di portare la tua app Web in primo piano.

Stato dell'app Notifica Dati Tutti e due
Primo piano onMessage onMessage onMessage
Background (operaio dei servizi) onBackgroundMessage (visualizza automaticamente la notifica) onBackgroundMessage onBackgroundMessage (visualizza automaticamente la notifica)

L' esempio di avvio rapido JavaScript mostra tutto il codice necessario per ricevere i messaggi.

Gestisci i messaggi quando l'app Web è in primo piano

Per ricevere l'evento onMessage , la tua app deve definire il lavoratore del servizio di messaggistica Firebase in firebase-messaging-sw.js . In alternativa, puoi fornire un service worker esistente all'SDK tramite getToken(): Promise<string> .

Web version 9

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
const firebaseApp = initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = getMessaging(firebaseApp);

Web version 8

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here. Other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

Quando la tua app è in primo piano (l'utente sta attualmente visualizzando la tua pagina web), puoi ricevere i dati e i payload delle notifiche direttamente nella pagina.

Web version 9

// Handle incoming messages. Called when:
// - a message is received while the app has focus
// - the user clicks on an app notification created by a service worker
//   `messaging.onBackgroundMessage` handler.
import { getMessaging, onMessage } from "firebase/messaging";

const messaging = getMessaging();
onMessage(messaging, (payload) => {
  console.log('Message received. ', payload);
  // ...
});

Web version 8

// Handle incoming messages. Called when:
// - a message is received while the app has focus
// - the user clicks on an app notification created by a service worker
//   `messaging.onBackgroundMessage` handler.
messaging.onMessage((payload) => {
  console.log('Message received. ', payload);
  // ...
});

Gestisci i messaggi quando la tua app Web è in background

Tutti i messaggi ricevuti mentre l'app è in background attivano una notifica di visualizzazione nel browser. Puoi specificare le opzioni per questa notifica, come il titolo o l'azione di clic, nella richiesta di invio dal server dell'app o usando la logica di lavoro del servizio sul client.

Impostazione delle opzioni di notifica nella richiesta di invio

Per i messaggi di notifica inviati dal server dell'app, l'API JavaScript di FCM supporta la chiave fcm_options.link . In genere questo è impostato su una pagina nella tua app web:

https://fcm.googleapis.com//v1/projects/<YOUR-PROJECT-ID>/messages:send
Content-Type: application/json
Authorization: bearer <YOUR-ACCESS-TOKEN>

{
  "message": {
    "token": "eEz-Q2sG8nQ:APA91bHJQRT0JJ...",
    "notification": {
      "title": "Background Message Title",
      "body": "Background message body"
    },
    "webpush": {
      "fcm_options": {
        "link": "https://dummypage.com"
      }
    }
  }
}

Se il valore del collegamento punta a una pagina che è già aperta in una scheda del browser, un clic sulla notifica porta quella scheda in primo piano. Se la pagina non è già aperta, un clic di notifica apre la pagina in una nuova scheda.

Poiché i messaggi di dati non supportano fcm_options.link , ti consigliamo di aggiungere un payload di notifica a tutti i messaggi di dati. In alternativa, puoi gestire le notifiche utilizzando il Service worker.

Per una spiegazione della differenza tra messaggi di notifica e di dati, vedere Tipi di messaggi .

Impostazione delle opzioni di notifica nel lavoratore del servizio

Per i messaggi di dati, puoi impostare le opzioni di notifica nel lavoratore del servizio. Innanzitutto, inizializza la tua app nel lavoratore del servizio:

Web version 9

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
const firebaseApp = initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = getMessaging(firebaseApp);

Web version 8

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here. Other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

Per impostare le opzioni, chiama onBackgroundMessage in firebase-messaging-sw.js . In questo esempio, creiamo una notifica con i campi titolo, corpo e icona.

Web version 9

import { getMessaging } from "firebase/messaging";
import { onBackgroundMessage } from "firebase/messaging/sw";

const messaging = getMessaging();
onBackgroundMessage(messaging, (payload) => {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };

  self.registration.showNotification(notificationTitle,
    notificationOptions);
});

Web version 8

messaging.onBackgroundMessage((payload) => {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };

  self.registration.showNotification(notificationTitle,
    notificationOptions);
});

Migliori pratiche per le notifiche

Se hai familiarità con la messaggistica push per il Web, potresti aver già letto le linee guida generali su ciò che rende una buona notifica . Per gli sviluppatori che inviano notifiche tramite FCM per il Web, le considerazioni più importanti sono la precisione e la pertinenza. Ecco alcuni consigli specifici per mantenere le tue notifiche precise e pertinenti:

  • Usa il campo icona per inviare un'immagine significativa. Per molti casi d'uso, questo dovrebbe essere il logo di un'azienda o di un'app che gli utenti riconoscono immediatamente. Oppure, per un'applicazione di chat, potrebbe essere l'immagine del profilo dell'utente mittente.
  • Utilizza il campo del titolo per esprimere la natura precisa del messaggio. Ad esempio, "Jimmy ha risposto" trasmette informazioni più precise rispetto a "Nuovo messaggio". Non utilizzare questo spazio prezioso per il nome della tua azienda o dell'app: utilizza l'icona a tale scopo.
  • Non utilizzare il titolo o il corpo della notifica per visualizzare il nome o il dominio del tuo sito Web; le notifiche contengono già il tuo nome di dominio.
  • Aggiungi fcm_options.link , in genere per ricollegare l'utente alla tua app Web e metterlo a fuoco nel browser. Nei rari casi in cui tutte le informazioni che devi trasmettere possono essere inserite nella notifica, potresti non aver bisogno di un collegamento.