Notification 浏览器桌面通知API使用理解及心得

Notification 浏览器桌面通知API使用理解及心得

之前的项目中用到notification的桌面通知api，这里写一下自己的使用理解，虽然不是很麻烦，这里记录一下以防下次再去找。

notification是通过向浏览器授权，向桌面推送通知的api，因为类似于一些重要消息，可能会被用户忽略，发起桌面通知更为明显，在这种业务场景下，我们就可以使用notification

Notification介绍

首先再发起Notification前首先就是要先向用户授权,授权方法是Notification.permission

  Notification.requestPermission(function (permission) {
    //当用户选择了拒绝或同意的时候执行回调
      if (permission === "granted") { //判断是否授权成功
        var notification = new Notification("ha ha");
      }
    });

授权的状态分为四种：

• granted : 用户允许了通知
• denied ： 用户拒绝了通知 （这种情况下不应该再弹出来，不过也可以变态一点每次都弹出来让他授权）
• default: 用户还没有选择过

需要注意的是：这个授权必须再用户点击过该网页或者操作过该网页的时候，所以一般情况下可以写个监听事件只要点击过这个网页就发起授权

经过允许之后就可以发起创建Notification实例发送通知了，

let notification = new Notification(title, options) //title就是通知的标题，options是通知的内容设置

options中的有很多选项，这里我只写下一些常用的，其他的如果有需求可以直接看文档

• body:通知的主体内容
• tag: 相当于通知的id，如果你不写，每条通知都是独立了，如果有需要重复覆盖的通知，只要使用相同的tag就行了
• icon： 显示时通知的图片
• requireInteraction： boolean类型控制是否不自动关闭，只有主动关闭或点击的时候才会关闭，true时不自动关闭
• url：显示网站的地址

最后notification还有提供了一些事件

• Notification.onclick

  处理 click 事件的处理。每当用户点击通知时被触发。

• Notification.onshow

  处理 show 事件的处理。当通知显示的时候被触发。

• Notification.onerror

  处理 error 事件的处理。每当通知遇到错误时被触发。

• Notification.onclose

  处理 close 事件的处理。当用户关闭通知时被触发。

这些事件非常有用，可以用来触发用户点击时跳转到某个功能模块，还有在方法内没有办法使用外部的this

下面是一个官方的使用实例的：

function notifyMe() {
  // 先检查浏览器是否支持
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }

  // 检查用户是否同意接受通知
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
     var notification = new Notification(('你好',{
                                    icon:'http://xxxxx/haha.jpg',
                                    tag:'info',
                                    body:'你有xxx条新消息',
                                    url:'http://www.xxx.com',
                                    requireInteraction:true
                                }));
  }

  // 否则我们需要向用户获取权限
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {
      // 如果用户同意，就可以向他们发送通知
      if (permission === "granted") {
        var notification = new Notification(('你好',{
                                    icon:'http://xxxxx/haha.jpg',
                                    tag:'info',
                                    body:'你有xxx条新消息',
                                    url:'http://www.xxx.com',
                                    requireInteraction:true
                                }));
      }
    });
  }
}

---

不过notification这种功能并不能做到离线通知，而现在很多的网站都做到了离线通知的情况，可以不打开网页就直接进行通知，这样的功能更为实用，也可以更多的应用场景 ，要实现这样的功能要用到Service worker，PushManager 这两个技术，这个在之后我会分享下