Notification issues in Vue with Firebase Cloud Messaging while in foreground

Question

Notification issues in Vue with Firebase Cloud Messaging while in foreground

I have been working on implementing FCM in my Vue PWA application. I have successfully configured background notifications, but I am facing issues with handling notifications when the app is open. Here is the code I am using.

`src/App.vue`

import firebase from './plugins/firebase'

export default {
  // Other content...

  methods: {
    prepareFcm () {
      var messaging = firebase.messaging()
      messaging.usePublicVapidKey(this.$store.state.fcm.vapidKey)
      messaging.getToken().then(async fcmToken => {
        this.$store.commit('fcm/setToken', fcmToken)
        messaging.onMessage(payload => {
          window.alert(payload)
        })
      }).catch(e => {
        this.$store.commit('toast/setError', 'An error occurred while processing push notification.')
      })
    }
  },

  mounted () {
    this.prepareFcm()
  }
}

`public/firebase-messaging-sw.js`

importScripts('https://www.gstatic.com/firebasejs/5.5.6/firebase-app.js')
importScripts('https://www.gstatic.com/firebasejs/5.5.6/firebase-messaging.js')

firebase.initializeApp({
  messagingSenderId: '123456789'
})

const messaging = firebase.messaging()

messaging.setBackgroundMessageHandler(function (payload) {
  return self.registration.showNotification(payload)
})

`src/plugins/firebase.js`

import firebase from '@firebase/app'
import '@firebase/messaging'
// import other firebase libraries...

const firebaseConfig = {
  apiKey: '...',
  authDomain: '...',
  databaseURL: '...',
  projectId: '...',
  storageBucket: '...',
  messagingSenderId: '123456789',
  appId: '...'
}

firebase.initializeApp(firebaseConfig)

export default firebase

What could be the issue with my setup?

javascript firebase vue.js firebase-cloud-messaging

Answer 1

Answer №1

I came across a solution in a previous question and answer on StackOverflow (although I seem to have lost the link).

It turns out that using Firebase API version 7.8.0 is necessary instead of the previously recommended 5.5.6. Therefore, the initial lines in public/firebase-messaging-sw.js should be adjusted as follows:

importScripts('https://www.gstatic.com/firebasejs/7.8.0/firebase-app.js')
importScripts('https://www.gstatic.com/firebasejs/7.8.0/firebase-messaging.js')

Answer 2

I came across a solution in a previous question and answer on StackOverflow (although I seem to have lost the link).

It turns out that using Firebase API version 7.8.0 is necessary instead of the previously recommended 5.5.6. Therefore, the initial lines in public/firebase-messaging-sw.js should be adjusted as follows:

importScripts('https://www.gstatic.com/firebasejs/7.8.0/firebase-app.js')
importScripts('https://www.gstatic.com/firebasejs/7.8.0/firebase-messaging.js')

Answer 3

Answer №2

I encountered the same issue recently. The problem was that the firebase version specified in my "package.json" file did not match the version imported in my "firebase-messaging-sw.js" file using importScripts. Once I aligned both versions to be the same as the one in "package.json", the issue was resolved.

Initial setup

 **"package.json"**
 
 "firebase": "^8.2.1",
 
  **"firebase-messaging-sw.js"**

 importScripts('https://www.gstatic.com/firebasejs/7.8.0/firebase-app.js');
 importScripts('https://www.gstatic.com/firebasejs/7.8.0/firebase-messaging.js');

Corrected setup

 **"package.json"**

 "firebase": "^8.2.1",

 **"firebase-messaging-sw.js"**

 importScripts('https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js');
 importScripts('https://www.gstatic.com/firebasejs/8.2.1/firebase-messaging.js');

Answer 4

I encountered the same issue recently. The problem was that the firebase version specified in my "package.json" file did not match the version imported in my "firebase-messaging-sw.js" file using importScripts. Once I aligned both versions to be the same as the one in "package.json", the issue was resolved.

Initial setup

 **"package.json"**
 
 "firebase": "^8.2.1",
 
  **"firebase-messaging-sw.js"**

 importScripts('https://www.gstatic.com/firebasejs/7.8.0/firebase-app.js');
 importScripts('https://www.gstatic.com/firebasejs/7.8.0/firebase-messaging.js');

Corrected setup

 **"package.json"**

 "firebase": "^8.2.1",

 **"firebase-messaging-sw.js"**

 importScripts('https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js');
 importScripts('https://www.gstatic.com/firebasejs/8.2.1/firebase-messaging.js');

Answer 5

Answer №3

I encountered a discrepancy between the version on my package.json (8.2.1) and the actual SDK_VERSION (8.0.1)

Once I updated the service-workers to match the correct version, everything worked smoothly.

Answer 6

I encountered a discrepancy between the version on my package.json (8.2.1) and the actual SDK_VERSION (8.0.1)

Once I updated the service-workers to match the correct version, everything worked smoothly.

Answer 7

Answer №4

Tackling firebase push notifications in Vue 3 (with Vite) was a bit of a challenge for me, especially with PWA support enabled through vite-plugin-pwa. It often felt like navigating blindly through uncharted territory. Despite successfully setting up PWA support, I encountered some persistent issues:

Notifications were received in the background but not in the foreground.
Background notifications appeared duplicated at times.

Below is my complete setup utilizing the latest version of Firebase (9.12.1) at the time of writing this post:

// Store this file as firebase-messaging-sw.js in public folder
   
importScripts(
      "https://www.gstatic.com/firebasejs/9.12.1/firebase-app-compat.js"
    );
importScripts(
      "https://www.gstatic.com/firebasejs/9.12.1/firebase-messaging-compat.js"
    );
