@firebase/messaging

What is @firebase/messaging?

The @firebase/messaging package is part of the Firebase JavaScript SDK, providing web and mobile push messaging capabilities. It allows developers to send and receive messages across platforms reliably and at no cost. This package is specifically designed to integrate with Firebase Cloud Messaging (FCM), enabling the delivery of notifications and messages to users across devices.

What are @firebase/messaging's main functionalities?

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);
});

Other packages similar to @firebase/messaging

onesignal-node

OneSignal is a widely used service for sending push notifications. The onesignal-node package is a Node.js client for the OneSignal API, similar to @firebase/messaging in that it allows sending notifications to users. However, it's not tied to Firebase and works with OneSignal's own service, offering a broader range of features specific to notification delivery and user engagement.

pusher-js

Pusher is a service that focuses on building real-time applications with capabilities like WebSockets. The pusher-js package is their JavaScript client that allows for real-time bi-directional communication between web servers and clients. While it offers real-time messaging capabilities, it's more focused on application signaling and less on push notifications compared to @firebase/messaging.

web-push

The web-push package is a Node.js library for sending notifications using the Web Push protocol. It supports sending messages to any web push service, making it a versatile choice for web applications. Unlike @firebase/messaging, which is tied to Firebase's ecosystem, web-push is more generic and can be used without any specific backend service, offering more flexibility in how notifications are sent.

README

@firebase/messaging

This is the messaging component for the Firebase JS SDK. It has a peer dependency on the @firebase/app package on NPM. This package is included by default in the firebase wrapper package.

Installation

You can install this package by running the following in your project:

$ npm install @firebase/messaging

Usage

You can then use the firebase namespace exposed by this package as illustrated below:

ES Modules

import firebase from '@firebase/app';
import '@firebase/messaging'

// Do stuff w/ `firebase` and `firebase.messaging`

CommonJS Modules

const firebase = require('@firebase/app').default;
require('@firebase/messaging');

// Do stuff with `firebase` and `firebase.messaging`

Documentation

For comprehensive documentation please see the Firebase Reference Docs.