如何使用 react 在 firebase-messaging-sw.js 中的 onBackgroundMessage 觸發 App.tsx 的事件

Question

我在公共文件夾中有一個文件 firebase-messaging-sw.js。 當應用服務器發送消息並且瀏覽器處於后台時，會觸發 onBackgroundMessage function 並顯示通知。 這是代碼：

const messaging = firebase.messaging();
messaging.onBackgroundMessage(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  const notificationTitle = payload.notification?.title;
  const notificationOptions = {
    body: payload.notification?.body,
    icon: '/firebase-logo.png'
  };
  
  self.registration.showNotification(notificationTitle, notificationOptions);
  // Call a function in app.tsx to show a modal dialog when the user back to the browser
  //code example
});

我想當 onBackgroundMessage 被觸發時，它會在 app.tsx 的 react 處觸發 function。 你是怎樣做的？

Answer 1

self.client.postMessage are helping to triggering the event

initMessaging.onBackgroundMessage(function(payload) {
  console.log('Received background message ', payload);
  
 // Customize notification here
  const notification = payload.data;
  const notificationTitle = payload.data.body.title;
  const notificationOptions = {
    body: payload.data.body,
  };
  **self.clients.matchAll({
    type: 'window',
    includeUncontrolled: true
  }).then(all => all.forEach(client => {
    console.log('client',client)
    client.postMessage(payload);
    // client.postMessage("Responding to ");
   }))**
   self.registration.showNotification(notificationTitle,
    notificationOptions);
});

Answer 2

你如何處理 app.tsx 中的 postmessage 事件。 我無法從 onBackgroundMessage 接收事件發布消息