HTML5 Web Notifications 桌面消息通知 API 使用介绍

Question

国内网站很少有做 HTML5 Web Notifications 桌面消息通知的，不过这确实一个很好的功能，样式也还是耐看，并且是桌面级别的，不管网页标签是否激活都可以弹出来。

使用 Notifications 有两点需要注意的：

1. 必须使用 ssl 安全链接
2. 必须征得用户同意

在弹出消息之前，会先询问用户是否同意？

用户同意以后，就会弹出来我们设置的内容：

这个样式和浏览器有关，比如火狐的长这样：

360 浏览器是这样：

使用方法

var notification = new Notification("Hi，帅哥：", {
  body: "可以加你为好友吗？",
  icon: "https://www.wenjiangs.com/wp-content/uploads/sysavatar/33.jpg"
});

使用之前我们还要检测浏览器是否支持，直接使用 window.Notification 判断，如果没有授权，浏览器会先弹出授权窗口，我们可以在回调里面执行我们的消息弹窗。

if (Notification.permission == "granted") {
  popNotice();
} else if (Notification.permission != "denied") {
  Notification.requestPermission(function(permission) {
    popNotice();
  });
}

完整代码参见：https://www.wenjiangs.com/runcode?slug=4XFa9awW

可选参数

//1.利用构造函数来创建一个实例
var notification = new Notification(title, options)

/*
title
一定会被显示的通知标题
options 可选（常用，更多需要查api）
一个被允许用来设置通知的对象。它包含以下属性：
dir : 文字的方向；它的值可以是 auto（自动）, ltr（从左到右）, or rtl（从右到左）
body: 通知中额外显示的字符串
tag: 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。
icon: 一个图片的URL，将被用于显示通知的图标。
*/

授权回调函数

如何判断用户是否同意呢？

Notification.permission

授权状态：

• denied 用户拒绝了通知的显示
• granted 用户允许了通知的显示
• 默认 default

因为不知道用户的选择，所以浏览器的行为与 denied 时相同。

发出一个通知后想要让其点击有效果

onclick：点击时触发
onshow：显示通知时触发
onclose：关闭通知时触发
onerror：通知发生错误时触发

上方的小例子中有使用可看看。