js H5 Notification桌面通知方法

Notification方法只能在https协议或者本地http://localhost/使用

Notification.requestPermission()可以来获取用户是否允许通知，接受一个回调函数，回调函数中接受一个参数结果，这个结果就是是否允许通知

Notification.requestPermission((result)=>{
  // result可能的值包括：denied (用户拒绝了通知的显示), granted (用户允许了通知的显示), 或 default (因为不知道用户的选择，所以浏览器的行为与 denied 时相同).
  console.log(result);
});

其中回调函数的参数result可能的值代表的意思

• denied用户拒绝了通知的显示
• granted用户允许了通知的显示
• default因为不知道用户的选择，所以浏览器的行为与 denied 时相同

只要调用上面的方法，浏览器就会显示下面图片的的通知，点击允许，回调接受的参数是granted，点击禁止，回调接受的参数是denied，点击右上角的×，回调接受的参数是default

default.png

new Notification() 来给用户发送通知，其中可以传参数，配置通知的信息
注意，只有当result为granted时，才会执行下方的new Notification代码，denied和default不会执行

new Notification()传递的参数，第一个是标题，第二个是一个json，里面是传递的信息

• dir 文字的方向；它的值可以是 auto（自动）, ltr（从左到右）, 或者 rtl（从右到左）
• body 通知中额外显示的字符串
• icon 一个图片的URL，将被用于显示通知的图标
• tag 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除

Notification.requestPermission((result)=>{
  // 只有当result为granted时，才会执行下方的new Notification代码，denied和default不会执行
  const notification = new Notification("您有一条通知,请查看",{
    dir: "ltr",//dir : 文字的方向；它的值可以是 auto（自动）, ltr（从左到右）, or rtl（从右到左）
    body: `我是通知的信息`,//body: 通知中额外显示的字符串
    icon: "https://himg.bdimg.com/sys/portraitn/item/public.1.4740939e.jB25tZF2t_Ql0YneVjFRRQ"  // 一个图片的URL，将被用于显示通知的图标。
        // tag: 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。
  });
  // 可以添加事件，来触发交互
  notification.onclick=function () {
    console.log("notification")
  }
});

如果用户允许通知，并且已经调用new Notification，就会显示下方的图片信息，浏览器就会通知

notifiction.png