没有错误时未收到基于 Firebase 的网络通知答案

【问题标题】：Fire-base web notification not received while no errors没有错误时未收到基于 Firebase 的网络通知
【发布时间】：2019-10-12 12:27:18
【问题描述】：

我正在使用网络应用程序，我想在其中集成 Firebase 通知，但在设置完所有要求后，我尝试使用 Firebase 通知编写器对其进行测试，我没有收到任何错误，并且消息状态已完成，但我收到了背景和前景都没有。

这是我的代码

index.html

  <script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
    <script>
      // Initialize Firebase
      var config = {
        apiKey: "MY_API_KEY",
        authDomain: "app.firebaseapp.com",
        databaseURL: "https://app.firebaseio.com",
        projectId: "app",
        storageBucket: "app.appspot.com",
        messagingSenderId: "MY_SENDER_ID"
      };
      firebase.initializeApp(config);

      var messaging = firebase.messaging();
      messaging.usePublicVapidKey("BLWwgk4yFuoNHdPDccuDnXYmhxZA8kwpWArWaE3t7njDT90-30dcWlJIhFbXxMpfXczcvtU8AvMf_F1EJg8Qy");
      messaging.requestPermission().then(function(res) {
        console.log('test')
        messaging.getToken().then(function(res){
          console.log(res)
        })
      })
      messaging.onTokenRefresh(function() {
        messaging.getToken()
        .then(function(refreshedToken) {
          console.log('Token refreshed.');
        })
        .catch(function(err) {
          console.log('Unable to retrieve refreshed token ', err);
        });
      });
      messaging.onMessage(function(payload) {
        console.log("Message received. ", payload);
        // ...
      });
    </script>

firebase-messaging-sw.js

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


firebase.initializeApp({
  'messagingSenderId': 'MY_SENDER_ID'
});

const messaging = firebase.messaging();

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

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

Firebase 通知编写器的状态

注意事项：

浏览器控制台上没有错误。
Firebase 控制台上没有错误。

【问题讨论】：

你找到这个彼得的答案了吗？我也有同样的问题
无法从 consule 发送 webpush 通知。唯一的解决方案是使用 curl，并且不要忘记将 webpush 标签添加到您的请求中。

标签： firebase firebase-cloud-messaging web-push

【解决方案1】：

我遇到了同样的问题，然后我发现我在前台使用的 firebase 版本与 sw 中的版本不同，所以我更改为我在前台使用的相同版本，问题就解决了。希望对您有所帮助

【讨论】：

【解决方案2】：

我遇到了完全相同的问题。问题根本不在我的前端代码中，而是在从 firebase 控制台发送的请求中。我建议您使用 Postman 或您自己的后端发送请求以查看它是否有效。

这是我的邮递员请求的快速演示 -

method: POST

url : https://fcm.googleapis.com/fcm/send

Headers :

 "Content-Type": "application/json", 
 "Authorization": (Your server key which is found in Cloud messaging settings in firebase console) Edit: Make sure to add "key=" before your server key. Example - "Authorization" : "key=AAAA7_.......QRIM"

Body:

  "to" : (Your front end app token),
  "data" : {
            "body" : "Test message",
            "title" : "Test title"
           }

希望对你有帮助

【讨论】：