[英]Firebase push notifications click does not work
I am having problems to implement notifications using firebase.我在使用 firebase 实现通知时遇到问题。 The click event does not work.
单击事件不起作用。 I am using the HTTP 1 version sending the bearer token.
我正在使用 HTTP 1 版本发送不记名令牌。
{
"message": {
"token": "8888****usertoken****8888",
"notification": {
"title": "Background Message Title",
"body": "Background message body"
},
"webpush": {
"fcm_options": {
"link": "https://dummypage.com"
}
}
}
}
I have also tried click_action, action, and many other variations that just did not work.我还尝试了 click_action、action 和许多其他不起作用的变体。
I am using version 8.0.0我使用的是 8.0.0 版
According to the documentation found on this link https://firebase.google.com/docs/cloud-messaging/js/send-multiple , I should be able to implement it using fcm_options.根据此链接https://firebase.google.com/docs/cloud-messaging/js/send-multiple上的文档,我应该能够使用 fcm_options 来实现它。
I tried a workaround implementing messaging.onBackgroundMessage, but when I implement this method and use self.registration.showNotification, the notification is displayed twice.我尝试了一种实现messages.onBackgroundMessage 的解决方法,但是当我实现这个方法并使用self.registration.showNotification 时,通知会显示两次。 one triggered by the browse and the other by this code.
一个由浏览触发,另一个由此代码触发。
Registering self.addEventListener('notificationclick' only seems to work when I implement onBackgroundMessage.注册 self.addEventListener('notificationclick' 似乎只有在我实现 onBackgroundMessage 时才有效。
I followed the documentation, but it is driving me crazy.我遵循了文档,但它让我发疯。
This is my service worker code:这是我的服务工作者代码:
importScripts('https://www.gstatic.com/firebasejs/8.0.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.0.0/firebase-messaging.js');
var firebaseConfig = {
apiKey: "xxxxxx",
authDomain: "xxxxxxxx.firebaseapp.com",
databaseURL: "https://xxxxxx.firebaseio.com",
projectId: "xxx-xxx",
storageBucket: "xxx-xxx.appspot.com",
messagingSenderId: "222222222",
appId: "1:2222:web:22222"
};
console.log("fire base messaging")
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
messaging.onBackgroundMessage(function (payload) {
console.log("onBackgroundMessage", payload)
var dataFromServer = payload.notification;
var notificationTitle = dataFromServer.title;
var notificationOptions = {
body: dataFromServer.body,
image: dataFromServer.image,
data: {
url: "https://google.com"
}
};
return self.registration.showNotification(notificationTitle,
notificationOptions);
});
////Code for adding event on click of notification
self.addEventListener('notificationclick', function (event) {
console.log("notificationclick", event)
var urlToRedirect = event.notification.data.url;
event.notification.close();
event.waitUntil(self.clients.openWindow(urlToRedirect));
});
Turns out I was passing an entire URL to webpush.fcm_options.link = "https://google.com", all I had to do was to pass only the relative path like webpush.fcm_options.link = "/mypage".结果我将整个 URL 传递给 webpush.fcm_options.link = "https://google.com",我所要做的就是只传递像 webpush.fcm_options.link = "/mypage" 这样的相对路径。
So the request to send would be like this:所以发送请求是这样的:
{
"message": {
"token": "8888****usertoken****8888",
"notification": {
"title": "Background Message Title",
"body": "Background message body"
},
"webpush": {
"fcm_options": {
"link": "/mypage"
}
}
}
}
I don't see in the docs say it is only the relative path.我在文档中没有看到说它只是相对路径。 It even states that HTTPS is required.
它甚至声明需要 HTTPS。 I spent a few hours on this one, I hope it helps somebody else.
我花了几个小时在这个上,我希望它可以帮助别人。
https://firebase.google.com/docs/reference/fcm/rest/v1/projects.messages#WebpushFcmOptions https://firebase.google.com/docs/reference/fcm/rest/v1/projects.messages#WebpushFcmOptions
I was having the same issue.我遇到了同样的问题。 I added a
notificationclick
event handler.我添加了一个
notificationclick
事件处理程序。 You can use the data
param in the notification event to open a new tab or focus an already opened one.您可以使用通知事件中的
data
参数打开一个新选项卡或聚焦已打开的选项卡。
The code you already have is fine, now adding the listener looks like this:您已经拥有的代码很好,现在添加侦听器如下所示:
// messaging.onBackgroundMessage(...);
function handleClick (event) {
event.notification.close();
// Open the url you set on notification.data
clients.openWindow(event.notification.data.url)
}
self.addEventListener('notificationclick', handleClick);
This resources might be helpful这些资源可能会有所帮助
Notifications are working using legacy API but unfortunately clicking the notification still does nothing.通知正在使用旧 API工作,但不幸的是,单击通知仍然没有任何作用。 This is my code for sending the notification.
这是我发送通知的代码。
var notification = {
'title': title,
'body': body,
'icon': 'hourglass.png',
'click_action': router.resolve(route).href
}
var payload = {
'notification': notification,
// 'webpush': {
// 'fcm_options': {
// 'link': '/' + router.resolve(route).href
// }
// }
}
if(registrationIds.length == 1) {
payload['to'] = registrationIds[0]
} else if( registrationIds.length > 1){
payload['registration_ids'] = registrationIds
}
return new Promise((resolve, reject) => {
if (registrationIds.length) {
fetch('https://fcm.googleapis.com/fcm/send', {
'method': 'POST',
'headers': {
'Authorization': 'key=' + key,
'Content-Type': 'application/json'
},
'body': JSON.stringify(payload)
}).then(function(response) {
resolve(true)
}).catch(function(error) {
console.error('sendNotification error', error);
reject(false)
})
}
else {
console.log('This timer has no registered clients.')
reject(false)
}
})
Edit: I think most of my confusion stemmed from finding examples with the V1 API and mixing them up with the legacy API.编辑:我认为我的大部分困惑源于使用 V1 API 查找示例并将它们与遗留 API 混合在一起。 I needed
click_action
instead of the fcm_options.link
in the payload.我需要
click_action
而不是负载中的fcm_options.link
。 I updated my code and is now working as intended.我更新了我的代码,现在按预期工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.