Web 推送通知未在 Firefox 浏览器中显示消息
Posted
技术标签:
【中文标题】Web 推送通知未在 Firefox 浏览器中显示消息【英文标题】:Web Push Notification not showing message in firefox broswer 【发布时间】:2017-05-18 05:52:07 【问题描述】:我正在为网络浏览器实现推送通知。 Chrome/Firefox 浏览器显示权限弹出窗口,并在两个浏览器中允许其返回令牌 ID。当我发送推送通知时,它只显示在 Chrome 中而不是 Firefox 浏览器中。我的代码是:
window.addEventListener('load', function()
if ('serviceWorker' in navigator)
navigator.serviceWorker.register('service-worker.js').then(initialiseState);
else
console.warn('Service workers aren\'t supported in this browser.');
);
function initialiseState()
if (!('showNotification' in ServiceWorkerRegistration.prototype))
console.warn('Notifications aren\'t supported.');
return;
if (Notification.permission === 'denied')
console.warn('The user has blocked notifications.');
return;
if (!('PushManager' in window))
console.warn('Push messaging isn\'t supported.');
return;
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration)
serviceWorkerRegistration.pushManager.getSubscription(
userVisibleOnly: 1
)
.then(function(subscription)
if (!subscription)
return;
)
.catch(function(err)
console.warn('Error during getSubscription()', err);
);
);
function subscribe()
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration)
serviceWorkerRegistration.pushManager.subscribe(
userVisibleOnly: 1
)
.then(function(subscription)
console.log('subscribe', subscription.endpoint);
)
.catch(function(e)
if (Notification.permission === 'denied')
console.warn('Permission for Notifications was denied');
pushButton.disabled = true;
else
console.error('Unable to subscribe to push.', e);
pushButton.disabled = false;
pushButton.textContent = 'Enable Push Messages';
);
);
service-worker.js 文件代码为:
self.addEventListener('push', function(event)
event.waitUntil(
fetch('https://example.com/message')
.then(function(response)
if (response.status !== 200)
console.log('Looks like there was a problem. Status Code: ' + response.status);
throw new Error();
return response.json().then(function(data)
if (data.error || !data.notification)
console.error('The API returned an error.', data.error);
throw new Error();
var title = data.notification.title;
var message = data.notification.message;
var icon = data.notification.icon;
var notificationTag = data.notification.tag;
return self.registration.showNotification(title,
body: message,
icon: icon,
tag: notificationTag
);
);
)
.catch(function(err)
console.error('Unable to retrieve data', err);
var title = 'An error occurred';
var message = 'We were unable to get the information for this push message';
var icon = URL_TO_DEFAULT_ICON;
var notificationTag = 'notification-error';
return self.registration.showNotification(title,
body: message,
icon: icon,
tag: notificationTag
);
)
);
);
self.addEventListener('notificationclick', function(event)
console.log('On notification click: ', event.notification.tag);
event.notification.close();
event.waitUntil(
clients.matchAll(
type: "window"
)
.then(function(clientList)
for (var i = 0; i < clientList.length; i++)
var client = clientList[i];
if (client.url == '/' && 'focus' in client)
return client.focus();
if (clients.openWindow)
return clients.openWindow('/');
)
);
);
使用 CURL 发送消息:
$data = ["registration_ids" => ["token id"]];
$data_string = json_encode($data);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://fcm.googleapis.com/fcm/send');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_VERBOSE, 1);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
$headers = [
'Content-Type: application/json',
'Authorization: key= MY-GOOGLE-KEY'
];
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data_string);
$result = curl_exec($ch);
curl_close ($ch);
$response = json_decode($result);
与
curl --header "Authorization: key=KEY" --header "Content-Type: application/json" https://android.googleapis.com/gcm/send -d "\"registration_ids\":[\"KEY\"]"
为什么它不适用于 Firefox 浏览器。 谢谢:)
【问题讨论】:
您向android.googleapis.com/gcm/send 发送请求,但您需要向PushSubscription.endpoint
发送请求,这是有效的URL。您也可以通过推送消息传递数据,以避免来自服务人员的额外请求。
@DmitryManannikov 好的,我检查了端点,但我想用 CURL 向多个用户发送消息,如何像 chrome 一样允许我们发送多个用户
一个用户 - 一个端点 - 一个推送提供者的请求。
【参考方案1】:
尝试发送浏览器提供的端点 URL,如果 Firefox 端点 URL 不同,则它不是 https://fcm.googleapis.com/fcm/send。当你得到订阅对象时,你也会得到端点,这在不同的浏览器中是不同的。
我刚刚查了一下,Firefox 端点是:https://updates.push.services.mozilla.com/wpush/v2
【讨论】:
以上是关于Web 推送通知未在 Firefox 浏览器中显示消息的主要内容,如果未能解决你的问题,请参考以下文章