我正在尝试在页面加载时使用jQuery本地显示通知。通知在Firefox、Firefox Developer和Chrome中正确显示。通知未显示在Safari中,尽管通知首选项设置允许。
类似的代码在MDN站点https://developer.mozilla.org/en/docs/Web/API/notification上运行。
鼻涕虫在下面。
// Display a sample notification
if (window.Notification) {
return $(".au-notifications-page").show(function() {
var notification;
notification = new Notification(
'Success Text', {
//tag: $("[name=tag]").val(),
body: 'Success Message',
iconUrl: 'img/avatar-male.png',
icon: 'img/avatar-male.png'
});
return notification.onclick = function() {
notification.close();
window.open().close();
return window.focus();
};
});
};
完整代码在下面。
$(document).ready(function () {
// Request permission on site load
Notification.requestPermission().then(function(result) {
if (result === 'denied') {
//alert('denied');
$(".au-notif-disabled-header").removeClass('hide');
$(".au-notif-disabled-header .btn").addClass('hide');
return;
}
if (result === 'default') {
//alert('ignored');
$(".au-notif-disabled-header").removeClass('hide');
return;
}
//alert('granted');
$(".au-notif-disabled-header").addClass('hide');
});
// Request permission with button
$('.au-notif-disabled-header .btn').click(function () {
Notification.requestPermission().then(function(result) {
if (result === 'denied') {
$(".au-notif-disabled-header").removeClass('hide');
$(".au-notif-disabled-header .btn").addClass('hide');
return;
}
if (result === 'default') {
$(".au-notif-disabled-header").removeClass('hide');
return;
}
$(".au-notif-disabled-header").addClass('hide');
});
});
$( ".au-notification-icon" ).hover(
function() {
$(".au-notifications-menu .au-notif-msg-realtime").slideDown();
$('.au-notification-icon .badge').html("2");
}, function() {
$(".au-notifications-menu .au-notif-msg-realtime").slideUp();
$('.au-notification-icon .badge').html("1");
}
);
//To show notification received while on notifications page
$(".au-notif-msg-realtime").hide();
//$(".au-notifications-page .au-notif-msg-realtime").slideDown();
$(".au-notifications-page .au-notif-msg-realtime").slideDown({
complete: function(){
$('.au-notification-icon .badge').html("2");
$('head title').html("(2) Notifications");
}
});
// Display a sample notification
if (window.Notification) {
return $(".au-notifications-page").show(function() {
var notification;
notification = new Notification(
'Success Heading', {
body: 'Success Text',
iconUrl: 'img/avatar-male.png',
icon: 'img/avatar-male.png'
});
return notification.onclick = function() {
notification.close();
window.open().close();
return window.focus();
};
});
};
});
编辑1:Safari抛出此异常
undefined不是一个对象(正在计算“Notification.requestPermission(). then”)
5条答案
按热度按时间w8ntj3qf1#
你必须使用Safari的回调函数,因为它不返回Promise。
根据MDN:
这使用了promise-version的方法,就像最近的实现(例如Firefox 47)所支持的那样。如果你想支持旧版本,你可能必须使用旧的回调版本,它看起来像这样:
下面是他们给出的示例代码:
为了支持Safari通知,这是我最终的结果:
iklwldmw2#
更好的解决方案是将结果 Package 在
Promise
中,然后 then(没有双关语)运行代码。此代码适用于所有浏览器(包括Safari),并且没有复杂的if
块(概念在this question中详细讨论)这是因为
Promise.resolve
对Promise
没有任何作用,但会将SafarirequestPermission()
转换为Promise
。请注意,iOS Safari仍然不支持通知API,因此您需要check if it is available first
m0rkklqb3#
要返回一个promise,该promise在用户赠款或拒绝显示通知的权限之前不会解析:
wn9m85ua4#
过时问题的现代解决方案:
Safari只接受第一个回调,忽略
?.then(...)
。Chrome和FF可能会两次解决promise,但这并不重要。与大多数投票的答案不同,这个答案没有两次请求权限,这在我的Safari v13.1.2中打开了2个权限弹出窗口。
v1uwarro5#