skip to Main Content

Here is my whole code:

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.16.0/firebase-app.js";
import { getMessaging, getToken } from "https://www.gstatic.com/firebasejs/9.16.0/firebase-messaging.js";
//This data is filled correctly just clearing it here for the question
const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "t",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
};

// Initialize Firebase
const bbFirebase = initializeApp(firebaseConfig);
const messaging = getMessaging();
// Add the public key generated from the console here.
getToken(messaging, { vapidKey: 'I_HAVE_PLACED_VALID_KEY_HERE' }).then((currentToken) => {
    if (currentToken) {
        console.log("TOKEN: " + 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);
    // ...
});

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

    self.registration.showNotification(notificationTitle,
        notificationOptions);
});
function requestPermission() {
    console.log('Requesting permission...');
    Notification.requestPermission().then((permission) => {
        if (permission === 'granted') {
            console.log('Notification permission granted.');
            // TODO(developer): Retrieve a registration token for use with FCM.
            // In many cases once an app has been granted notification permission,
            // it should update its UI reflecting this.
            resetUI();
        } else {
            console.log('Unable to get permission to notify.');
        }
    });
}

So when I execute this code I can generate a token. I see the token clearly and all good there. However I have this error:

Uncaught TypeError: messaging.onBackgroundMessage is not a function
at firebase.js:31:11

Any idea why I can this error and how can I at least console.log() print the incoming notifications?

2

Answers


  1. The onBackgroundMessage() is a top level function just like getToken() in the new functional syntax imported from firebase/messaging/sw as mentioned in the documentation.

    import { getMessaging, onMessage } from 'firebase/messaging'
    import { onBackgroundMessage } from 'firebase/messaging/sw'
    
    onBackgroundMessage(messaging, (payload) => {
      // ...
    })
    
    Login or Signup to reply.
  2. I´m having trouble with this too but if you paste this code in firebase-messaging-sw.js and that file is in the root of firebase hosting it works.

    // Import and configure the Firebase SDK
    // These scripts are made available when the app is served or deployed on Firebase Hosting
    // If you do not serve/host your project using Firebase Hosting see https://firebase.google.com/docs/web/setup
    importScripts('/__/firebase/9.2.0/firebase-app-compat.js');
    importScripts('/__/firebase/9.2.0/firebase-messaging-compat.js');
    importScripts('/__/firebase/init.js');
    
    const messaging = firebase.messaging();
    
    /**
     * Here is is the code snippet to initialize Firebase Messaging in the Service
     * Worker when your app is not hosted on Firebase Hosting.
    
     // 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/9.2.0/firebase-app-compat.js');
     importScripts('https://www.gstatic.com/firebasejs/9.2.0/firebase-messaging-compat.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();
     **/
    
    
    // If you would like to customize notifications that are received in the
    // background (Web app is closed or not in browser focus) then you should
    // implement this optional method.
    // Keep in mind that FCM will still show notification messages automatically 
    // and you should use data messages for custom notifications.
    // For more info see: 
    // https://firebase.google.com/docs/cloud-messaging/concept-options
    messaging.onBackgroundMessage(function(payload) {
    //   console.log('[firebase-messaging-sw.js] Received background message ', payload);
      console.log('[firebase-messaging-sw.js] PAYLOAD NOTIFICATION: ', payload.notification);
      // Customize notification here
      const notificationTitle = payload.notification.title
      const notificationOptions = {
        body: payload.notification.body,
        icon: payload.notification.image
      };
    
      self.registration.showNotification(notificationTitle,
        notificationOptions);
    });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search