HTML5新特性之桌面消息提醒Web Notification

首先来看下效果:

在此之前

• 如果是想做个demo尝试一下,是试不出效果的,因为在页面测试中，发现本地文件打开的网页将不会触发弹窗，而是不停地跳出用户授权弹窗。这是因为，chrome在记录弹窗权限时，会绑定到域名上，在使用本地文件打开时，没有对应的域名，没法保存授权信息，所有浏览器会不停地进行授权弹窗。
• 我的解决办法:
  我是用的idea是vscode,去下载插件Live Server,它的用途是代码改变自动刷新页面,通过抓包可以看到,把demo通过open with live server打开,它其实是本地打了一个服务

语法一:用户授权

想要向用户显示通知消息，需要获取用户权限，而相同的域名只需要获取一次权限。只有用户允许的权限下，Notification 才能起到作用，避免某些网站的广告滥用 Notification 或其它给用户造成影响。
Notification.permission 该属性用于表明当前通知显示的授权状态，可能的值包括：

• default ：不知道用户的选择，默认。
• granted ：用户允许。
• denied ：用户拒绝。
  chrome用户授权只有一次，首次后使用时会触发，如果用户拒绝后期将不再弹出权限获取提示。只能去chrome中手动修改通知权限。

Notification.requestPermission().then(function(permission) {
    if(permission === 'granted'){
        console.log('用户允许通知');
    }else if(permission === 'denied'){
        console.log('用户拒绝通知');
    }
});

语法二:构造函数

通过new Notification生成一个消息实例
new Notification(title,options)

• title是消息的标题
• options配置,可选参数

new Notification('震惊!',{
    body: '一男子竟然当街...', // 消息内容
    lang: '', // 指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。
    icon: '', // 消息图标
    tag: '', // 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。
    dir: '', // 文字的方向；它的值可以是auto（自动）,ltr（从左到右),rtl（从右到左）,但是目前发现没什么软用
})