How to use the firebase/app.messaging function in firebase

function getMessagingToken() {
  return firebase
    .messaging()
    .getToken()
    .catch(err => {
      console.error('Unable to retrieve refreshed token ', err) // eslint-disable-line no-console
      return Promise.reject(err)
    })
}

*
 *  For development it will be built ONCE when you run `yarn dev`, after that you have to run it manually.
 *
 *  If you want to actually use it you must have FCM_SENDER_ID environment variable set to a valid value.
 *
 *  See https://docs.karrot.world/mobile.html for a hint ... you'll need to dig around a bit more on
 *  https://console.firebase.google.com/ though to find the sender id.
 *
 */

import 'firebase/messaging'
import { initializeApp, messaging as initializeMessaging } from 'firebase/app'

initializeApp({ messagingSenderId: __ENV.FCM_SENDER_ID })

const messaging = initializeMessaging()

messaging.setBackgroundMessageHandler(payload => {
  // not actually used, but without it here firefox does not receive messages...
  console.log('received payload', payload)
})

// Ensure new workers to replace old ones...
// https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting

self.addEventListener('install', event => {
  event.waitUntil(self.skipWaiting())
})

self.addEventListener('activate', event => {
  event.waitUntil(self.clients.claim())
})

unsubscribe(topic) {
    console.log('Unsubscribing from: ' + topic);
    const messaging = firebase.messaging();
    return messaging.getToken()
      .then(token => {
        const url = UNSUBSCRIBE_ENDPOINT + '/' + topic;
        return this._postWithToken(url, token);
      }).catch(err => {
        if (this._checkBlockedNotification(err)) {
          err.blocked = true;
        }
        return Promise.reject(err);
      });
  }

new Promise(async (resolve) => {
    const messaging = firebase.messaging()

    await messaging.requestPermission()
      .then(() => messaging.getToken())
      .then((token) => resolve(token))
      .catch((error) => {
        console.log(error)
        resolve(false)
      })
  })

export const askForPermissionToReceiveNotifications = async () => {
  try {
    const messaging = firebase.messaging();
    await messaging.requestPermission();
    const token = await messaging.getToken();

    await FPTUSDK.push.syncPush(token);

    return token;
  } catch (err) {
    //eslint-disable-next-line
    console.log(err);
    return null;
  }
};

init: async function() {
    firebase.initializeApp({
      messagingSenderId: 'your sender id',
    })

    try {
      if ((await this.tokenInlocalforage()) !== null) {
        return false
      }

      const messaging = firebase.messaging()
      await messaging.requestPermission()
      const token = await messaging.getToken()

      localforage.setItem('fcm_token', token)
      console.log('fcm_token', token)
    } catch (error) {
      console.error(error)
    }
  },
}

isNotificationBlocked() {
    const messaging = firebase.messaging();
    return messaging.getToken()
      .then(_ => {
        return false;
      })
      .catch(err => {
        if (err.code === ERROR_NOTIFICATIONS_BLOCKED) {
          return true;
        }
        return Promise.reject(err);
      });
  }
}

import firebase from "firebase/app";
import 'firebase/database';
import "firebase/messaging";

const firebaseConfig = {
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_DATABASE_URL,
    projectId: process.env.REACT_APP_PROJECT_ID,
    messagingSenderId: process.env.REACT_APP_MESSEAGING_SENDER_ID,
    appId: process.env.REACT_APP_APP_ID
};

firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();

messaging.usePublicVapidKey(process.env.REACT_APP_WEB_PUSH_CERTIFICATES);

export { firebase as default, messaging };

.then(registration => {
        firebase.messaging().useServiceWorker(registration);
      });
  }