[英]Firebase push notifications click does not work
我在使用 firebase 实现通知时遇到问题。 单击事件不起作用。 我正在使用 HTTP 1 版本发送不记名令牌。
{
"message": {
"token": "8888****usertoken****8888",
"notification": {
"title": "Background Message Title",
"body": "Background message body"
},
"webpush": {
"fcm_options": {
"link": "https://dummypage.com"
}
}
}
}
我还尝试了 click_action、action 和许多其他不起作用的变体。
我使用的是 8.0.0 版
根据此链接https://firebase.google.com/docs/cloud-messaging/js/send-multiple上的文档,我应该能够使用 fcm_options 来实现它。
我尝试了一种实现messages.onBackgroundMessage 的解决方法,但是当我实现这个方法并使用self.registration.showNotification 时,通知会显示两次。 一个由浏览触发,另一个由此代码触发。
注册 self.addEventListener('notificationclick' 似乎只有在我实现 onBackgroundMessage 时才有效。
我遵循了文档,但它让我发疯。
这是我的服务工作者代码:
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));
});
结果我将整个 URL 传递给 webpush.fcm_options.link = "https://google.com",我所要做的就是只传递像 webpush.fcm_options.link = "/mypage" 这样的相对路径。
所以发送请求是这样的:
{
"message": {
"token": "8888****usertoken****8888",
"notification": {
"title": "Background Message Title",
"body": "Background message body"
},
"webpush": {
"fcm_options": {
"link": "/mypage"
}
}
}
}
我在文档中没有看到说它只是相对路径。 它甚至声明需要 HTTPS。 我花了几个小时在这个上,我希望它可以帮助别人。
https://firebase.google.com/docs/reference/fcm/rest/v1/projects.messages#WebpushFcmOptions
我遇到了同样的问题。 我添加了一个notificationclick
事件处理程序。 您可以使用通知事件中的data
参数打开一个新选项卡或聚焦已打开的选项卡。
您已经拥有的代码很好,现在添加侦听器如下所示:
// 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);
这些资源可能会有所帮助
通知正在使用旧 API工作,但不幸的是,单击通知仍然没有任何作用。 这是我发送通知的代码。
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)
}
})
编辑:我认为我的大部分困惑源于使用 V1 API 查找示例并将它们与遗留 API 混合在一起。 我需要click_action
而不是负载中的fcm_options.link
。 我更新了我的代码,现在按预期工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.