没有错误时未收到基于Web的通知

时间:2018-03-04 16:30:02

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

我正在使用我希望集成Firebase Notifications的网络应用,但在我设置了所有要求之后,我尝试使用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>

火力的消息-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通知编辑器的状态

enter image description here

备注:

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

2 个答案:

答案 0 :(得分:2)

我遇到了同样的问题,然后我发现前景中使用的firebase im版本与sw中的版本不同,因此我更改为前景中使用的相同版本,问题得以解决。希望有帮助

答案 1 :(得分:1)

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

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

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"
           }

希望这有帮助