// Initialize Firebase
firebase.initializeApp({
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
});
const messaging = firebase.messaging();

    
messaging.onBackgroundMessage(function (payload) {
// Customize notification here
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
  body: payload.notification.body,
  icon: "/icon.png",
};

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

Suggestions online placed the onBackgroundMessage function in the service worker, but after experimenting and commenting it out, the issue of duplicate notifications seemed to be resolved.

Next, in a file named firebase.js, tokens are retrieved along with listening for foreground notifications:

// Place this firebase.js file alongside main.js
    
import firebase from "firebase/compat/app";
import { getMessaging } from "firebase/messaging";
    
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
};
    
const app = firebase.initializeApp(firebaseConfig);
export default getMessaging(app);

In main.js:

import App from "./App.vue";
import firebaseMessaging from "./firebase";

const app = createApp(App)
app.config.globalProperties.$messaging = firebaseMessaging; //register as a global property

Lastly, in App.vue (or any desired location for token retrieval and server-side transfer):

import {getToken, onMessage} from "firebase/messaging";

export default {
  mounted() {
    getToken(this.$messaging, {
      vapidKey:
        "XXX-XXX",
    })
      .then((currentToken) => {
        if (currentToken) {
          console.log("client token", currentToken);
          onMessage(this.$messaging, (payload) => {
            console.log("Message received. ", payload);
          });
          
          //send token to server-side
        } else {
          console.log(
            "No registration token available. Request permission to generate one"
          );
        }
      })
      .catch((err) => {
        console.log("An error occurred while retrieving token.", err);
      });
  }
}

Remember to include the necessary vapidKey. It may take some trial and error, but the solution worked smoothly in the end.

As for designing the appearance of foreground notifications, I have refrained from providing an opinion and simply logged the payload. Feel free to customize it to your liking.

Answer 8

Tackling firebase push notifications in Vue 3 (with Vite) was a bit of a challenge for me, especially with PWA support enabled through vite-plugin-pwa. It often felt like navigating blindly through uncharted territory. Despite successfully setting up PWA support, I encountered some persistent issues:

Notifications were received in the background but not in the foreground.
Background notifications appeared duplicated at times.

Below is my complete setup utilizing the latest version of Firebase (9.12.1) at the time of writing this post:

// Store this file as firebase-messaging-sw.js in public folder
   
importScripts(
      "https://www.gstatic.com/firebasejs/9.12.1/firebase-app-compat.js"
    );
importScripts(
      "https://www.gstatic.com/firebasejs/9.12.1/firebase-messaging-compat.js"
    );
// Initialize Firebase
firebase.initializeApp({
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
});
const messaging = firebase.messaging();

    
messaging.onBackgroundMessage(function (payload) {
// Customize notification here
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
  body: payload.notification.body,
  icon: "/icon.png",
};

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

Suggestions online placed the onBackgroundMessage function in the service worker, but after experimenting and commenting it out, the issue of duplicate notifications seemed to be resolved.

Next, in a file named firebase.js, tokens are retrieved along with listening for foreground notifications:

// Place this firebase.js file alongside main.js
    
import firebase from "firebase/compat/app";
import { getMessaging } from "firebase/messaging";
    
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
};
    
const app = firebase.initializeApp(firebaseConfig);
export default getMessaging(app);

In main.js:

import App from "./App.vue";
import firebaseMessaging from "./firebase";

const app = createApp(App)
app.config.globalProperties.$messaging = firebaseMessaging; //register as a global property

Lastly, in App.vue (or any desired location for token retrieval and server-side transfer):

import {getToken, onMessage} from "firebase/messaging";

export default {
  mounted() {
    getToken(this.$messaging, {
      vapidKey:
        "XXX-XXX",
    })
      .then((currentToken) => {
        if (currentToken) {
          console.log("client token", currentToken);
          onMessage(this.$messaging, (payload) => {
            console.log("Message received. ", payload);
          });
          
          //send token to server-side
        } else {
          console.log(
            "No registration token available. Request permission to generate one"
          );
        }
      })
      .catch((err) => {
        console.log("An error occurred while retrieving token.", err);
      });
  }
}

Remember to include the necessary vapidKey. It may take some trial and error, but the solution worked smoothly in the end.

As for designing the appearance of foreground notifications, I have refrained from providing an opinion and simply logged the payload. Feel free to customize it to your liking.

Notification issues in Vue with Firebase Cloud Messaging while in foreground

`src/App.vue`

`public/firebase-messaging-sw.js`

`src/plugins/firebase.js`

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Ways to gradually reveal all elements within a header section

I am looking to retrieve data from the Graph API JSON and gradually refine my search to achieve successful

retrieving data from GET variables and sending to a PHP array

Using Ajax to update multiple text field rows with unique values

Concurrent Accordion and Color Transformation Animations

Error in ReactJS: Trying to access property 'items' of an undefined object

Executing a file function from another within a module function in ReactJS

Create a validation rule in yup that depends on an external condition

Names picked at random and presented in the innerHTML

Can a props be retrieved and passed as an argument to a function?

What sets apart Selenium's mouseMove() function from the physical movement of a mouse?

Adjusting the X-axis in Highstock: Tips and Tricks

Using single page anchor tags in Next.js to toggle content visibility

Automatic placement of the cursor at the left end of the username field in the registration form is required

Error: The function jQuery(...).hexColorPicker does not exist

Executing a script that has been inserted into the page post-loading

Preserving client-side page state during page reloads in angular.js apps

How can the client be informed about the ongoing processing of the request by the servlet?

Unable to access Bootstrap dropdown menu after initial ajax form submission

Node.js project is set up globally on personal system