javascript - PWA 推送通知。消息仅出现在控制台中。

Question

我终于接近终点线了。我可以通过 Firebase 发送和接收推送通知。但消息仅在控制台日志中可见(应该是很好的通知对话框)。

控制台日志中的消息:

onMessage:  
{data: {…}, from: "493.......061", collapse_key: "do_not_collapse"}
collapse_key
:
"do_not_collapse"
data
:
{title: "My title", body: "Message Body here", status: "Message Body here"}
from
:
"493........061"
__proto__
:
Object

我有两个带有代码的文件:

sw.js
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js');
  });
}

 var config = {
    apiKey: "AIzaSyB8H.....................Lxdrz480",
    authDomain: "project-name.firebaseapp.com",
    databaseURL: "https://project-name.firebaseio.com",
    projectId: "project-name",
    storageBucket: "project-name.appspot.com",
    messagingSenderId: "49.........1061"
  };
  firebase.initializeApp(config);


  const messaging = firebase.messaging();

  messaging.requestPermission()
  .then(function() {
      console.log('Have permission');
      return messaging.getToken();
  })
  .then(function(token)
  {console.log(token); }
  )
.catch(function(err){
    console.log('Error Ocurred');
})


messaging.onMessage(
function(payload) {console.log('onMessage: ', payload);}

)

和

firebase-messaging-sw.js

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

 var config = {
    apiKey: "...................",
    authDomain: "project-name.firebaseapp.com",
    databaseURL: "https://project-name.firebaseio.com",
    projectId: "project-name",
    storageBucket: "project-name.appspot.com",
    messagingSenderId: "493..........1"
  };
  firebase.initializeApp(config);


  const messaging = firebase.messaging();

  messaging.setBackgroundMessageHandler(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  var notificationTitle = 'Background Message Title';
  var notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };

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

对我来说，文件 firebase-messaging.js 永远不会触发。

Answer 1

请务必检查通知负载。它必须采用以下格式:

{
   notification: 
   {
       title: 'Notifications are cool',
       body: 'Know how to send notifications',
       icon: 'https://www.shareicon.net/data/256x256.png',
       vibrate: [100, 50, 100],
       data: 
       {
          url: 'https://images.com/image001.png' 
       }
   }
}

例如，如果您只是发送:

{
   title: 'Notifications are cool',
   body: 'Know how to send notifications'
}

通知将显示在控制台中，但不是推送通知。