FCM Web - 前后台通知相同（在前台重用后台通知）

Question

我想知道当我的网站在前台时，是否可以展示与它在后台时相同的通知。我不想自定义通知的外观，而是想完全重用它。

目前，我正在使用以下函数处理通知的到来：

function messageReceived(payload) {
    // TODO implement actions on message received
    console.log(payload);
}

但我不想这样做。删除这个函数并不能帮助解决问题。

- J.Porras

Answer 1

我不确定是否有其他解决方法，但我创建了一个新的通知，并使用在 messageReceived 方法中收到的有效载荷:

function messageReceived(payload) {    
  var notificationOptions = {
    body: payload.notification.body,
    icon: payload.notification.icon,
    click_action: payload.notification.click_action
  };
  new Notification(payload.notification.title, notificationOptions);
}

- J.Porras

---

通知类已被弃用，不支持Android。此解决方案仅适用于PC，而且通知不会出现在通知栏中。 - Nimit Bhargava

Answer 2

要在Android上工作，通知必须从serviceWorker发送。

为了获取Firebase serviceWorker注册并使用它来显示通知，您可以执行以下操作：

messaging.onMessage(function(payload) {
    console.log("onMessage: ", payload);
    navigator.serviceWorker.getRegistration('/firebase-cloud-messaging-push-scope').then(registration => {
        registration.showNotification(
            payload.notification.title,
            payload.notification
        )
    });
});

- cristi804