Firebase 云消息传递：通知图标背景仅在第二次尝试时有效答案

【问题标题】：Firebase Cloud Messaging: Notification Icon Background is only working on second attemptFirebase 云消息传递：通知图标背景仅在第二次尝试时有效
【发布时间】：2020-11-06 06:27:39
【问题描述】：

我正在尝试自定义通知图标的背景，但最终却收到了 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 和一个函数 onPush，您可以在下面看到。

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。

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

【问题讨论】：

您找到解决方案了吗？您能否提供一些见解，说明您是如何解决的？

标签： javascript firebase web firebase-cloud-messaging

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

你试过了吗？

【讨论】：