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

Vue 3 template refs doesn't quite mirror the true state of the DOM

Once invoked by an ajax request, the $().ready function is executed

Guide to profiling resources in Node.js applications

Incorporating an offset with the I18nPluralPipe

Error: Material-UI X is unable to locate the data grid context

Issue encountered: Inability to implement asynchronous functionality within a forEach loop while making an API request

Deciphering the Cause of mapStateToPropsCall in Redux and React

Can JavaScript be used to dynamically assign events to elements on a webpage?

Vue SPA authentication

Directive unable to recognize ng-pattern functionality

Swapping out bullet points for delicious food icons in an unordered list on an HTML page

Ways to navigate through a webpage without encountering any overflow issues

The Node.js application encounters a blank response when making a GET request to the API

A JavaScript regular expression for identifying IMDB URLs

Avoiding the need to wait for completion of the jQuery $.get function

What is causing the issue with Next.js Json.map function not functioning correctly?

Is it possible to activate the nearby dropdown based on the user's selection?

Checking the validity of subdomain names using JavaScript/jQuery

The code is running just fine when tested locally, but it seems to encounter an issue when accessed remotely, yielding

The submit option fails to appear on the screen in the JsonForm library