javascript 未在本地主机上接收 Web 的 FCM 推送通知
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46462400/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Not receiving FCM Push Notification for web on localhost
提问by Manzur Khan
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.
所以我需要在我们的网络应用程序中实现网络推送通知，我已经在文档的帮助下成功地在我的应用程序中设置了 firebase 云消息传递，我可以要求用户允许通知权限并获取令牌 ID如果他接受许可。
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.
问题是当我尝试发送通知以测试生成的令牌时，我收到消息已发送的响应，但我无法在客户端接收它。
My index.html
我的 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
我能够成功注册服务工作者文件
My App.component.ts
我的 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 代码
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
我可以使用此代码成功发送通知
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!
我不知道我哪里出错了，也许是因为它在本地主机上？也许 onMessage 方法没有正常运行？任何帮助表示高度赞赏！
采纳答案by Manzur Khan
Alright, I didn't get any answers for this on stackoverflow, so I have to do it on my own and got it working!
好吧，我在stackoverflow上没有得到任何答案，所以我必须自己做并让它工作！
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.
如果有人遇到此问题，请确保您的 Service Worker 文件看起来像这样。
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();
回答by Jolaade Adewale
I had a similar issue and I went to cloud messaging on firebase and got my Server key and added that to the curl request.
我遇到了类似的问题，我在 firebase 上访问了云消息传递并获取了我的服务器密钥并将其添加到 curl 请求中。
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"
and my firebase-messaging-sw.jslooked like the code below
我 的 firebase-messaging-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();
That did the trick for me. My errors were I was using a wrong serverKey and I did not use importScripts in my firebase-messaging-sw.js
那对我有用。我的错误是我使用了错误的 serverKey 并且我没有在 firebase-messaging-sw.js 中使用 importScripts
回答by Touqeer Shafi
As stated on FCM website:
如 FCM 网站所述：
The FCM SDK is supported only in pages served over HTTPS. This is due to its use of service workers, which are available only on HTTPS sites.
FCM SDK 仅在通过 HTTPS 提供服务的页面中受支持。这是因为它使用了仅在 HTTPS 站点上可用的服务工作线程。
See https://firebase.google.com/docs/cloud-messaging/js/client
请参阅https://firebase.google.com/docs/cloud-messaging/js/client
