HTML5 桌面通知：Notification API

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

推送是启动和运行 Javascript 桌面通知的最快方式。HTML5新增了Notification, 用于向用户配置和显示桌面通知

Notification生成的通知是脱离浏览器的，即使用户没有停留在当前标签页，甚至最小化了浏览器，也会在主屏幕的右上角显示通知，然后在一段时间后消失。我们可以监听通知的显示，点击，关闭等事件

如果使用Service Worker实现了离线功能的时候，页面即使关闭了，notification依旧可以正常运作

如果没有实现Service Worker, 那么只有在用户开启了存在执行notification逻辑的页面（无论是激活状态，挂起状态还是最小化）notification都可以正常进行推送，但此时如果当前页面处于关闭状态，是无法进行信息推送的，因为此时推送逻辑根本无法执行

传统的通知实现

在以前，我们的通知实现主要是通过闪烁页面的标题内容来实现，实现原理其实很简单，就是定时器不断修改document.title的值。

var titleInit = document.title, isShine = true;

setInterval(function() {
    var title = document.title;
    if (isShine == true) {
        if (/新/.test(title) == false) {
            document.title = '【你有新消息】';    
        } else {
            document.title = '【　　　　　】';
        }
    } else {
        document.title = titleInit;
    }
}, 500);

// 浏览器窗体获得焦点
window.onfocus = function() {
    isShine = false;
};

// 浏览器窗体失去焦点
window.onblur = function() {
    isShine = true;
};

这种提示有个致命的缺陷，就是用户的浏览器要一直是开的。如果用户浏览器最小化，标题就看不见，自然就无法及时get到有新消息的信息

基本使用

// Notification是一个类
let notification = new Notification(title, options)

/*
   1. 参数一: 通知标题
   2. 参数二: 参数的配置对象
*/
const notification = new Notification(message, {
  icon: 'https://www.example.com/5bc7e68a-ef80-4d12-9453-b001165db6cb',
  body: '通知的主体部分'
})

// 获取推送的信息 --- 这些信息都是只读的
console.log(notification.title)
console.log(notification.title)
console.log(notification.icon)

事件

click: 用户点击通知时被触发
show: 通知显示的时候被触发
error: 通知遇到错误时被触发
close: 用户关闭通知时被触发

更多的配置和回调事件可以在MDN上进行查看

示例

export function createDesktopNotification(title) {
  // 浏览器是否支持Notification
  if ('Notification' in window) {
    /*
    	Notification.permission 用于表明当前通知显示的授权状态,它有三个值：
       + default: 默认值，用户还未选择或未做任何选择就关闭了询问框
       + granted: 用户允许该网站发送通知
       + denied: 用户拒绝该网站发送通知
    */
    
    // 用户同意接收推送 --- 不必立即发送通知，可以在任意时刻，以任意形式来发送通知
    if (Notification.permission === 'granted') {
      createNewNotification(title)
    } else if (Notification.permission !== 'denied') {
      // 询问用户是否同意接收推送 --- Notification.permission的值为default的时候
      const res = Notification.requestPermission().then(res => {
        if (res === 'granted') {
          createNewNotification(title)
        } else {
          console.log(res) //eslint-disable-line no-console
        }
      })
    }
  } else {
    // eslint-disable-next-line no-console
    console.log('This browser does not support desktop notification') 
  }
}

function createNewNotification(title) {
  const options = {
    body: '推送的body部分内容',
    icon: 'https://www.example.com/5bc7e68a-ef80-4d12-9453-b001165db6cb'
  }

  const newNoti = new Notification(title || 'default title', options)

  // 默认将焦点移到与该通知相关联的窗口 --> 也就是将当前页(代码执行页面)变成浏览器的激活页面
  newNoti.onclick = () => window.focus()

  // 4s后，自动关闭推送通知框
  setTimeout(() => {
    newNoti.close()
  }, 4000)
}

push.js

notification是HTML5提供的API，在不同的浏览器上支持情况并不一样

所以对于老版本的浏览器，可能是不支持notification的

为此，社区提供了一个简单易懂的第三方库 push.js

具体的相关配置，可以查看官网

# 安装
$ npm install push.js

// 使用默认配置
Push.create('Hello World!')

// 自定义配置
Push.create("Hello world!", {
  body: "body content",
  icon: '/icon.png',
  timeout: 4000,
  
  onClick: function () {
    window.focus()
    this.close()
   }
})