获取 fcm 的 setBackgroundMessageHandler 函数中的文档

Question

下面是我的fcm setBackgroundMessageHandler函数：

messaging.setBackgroundMessageHandler(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };
var event = new CustomEvent("name-of-event", payload);
// Dispatch/Trigger/Fire the event
document.dispatchEvent(event);
  return self.registration.showNotification(notificationTitle,
      notificationOptions);
});

我无法访问上述方法中的document。我试图将文档保存在全局变量中并在上面的方法中访问它，但它不起作用。

var document = document;
.
.
.
document.dispatchEvent(event); // gives error: dispatchEvent of undefined

Answer 1

因为document在服务工作者中无法访问。因此，无法使用其dispatchEvent函数将事件发送到主页。

要将消息从服务工作者发送到Main page我们可以使用 BroadcastChannel .在主页中，创建一个如下所示的侦听器：

var listener = new BroadcastChannel('listener');
listener.onmessage = function(e) {
  console.log('Got message from service worker',e);
};

在service worker js文件中，使用 BroadcastChannel 的postMessage函数将消息发送到主页：

var listener = new BroadcastChannel('listener');
listener.postMessage('It works !!');