聊聊HTML5中的Web Notification桌面通知

时间 2019-11-07

标签聊聊 html5 html web notification 桌面通知栏目 HTML5 繁體版

原文原文链接

有的时候咱们会在桌面右下角看到这样的提示：javascript

这种桌面提示是HTML5新增的 Web Push Notifications 技术。html

Web Notifications 技术使页面能够发出通知，通知将被显示在页面以外的系统层面上。可以为用户提供更好的体验，即便用户忙于其余工做时也能够收到来自页面的消息通知，例如一个新邮件的提醒，或者一个在线聊天室收到的消息提醒等等。java

PS：除了IE外，各大现代浏览器都对这个桌面推送有了基本的支持。浏览器

开始

要建立一个消息通知，很是简单，直接使用 window 对象下面的Notification类便可，代码以下：安全

var n = new Notification("桌面推送", {
	icon: 'img/icon.png',
	body: '这是个人第一条桌面通知。',
    image:'img/1.jpg'
});
复制代码

因而你就会看到系统桌面弹出我上面那张截图的通知。服务器

PS：消息通知只有经过Web服务访问该页面时才会生效，若是直接双击打开本地文件，是没有任何效果的。也就是说你的文件须要使用服务器的形式打开，而不是直接使用浏览器打开本地文件。函数

固然也有可能你什么都没看到，别着急继续往下看。ui

基本语法

固然在想要弹出上面通知以前，有必要了解一下一个通知的基本语法：spa

let myNotification = new Notification(title, options);
复制代码

title：定义一个通知的标题，当它被触发时，它将显示在通知窗口的顶部。code

options（可选）对象包含应用于通知的任何自定义设置选项。

经常使用的选项有：

body: 通知的正文，将显示在标题下方。
tag: 相似每一个通知的ID，以便在必要的时候对通知进行刷新、替换或移除。
icon: 显示通知的图标
image: 在通知正文中显示的图像的URL。
data: 您想要与通知相关联的任意数据。这能够是任何数据类型。
renotify: 一个 Boolean 指定在新通知替换旧通知后是否应通知用户。默认值为false，这意味着它们不会被通知。
requireInteraction: 表示通知应保持有效，直到用户点击或关闭它，而不是自动关闭。默认值为false。

当这段代码执行时，浏览器会询问用户，是否容许该站点显示消息通知，以下图所示：

只有用户点击了容许，受权了通知，通知才会被显示出来。

受权

如何获取到用户点击的是“容许”仍是“阻止”呢？

window的 Notification实例有一个 requestPermission 函数用来获取用户的受权状态：

// 首先，咱们检查是否具备权限显示通知
  // 若是没有，咱们就申请权限
  if (window.Notification && Notification.permission !== "granted") {
      Notification.requestPermission(function (status) {
      //status是受权状态。
      //若是用户点击的容许，则status为'granted'
      // 若是用户点击的禁止，则status为'denied'
     
      // 这将使咱们能在 Chrome/Safari 中使用 Notification.permission
      if (Notification.permission !== status) {
        Notification.permission = status;
      }
    });
  }
复制代码

注意：若是用户点击了受权右上角的关闭按钮，则status的值为default。

以后，咱们只须要判断 status 的值是否为granted，来决定是否显示通知。

通知事件

可是单纯的显示一个消息框是没有任何吸引力的，因此消息通知应该具备必定的交互性，在显示消息的前先后后都应该有事件的参与。

Notification一开始就制定好了一系列事件函数，开发者能够很方面的使用这些函数处理用户交互：

有：onshow,onclick,onerror,onclose。

var n = new Notification("桌面推送", {
	icon: 'img/icon.png',
	body: '这是个人第一条桌面通知。'
});
 
//onshow函数在消息框显示时触发
//能够作一些数据记录及定时关闭消息框等
n.onshow = function() {
	console.log('显示消息框');
	//5秒后关闭消息框
	setTimeout(function() {
		n.close();
	}, 3000);
};
 
//消息框被点击时被调用
//能够打开相关的视图，同时关闭该消息框等操做
n.onclick = function() {
	console.log('点击消息框');
	// 打开相关的视图
	n.close();
};
 
//当有错误发生时会onerror函数会被调用
//若是没有granted受权，建立Notification对象实例时，也会执行onerror函数
n.onerror = function() {
	console.log('消息框错误');
	// 作些其余的事
};
 
//一个消息框关闭时onclose函数会被调用
n.onclose = function() {
	console.log('关闭消息框');
	//作些其余的事
};
复制代码

一个简单的例子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <button>点击发起通知</button>
  </body>
  <script> window.addEventListener("load", function() { // 首先，让咱们检查咱们是否有权限发出通知 // 若是没有，咱们就请求得到权限 if (window.Notification && Notification.permission !== "granted") { Notification.requestPermission(function(status) { if (Notification.permission !== status) { Notification.permission = status; } }); } var button = document.getElementsByTagName("button")[0]; button.addEventListener("click", function() { // 若是用户赞成就建立一个通知 if (window.Notification && Notification.permission === "granted") { var n = new Notification("Hi！"); } // 若是用户没有选择是否显示通知 // 注：由于在 Chrome 中咱们没法肯定 permission 属性是否有值，所以 // 检查该属性的值是不是 "default" 是不安全的。 else if (window.Notification && Notification.permission !== "denied") { Notification.requestPermission(function(status) { if (Notification.permission !== status) { Notification.permission = status; } // 若是用户赞成了 if (status === "granted") { var n = new Notification("Hi!"); } // 不然，咱们可让步的使用常规模态的 alert else { alert("Hi!"); } }); } // 若是用户拒绝接受通知 else { // 咱们可让步的使用常规模态的 alert alert("Hi!"); } }); }); </script>
</html>
复制代码

当咱们打开界面的时候，就会弹出受权申请，若是咱们点击容许，而后点击按钮，就能够发送一条通知到桌面，咱们就能够在桌面右下角看到这条通知。

上面咱们只是显示一条消息。

if (status === "granted") {
  var n = new Notification("Hi");
}
复制代码

若是咱们有不少消息的话，好比我是用个for循环来模拟大量通知的状况。

for(var i=0; i<10; i++) {
    var n = new Notification("Hi,"+i);
}
复制代码

能够看到有10条通知都显示出来。可是某些状况下对于用户来讲，显示大量通知是件使人痛苦的事情。

好比，若是一个即时通讯应用向用户提示每一条传入的消息。为了不数以百计的没必要要通知铺满用户的桌面，可能须要接管一个挂起消息的队列。

所以，须要为新建的通知添加一个标记。

若是有一条新通知和上一条通知具备相同的标记，那么这条新通知将会替换上一条通知，最后桌面上只会显示最新的通知。

仍是上面的例子，只须要在触发通知加个tag属性便可：

for (var i = 0; i < 10; i++) {
   // 最后只看到内容为 "Hi! 9" 的通知
    var n = new Notification("Hi! " + i, {tag: 'soManyNotification'});
}
复制代码

最后

消息通知是个不错的特性，但是也不排除有些站点恶意的使用这个功能，一旦用户受权以后，不时的推送一些不太友好的消息，打扰用户的工做，这个时候咱们能够移除该站点的权限，禁用其消息通知功能。

咱们能够点击浏览器地址输入框左边的叹号就有一个通知的选项，咱们能够修改受权。或者在通知页面也有修改通知的选项，能够根据具体状况进行修改受权通知。

因而最基本的 Web Notification 就实现了。