Javascript firefox broswer中未显示消息的Web推送通知
我正在为web浏览器实现推送通知。Chrome/Firefox浏览器显示权限弹出窗口,并在两种浏览器中允许其返回令牌id。当我发送推送通知时,它只显示在Chrome浏览器中,而不是Firefox浏览器中。我的代码是:Javascript firefox broswer中未显示消息的Web推送通知,javascript,google-chrome,firefox,push-notification,Javascript,Google Chrome,Firefox,Push Notification,我正在为web浏览器实现推送通知。Chrome/Firefox浏览器显示权限弹出窗口,并在两种浏览器中允许其返回令牌id。当我发送推送通知时,它只显示在Chrome浏览器中,而不是Firefox浏览器中。我的代码是: window.addEventListener('load', function() { if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-wo
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('/');
}
})
);
});
及
为什么它不适用于Firefox浏览器。
谢谢:)尝试发送浏览器提供的端点URL,如果Firefox端点URL不同,则不会。当您获得subscription对象时,您也将获得端点,这在不同的浏览器中是不同的
我刚刚检查过,Firefox端点是:尝试发送浏览器给出的端点URL,如果Firefox端点URL不同,则不会。当您获得subscription对象时,您也将获得端点,这在不同的浏览器中是不同的
我刚刚检查过,Firefox端点是:您将请求发送到,但您需要将请求发送到
PushSubscription.endpoint
,这是有效的URL。您还可以使用推送消息传递数据,以避免服务人员发出额外的请求。@DmitryMananikov ok我检查了endpoint,但我想使用CURL同时向多个用户发送消息,就像chrome允许我们向推送提供商发送多个用户一个用户一个端点一个请求一样。您向,但是您需要向PushSubscription.endpoint
发送一个请求,该请求是有效的URL。您还可以使用推送消息传递数据,以避免服务人员发出额外的请求。@Dmitrymannikov ok我检查了端点,但我想使用CURL一次向多个用户发送消息,就像chrome允许我们向推送提供商发送多个用户一个用户一个端点一个请求一样。
$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\"]}"