Firebase Cloud Messaging - How to update the Frontend UI from firebase-messaging-sw.js onBackgroundM-CodePudding

I'm working on webapp where I have to update the Vuejs frontend with the notification message received through firebase console. Rightnow firebase-messaging-sw.js can be only place in public folder so that I'm not sure how to display the notifications or trigger some function inside vue app.

Im wondering how can i call some vue functions or update the UI

Sample firebase-messaging-sw.js code

/* eslint-disable */
importScripts("https://www.gstatic.com/firebasejs/8.0.1/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/8.0.1/firebase-messaging.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: "value",
  authDomain: "value",
  databaseURL: "value",
  projectId: "value",
  storageBucket: "value",
  messagingSenderId: "value",
  appId: "value",
  measurementId: "value",
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

messaging.onBackgroundMessage((payload) => {
  // How to call some functions here or how to update this values to frontend
});

CodePudding user response：

in firebase-messaging-sw.js

messaging.onBackgroundMessage((payload) => {
  const channel = new BroadcastChannel('sw-messages');
  channel.postMessage(payload);
});

in vue file:

mounted(){
 const channel = new window.BroadcastChannel("sw-messages");
 channel.addEventListener('message' (event)=> {
   console.log(event)
 })
}

BroadcastChannel Support https://caniuse.com/?search=BroadcastChannel