Ricevi messaggi in un client JavaScript

Il comportamento dei messaggi varia a seconda che la pagina sia in primo piano (ha lo stato attivo) o sullo sfondo, 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.

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

Gestisci i messaggi quando la tua 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> .

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);
messaging_init_in_sw.js

// 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.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.1/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();
service-worker.js

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

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

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

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 clic, nella richiesta di invio dal tuo server app o utilizzando la logica di service worker 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 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 , si consiglia 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 messaggio .

Impostazione delle opzioni di notifica nel service worker

Per i messaggi di dati, puoi impostare le opzioni di notifica nel service worker. Innanzitutto, inizializza la tua app nel service worker:

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);
messaging_init_in_sw.js

// 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.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.1/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();
service-worker.js

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

import { getMessaging } from "firebase/messaging/sw";
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);
});
messaging_on_background_message.js

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);
});
service-worker.js

Best practice 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 dell'icona per inviare un'immagine significativa. Per molti casi d'uso, questo dovrebbe essere il logo di un'azienda o di un'app che i tuoi utenti riconoscono immediatamente. Oppure, per un'applicazione di chat, potrebbe essere l'immagine del profilo dell'utente mittente.
• Usa 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 link.