时间戳

首页 > 解决方案 > 使用 firebase 消息传递，控制台日志显示已收到有效负载，但未显示 chrome 通知弹出

firebase - 使用 firebase 消息传递，控制台日志显示已收到有效负载，但未显示 chrome 通知弹出

问题描述

我已经按照文档设置了 firebase.messaging().onMessage() 和 firebase-messaging-sw.js。

在index文件中，

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: 'XX',
  authDomain: 'XX',
  projectId: 'XX',
  storageBucket: 'XX',
  messagingSenderId: 'XX',
  appId: '1:XX:XX',
  measurementId: 'G-XXX',
};

firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();

messaging
  .requestPermission()
  .then(function () {
    console.log('have permission');
    return messaging.getToken();
  })
  .then(function (token) {
    console.log('have permission', token);
  })
  .catch(function (err) {
    console.log('no permission', err);
  });

messaging.onMessage((payload) => {
  console.log('Message received. ', payload);
  // Update the UI to include the received message.
    navigator.serviceWorker.getRegistration('/firebase-cloud-messaging-push-scope').then(registration => {
        registration.showNotification(
            payload.notification.title,
            payload.notification
        )
    });
});

在 firebase-messaging-sw.js文件中：

importScripts('https://www.gstatic.com/firebasejs/8.5.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.5.0/firebase-messaging.js');

const firebaseConfig = {
  apiKey: 'xx-xx',
  authDomain: 'xx-xx.firebaseapp.com',
  projectId: 'xx-assistant',
  storageBucket: 'xx-xx.appspot.com',
  messagingSenderId: 'xx',
  appId: '1:xx:xxx',
  measurementId: 'G-xx',
};

firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(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: payload.notification.icon,
    image: payload.notification.image,
    click_action: payload.notification.click_action,
  };

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

当我从 firebase 控制台发送有效负载时，我会在前端和 console.log 输出中获得响应-

data: {notification: "{\"icon\":\"app.xxx.com\\/images\\/logo\",\"title\":\"New notification\",\"body\":\"Tthis is body\"}"}
from: "xxxxx"

但我没有看到 chrome 生成的通知弹出窗口。据我了解，如果 firebase.messaging().onMessage() 或 onBackgroundMessage 被触发，它应该只显示出来，但事实并非如此。

我错过了什么？

标签： firebasefirebase-cloud-messaging

解决方案

当您在前台收到通知时，您需要实现通知弹出。它不会自动显示。

这是来自答案的代码片段，显示了如何执行此操作：

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
        )
    });
});

推荐阅读