html5 notification api,HTML5 Notification

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

The Notifications API allows web pages to control the display of system notifications to the end user. These are outside the top-level browsing context viewport, so therefore can be displayed even when the user has switched tabs or moved to a different app. The API is designed to be compatible with existing notification systems, across different platforms.

引子

今天打开优酷网站发现弹出了一个是否允许显示通知的对话框，如下图所示。

当我选择允许后，过一会儿从电脑的右侧弹出了一个提示框，如下图所示。

当时觉得很有意思，便上网查询了一下相关的资料，了解到是HTML5的新API——Notification。于是，本着学习的想法，弄了一个小的demo。

Notification简介

Notification API是HTML5中一个新的API，用于向用户配置和显示桌面通知，并且这一特性在Web Worker中可用。

构造方法

通过let notification = new Notification(title, options);可以初始化一个Notification实例。构造函数中包含两个参数，其中title是通知的标题，而options则是一些初始参数，具体的参数列表如下：dir : 文字的方向；它的值可以是 auto(自动), ltr(从左到右), or rtl(从右到左)

lang: 指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。

body: 通知中额外显示的字符串

tag: 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。

icon: 一个图片的URL，将被用于显示通知的图标。

属性

Notification主要包含一个静态属性和若干个实例属性，实例属性全部都是只读的属性，并且就是初始化该实例时option中的内容。具体的属性如下所示。Notification.permission：这是一个静态的只读属性，用于表明当前通知显示授权状态的字符串。可能的值包括：denied (用户拒绝了通知的显示), granted (用户允许了通知的显示), or default (因为不知道用户的选择，所以浏览器的行为与 denied 时相同)。

title：通知的标题，Readonly。

dir：通知的文本显示方向，Readonly。

lang：通知使用的语言，Readonly。

body：通知中的文本内容，Readonly。

tag：通知的ID，Readonly。

icon：通知中图片的url地址，Readonly。

主要方法Notification.requestPermission：这是一个静态方法，作用就是请求用户当前来源的权限以显示通知，效果就是上文中打开优酷网页时弹出的一个对话框。

close：关闭通知。

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

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

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

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

实例演示

在熟悉了API之后，就尝试自己弄个实例来演示一下。

点击DING!按钮，如果你是第一次，会出现下面的提示：

选择允许后，一会就会收到通知了，如下图所示。

此时，刷新或者关闭浏览器，通知仍然会显示。点击通知，可以产生一些交互效果。

至此，关于HTML5 Notification的介绍和简单使用就完结了。