如果你的通知一直不显示
依次检查
网页必须是在 https 协议下
iframe中, 如果是跨域了, Notification 好像是不能工作的, 估计要使用 postMessage 让外层请求通知权限/弹出通知, 才好解决
iframe 同域同源的时候, 其实是能正常弹出通知的
申请通知权限的之前, 用户必须跟网页产生过交互, 比如用户触发过 click 事件(谷歌chrome避免网站作恶,这是费尽心机了)
windows或者mac, 必须打开了chrome/firefox浏览器的通知开关, 允许通知, 系统才能让浏览器通知啊
Windows 不在专注模式下(有点像是手机的静音模式/防骚扰模式), 关闭专注模式, 通知才会弹出来
Notification弹出通知的api,是不是调用的次数太多, 也可能导致无法弹出通知对话框
快速测试通知功能
Notification.requestPermission()
notification = new Notification("Hi there!");
https://developer.mozilla.org/en-US/docs/Web/API/Notification/permission_static
Notification.permission === 'granted' // 用户允许通知
Notification.permission === 'denied' // 用户禁止通知
windows 的通知开关
可在开始菜单, 搜索 通知 找到
Windows 的专注助手
可在开始菜单, 搜索 专注 找到
chrome 地址栏左侧 http 的前面, 点开, 能看到是否允许通知的开关,
此外chrome设置中, 搜索通知, 也能找到每个域名对通知的管理
如何实现, 在用户与网页交互之后, 再申请权限?
function click (){
// chrome只允许在用户交互的时候,才能请求通知权限, 那就监听点击, mousemove鼠标移动试过还是报错
// [Violation] Only request notification permission in response to a user gesture
Notification.requestPermission(function (status) {
_MsgPush.status = status;
_MsgPush.msg = [];
// 用户不同意
if (status != "granted") return;
_MsgPush.push = showNotify;
});
// 只触发一次就行, 然后删除事件监听
document.body.removeEventListener('click', click, true)
}
document.body.addEventListener('click', click, true)
https://www.cnblogs.com/joshua317/p/15177663.html
https://pushpad.xyz/blog/web-push-notifications-from-iframe
https://ave-maria.gitee.io/banomo/h5_Notifications_remove_1.html