html 消息通知功能,HTML5之消息通知的使用(Web Notification)

关于 HTML5 ，写了不少文章，总觉得相关的高级 API 都得过一遍。系统的了解，站在更高的高度去思考问题，这样才能事半功倍。

一、先睹为快

我们先来尝试一个最简单的例子，打开 chrome 开发者工具，粘贴代码进去直接运行：new Notification("Jartto"s 消息通知", { dir: "rtl", body: "这是一个消息，通过 Web Notification 发送，作为测试！", icon: "https://raw.githubusercontent.com/chenfengyanyu/my-web-accumulation/master/images/logo.jpeg"})

并没有出现什么消息通知，怎么回事？不要着急，接着往下看。

二、用户授权

按照上面的示例，我们运行了，但是并没有成功调起消息推送框。这时候需要查看一下是否用户授权，控制台输入： > Notification.permission

很快我们就会发现，原来用户许可是 default ，因为不知道用户的选择，所以浏览器的行为与 denied 时相同，即为拒绝。

三、兼容性

看到这些 HTML5 的高级 API ，总是会有一些顾虑。例子虽好，用起来也很方便，但是到底兼容性如何，这是一个值得思考的问题。

可以看到，基本上所有浏览器都支持了，除了 iOS Safari 和 Opera Mini ，所以移动端应用需谨慎。

四、API 文档

我们先来系统