@firebase/messaging

Receiving messages

This feature allows your web app to receive messages sent from the Firebase Console or your server-side code. The `onMessage` function listens for messages when your web app is in the foreground.

import { getMessaging, onMessage } from '@firebase/messaging';

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

Requesting permission to send notifications

Before sending notifications to the user, your application needs to request permission. This code snippet demonstrates how to request a token, which implicitly asks the user for permission to receive notifications. If permission is granted, you receive a token that you can use to send messages to the user.

import { getMessaging, getToken } from '@firebase/messaging';

const messaging = getMessaging();
getToken(messaging, { vapidKey: 'your-public-vapid-key' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // For example, enable a button that lets the user see the notification
    console.log(currentToken);
  } 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);
});

Background message handling

This feature enables the handling of messages when your web app or a web page is not active in the foreground. It's particularly useful for showing notifications that can engage or re-engage your user with your web app.

import { getMessaging, setBackgroundMessageHandler } from '@firebase/messaging/sw';

const messaging = getMessaging();
setBackgroundMessageHandler(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'
  };

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