Firebase Cloud Messaging -如何从Firebase - Messaging -sw.js的onB

Question

我正在工作的webapp，我必须更新通过firebase控制台收到的通知消息的Vuejs前端。现在firebase-messaging-sw.js只能放在公共文件夹中，所以我不确定如何显示通知或触发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

in firebase-messaging-sw.js

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

:

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

BroadcastChannel支持https://caniuse.com/?search=BroadcastChannel