未收到 Fire-base 网络通知但没有错误

Pet*_*son 4 firebase web-push firebase-cloud-messaging

我正在使用 Web 应用程序,我想在其中集成 Firebase 通知,但是在设置所有要求后,我尝试使用 Firebase 通知编辑器对其进行测试,但没有出现错误并且消息状态已完成,但我也没有收到任何消息背景也不在前景中。

这是我的代码

索引.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>
Run Code Online (Sandbox Code Playgroud)

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);
});
Run Code Online (Sandbox Code Playgroud)

Firebase 通知编辑器的状态

在此处输入图片说明

笔记:

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

小智 5

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