Firebase 云消息传递 - 如何从 firebase-messaging-sw.js onBackgroundMessage 函数更新前端 UI

Question

我正在开发 webapp，我必须使用通过 firebase 控制台收到的通知消息来更新 Vuejs 前端。现在 firebase-messaging-sw.js 只能放在公共文件夹中，所以我不确定如何在 vue 应用程序中显示通知或触发某些功能。

我想知道如何调用一些 vue 函数或更新 UI

示例firebase-messaging-sw.js 代码

/* 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
});

Answer 1

在 firebase-messaging-sw.js

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

在 vue 文件中：

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

广播频道支持 https://caniuse.com/?search=BroadcastChannel