How to implement Firebase Cloud Messaging (FCM) with Nuxt.js

Question

I'm trying to implement Google's Firebase Cloud Messaging (FCM) into my Nuxt.js APP.

So far I've installed firebase, created a firebase.js plugin inside ./plugins folder, imported and initialized firebase and the messaging service, everything seems to be working fine.

Now I'm not sure how or where to go from here..

The idea is to handle everything inside vuex, in notifications module.

I want to handle both background and foreground notifications. Background gets handled by service-worker, for the foreground I've made a simple notification component that I want to show everytime I receive a push notification from FCM.

The question:

How would I go about registering a service worker, requesting permission and handling the foreground/background notifications? I mean the exact location/file/way specific to Nuxt.js? Should I make another plugin just for that, use middleware folder or just handle everything in my default layout file?

Whats the cleanest way to go about it?

Thanks in advance!

Answer 1

Step 1) Install dependencies

npm install firebase
npm install @nuxtjs/firebase

Step 2) Create a file serviceWorker.js on your project's root folder.

self.addEventListener('push', function (e) {
data = e.data.json();
  var options = {
    body: data.notification.body,
    icon: data.notification.icon,
    vibrate: [100, 50, 100],
    data: {
    dateOfArrival: Date.now(),
    primaryKey: '2'
  },
};

Step 3) Config your nuxt.config.js as follows.

Add this line to the top of your file.

const fs = require('fs')

Update your modules array with firebase credentials.

[
  '@nuxtjs/firebase',
  {
    config: {
      apiKey: "<yourKey>",
      authDomain: "<yourAuthDomain>",
      projectId: "<yourProjectId>",
      storageBucket: "<yourStorageBucket>",
      messagingSenderId: "<yourMessagingSenderId>",
      appId: "<yourAppId>",
      measurementId: ",<yourMeasurementId>"
    },
    onFirebaseHosting: false,
    services: {
      messaging: {
        createServiceWorker: true,
        fcmPublicVapidKey: '<yourFCMPublicVapidKey>',
        inject: fs.readFileSync('./serviceWorker.js')
      }
    }
  }
]

Step 4 > Finally.. to your index.js or layout file.

async mounted() {
  const currentToken = await this.$fire.messaging.getToken()
  const data = JSON.stringify({
    notification: {
      title: 'firebase',
      body: 'firebase is awesome',
      click_action: 'http://localhost:3000/',
      icon: 'http://localhost:3000/assets/images/brand-logo.png'
    }, 
    to: currentToken
  })
  const config = {
    method: 'post',
    url: 'https://fcm.googleapis.com/fcm/send',
    headers: { 
      'Content-Type': 'application/json', 
      'Authorization': 'key=<yourServerKey>'
    },
    data
  };
  const response = await axios(config)
  this.$fire.messaging.onMessage((payload) => {
    console.info('Message received: ', payload)
  })
  this.$fire.messaging.onTokenRefresh(async () => {
    const refreshToken = await this.$fire.messaging.getToken()
    console.log('Token Refreshed',refreshToken)
  })
}

For more details, to understand the steps, you can visit this article.