问题描述
所以我需要在我们的网络应用程序中实现网络推送通知，我已经在文档的帮助下成功地在我的应用程序中设置了 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();
这篇关于在 localhost 上未收到 Web 的 FCM 推送通知的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！