9

因此,我需要在我们的Web应用中实现Web推送通知,我已经使用文档成功地在我的应用中设置了Firebase云消息传递,我可以询问用户允许通知的权限,并且如果他接受权限,也可以获得令牌ID。未在本地主机上接收FCM推送通知

事情是当我尝试发送通知来测试生成的令牌时,我收到消息发送的响应,但我无法在客户端接收到它。

我的index.html

<head> 
    <script src="https://www.gstatic.com/firebasejs/4.4.0/firebase.js"></script> 
    <link rel="manifest" href="./firebase.json"> 
</head> 
<script> 
    if ('serviceWorker' in navigator) { 
    navigator.serviceWorker.register('./firebase-messaging-sw.js').then(function(registration) { 
     console.log('Firebase Worker Registered'); 

    }).catch(function(err) { 
     console.log('Service Worker registration failed: ', err); 
    }); 
    } 
    </script> 

我能够成功地注册服务工作者文件

我App.component.ts

var config = { 
      apiKey: "somekey", 
      authDomain: "someproject-2.firebaseapp.com", 
      databaseURL: "https://someproject-2.firebaseio.com", 
      projectId: "someproject-2", 
      storageBucket: "", 
      messagingSenderId: "someid" 
      }; 
      firebase.initializeApp(config); 



     const messaging = firebase.messaging(); 

     messaging.requestPermission() 
     .then(function() { 
      console.log('Notification permission granted.'); 
      return messaging.getToken() 
     }) 
     .then(function(result) { 
      console.log("The token is: ", result); 
     }) 
     .catch(function(err) { 
      console.log('Unable to get permission to notify.', err); 
     }); 

     messaging.onMessage(function(payload) { 
     console.log("Message received. ", payload); 
     }); 

我得到许可对话框方框询问权限并获取带有此代码的令牌

我用来卷曲的代码发送消息

curl -X POST -H "Authorization: key=somekey" -H "Content-Type: application/json" -d '{ 
    "notification": { 
    "title": "Portugal vs. Denmark", 
    "body": "5 to 1", 
    "icon": "firebase-logo.png", 
    "click_action": "http://localhost:8081" 
    }, 
    "to": "sometoken" 
}' "https://fcm.googleapis.com/fcm/send" 

我能够成功地发送通知,此代码

我想不通我要去哪里错了,也许是因为它是在本地主机上?也许onMessage方法运行不正常?任何帮助,高度赞赏!

+0

服务工作人员不适用于不安全的来源。所以你的本地主机必须在https上。 –

+0

您是否发现问题?我也有完全一样的问题。 – chrisonline

+0

没有兄弟,会让你知道,如果我找到 –

回答

0

好吧,我没有得到任何答案,这个计算器上,所以我必须做我自己,并得到它的工作!

问题出在服务工作者文件中,我显然没有定义消息传递变量。

如果有人面临此问题,请确保您的服务工作人员文件看起来像这样。

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

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

const messaging = firebase.messaging(); 
0

由于在FCM的网站上声明:

的FCM SDK仅支持在页面上投放了HTTPS。这是由于它使用服务工作人员,这些人员只能在HTTPS网站上使用。

https://firebase.google.com/docs/cloud-messaging/js/client

+1

我不这么认为,因为我将这些更改部署到我们的暂存网站,而不是https,并且在那里我无法注册我的服务工作人员本身得到一个错误该网站不是https: 但是,在本地,我可以注册服务工作者并获得令牌,这表明它可以在本地主机上运行,​​并且我记得firebase教程中的那个人自己正在使用他的http localhost –

+1

是的你是对的,因为'本地主机'是白色在铬上市,我的错误我同意@ManzurKhanSarguroh –

+0

我很感激你花时间回答兄弟 –

0

我也有类似的问题,我去了云上的火力点信息和得到了我的服务器密钥,并补充说,为卷曲请求。

curl --header "Authorization: key=CloudMessagingServerKey" --header "Content-Type: application/json" -d '{ 
    "notification": { 
     "title": "FCM Message", 
     "body": "This is an FCM Message", 
     }, 
    "to": "token from messaging.getToken()" 
    }' "https://fcm.googleapis.com/fcm/send" 

和我火力点的消息,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({ 
    apiKey: 'yourapikey', 
    authDomain: 'xxxx.firebaseapp.com', 
    databaseURL: 'https://xxxx.firebaseio.com', 
    projectId: 'xxxx', 
    storageBucket: 'xxxx.appspot.com', 
    messagingSenderId: 'your message sender Id', 
}); 

const messaging = firebase.messaging(); 

这奏效了我。我的错误是我使用了错误的serverKey,而且我没有在我的firebase-messaging-sw.js中使用importScripts