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

我终于接近终点线了。我可以通过

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.js

似乎从不触发

确保检查通知负载。其格式必须为：

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

---

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

您是否定义了

gcm\u发送者\u id:“103953800507？”“

at

manifest.json

file.Yes。这一行在清单中，事实上，我认为这不是问题所在，但是您初始化了两倍的firebase配置。您可以初始化sw.js和firebase-messaging-sw.js。这不会在您的控制台上出现任何错误吗？首先在sw.js加载，但在第二个firebase-messaging-sw.js文件中加载必要的脚本。没有错误。只有fcm令牌您需要请求权限才能从客户端接收通知。假设也完成了。如果通知没有显示您所显示的有效负载结构，但没有标题，是否可以？当我发送仅标题通知或标题+正文通知时，它们会正常显示。

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