未在localhost上接收Web上的FCM推送通知 [英] Not receiving FCM Push Notification for web on localhost
问题描述
所以我需要在我们的网络应用程序中实现Web推送通知，我已经在文档的帮助下在我的应用程序中成功设置了firebase云消息，我可以要求用户允许通知权限并获取令牌如果他接受了许可，也可以使用id。
So I need to implement web push notifications in our web app, I have successfully setup the firebase cloud messaging in my app with the help of docs, I'm able to ask the user to allow permission for notifications and get the token id as well if he accepts the permission.
当我尝试发送通知来测试生成的令牌时，我收到的消息是已发送，但我无法在客户端收到。
The thing is when I try to send a notification to test to the generated token, I'm getting a response that the message is sent, but I'm not able to receive it on the client side.
我的index.html
My 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>
我已成功注册服务工作者文件
I'm successfully able to register the service worker file
我的App.component.ts
My 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);
});
我收到权限对话框询问权限并获取带有此代码的令牌
I'm getting the permission dialog box asking permission and getting a token with this code
我用来发送消息的卷曲代码
The curl code I used to send messages
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"
我能用这段代码成功发送通知
I'm able to successfully send notifications with this code
我无法弄清楚我哪里出错了，也许是因为它在localhost上？也许onMessage方法运行不正常？任何帮助都非常感谢！
I can't figure out where I'm going wrong, maybe because it's on localhost? maybe the onMessage method is not running properly? Any help is highly appreciated!
推荐答案
好吧，我没有在stackoverflow上得到任何答案，所以我必须做它本身就可以运行了！
Alright, I didn't get any answers for this on stackoverflow, so I have to do it on my own and got it working!
问题出现在服务工作者文件中，我显然没有定义消息传递变量。
The problem was in the service worker file, I have apparently not defined messaging variable.
如果有人遇到此问题，请确保您的服务工作文件看起来像这样。
If anybody is facing this issue, just make sure your service worker file looks something like this.
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();
这篇关于未在localhost上接收Web上的FCM推送通知的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
