Question

我正在尝试自定义背景通知图标，但最终却收到了2条重复的通知。
第一个通知没有我设置的图标。
我希望得到第二个通知。

Here is the picture of my current result.

我已经将firebase-messaging-sw.js添加到了项目中，并且在onBackgroundMessage函数中添加了图标。

firebase.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: 'noti_icon.png'
  };

  return self.registration.showNotification(notificationTitle, notificationOptions);
});

我追溯了第一个通知的来源，发现它来自firebase-messaging.js

nt.prototype.onPush = function(a) {
                return d(this, void 0, void 0, function() {
                    var i, o, s;
                    return h(this, function(e) {
                        let sss = e
                        switch (e.label) {
                            case 0:
                                return (s = function(e) {
                                    var t = e.data;
                                    if (!t) return null;
                                    try {
                                        return t.json()
                                    } catch (e) {
                                        return null
                                    }
                                }(a)) ? [4, rt()] : (console.debug("FirebaseMessaging: failed to get parsed MessagePayload from the PushEvent. Skip handling the push."), [2]);
                            case 1:
                                return (i = e.sent(), i.some(function(e) {
                                    return "visible" === e.visibilityState && !e.url.startsWith("chrome-extension://")
                                })) ? [2, function(e, t) {
                                    var n, r;
                                    t.isFirebaseMessaging = !0, t.messageType = _e.PUSH_RECEIVED;
                                    try {
                                        for (var i = c(e), o = i.next(); !o.done; o = i.next()) {
                                            o.value.postMessage(t)
                                        }
                                    } catch (e) {
                                        n = {
                                            error: e
                                        }
                                    } finally {
                                        try {
                                            o && !o.done && (r = i.return) && r.call(i)
                                        } finally {
                                            if (n) throw n.error
                                        }
                                    }
                                }(i, s)] : (o = !1, s.notification ? [4, function(e) {
                                    var t = e.actions,
                                        n = Notification.maxActions;
                                    t && n && t.length > n && console.warn("This browser only supports " + n + " actions. The remaining actions will not be displayed.");
                                    return self.registration.showNotification(null !== (n = e.title) && void 0 !== n ? n : "", e)
                                }(((r = p({}, (t = s).notification)).data = ((n = {})[Me] = t, n), r))] : [3, 3]);
                            case 2:
                                e.sent(), o = !0, e.label = 3;
                            case 3:
                                return !0 === o && !1 === this.isOnBackgroundMessageUsed ? [2] : (this.bgMessageHandler && (s = Qe(s), "function" == typeof this.bgMessageHandler ? this.bgMessageHandler(s) : this.bgMessageHandler.next(s)), [4, et(1e3)]);
                            case 4:
                                return e.sent(), [2]
                        }
                        var t, n, r
                    })
                })

在此功能上，第一个通知将进入情况1（带有默认通知），第二个通知将进入情况4（

我不知道如何将通知设置为仅显示第二个通知。

Answer 1

如果不是纯数据通知，则默认显示通知。您对 showNotification 的调用再次显示了它。最简单的方法是删除您的 onBackgroundMessage 处理程序并在通知内发送图标文件名（在 webpush.notification.icon 属性中）。如果您需要帮助，请添加更多信息。

Answer 2

这对我有用

firebase.messaging().onBackgroundMessage(function(payload) {
  // console.log('[firebase-messaging-sw.js] Received background message ', payload1);
  // Customize notification here
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: 'noti_icon.png'
  };

  return self.registration.showNotification(notificationTitle, notificationOptions);
});

Answer 3

const notificationOptions = {
    body: payload.notification.body,
    icon: 'noti_icon.png',
    type: json
  };

您尝试过吗？

Firebase Clound消息传递Web重复通知

3 个答案: