未在本地主机上接收 Web 的 FCM 推送通知 [英] Not receiving FCM Push Notification for web on localhost
问题描述
所以我需要在我们的网络应用程序中实现网络推送通知，我已经在文档的帮助下成功地在我的应用程序中设置了 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>
我可以成功注册 service worker 文件
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
我用来发送消息的 curl 代码
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
我不知道我哪里出错了，也许是因为它在本地主机上?也许 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!
问题出在 service worker 文件中，我显然没有定义消息变量.
The problem was in the service worker file, I have apparently not defined messaging variable.
如果有人遇到这个问题，请确保您的 Service Worker 文件看起来像这样.
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();
这篇关于未在本地主机上接收 Web 的 FCM 推送通知的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
