[译]Web Notifications API (通知API)怎么玩
2014-05-26 #Coding

56kb拨号上网的时代已经慢慢淡出了大部分人的记忆(手机用户或许不是,不过3G大力普及的现在也差不多了),那是一个浏览器只需要打开一个页面就足够的时代,基本没人会预测到未来上网会用到多标签这功能。时至今日,我们被社交网络、论坛、回复、评论、照片、视频等等网络应用所包围淹没。为了解决我们需要点击每个标签来检查新动向这个蛋疼的问题,开发人员搞出了许多系统解决方案。其中的一种就是notifications 通知,这个解决方案已经被广泛应用于各种不同的网站。

直到不久之前,每个开发者还都得自己来实现这个功能,以至于出现了许多形形色色的解决方案。现在W3C已经规范了一个API来解决这个问题,这个API全称Web Notifications API

在移动设备上我们很熟悉通知这个概念。试着离线几个小时,当你再重新连上网络是你就会发现你被手机上装的应用的通知所淹没了。It’d be great to have the same mechanism for our web pages that work seamlessly on desktop and mobile devices. 就像我在简介中介绍的那样,这个系统已经被开发和标准化了,那就是Web Notifications API

app

Web Notifications API 是个啥

Web Notifications API 定义如下“an API for end-user notifications. A notification allows alerting the user outside the context of a web page of an occurrence, such as the delivery of email.(一个为终端用户通知所提供的API,这个通知可以提醒用户非其所使用页面中发生的事情,例如收到了电子邮件)”。这个API说明没有详细描述怎么样在哪来展现这些通知(译者:最新的草案中已经标明了大概显示的位置等)。因此,我们将看到不同浏览器中不同样子的通知,同时取决于我们用的设备,我们还将看到通知显示在不同的地方(比如在手机中我们可能会看到通知显示在通知栏里)。值得注意的是在准备用这个API搞一个通知之前,浏览器会给用户一个警告框,来征求用户是否同意你的站点来调用这个API。

Notifications

这个API已经公布了有一阵子了,其中的一些内容也修改了几次。现在这个规范标准有了2个主要的版本。第一个版本是旧版的Chrome和Firefox实现的。现在这个规范标准已经逐渐稳定,尽管他仍然是个W3C工作草案(截止2014-05-26)。

想到一些这个API的用例并不难。举个栗子,当你收到电子邮件时你会想同时收到一条通知,你也可能想在有人在Tweet或者微博@到你或者有人评论了你在FB、G+上的照片时收到一条通知。

现在,我们已经知道 Web Notifications API 是个啥了和他是用来干啥的。下面就让我们进入正题,来深入了解这个API所提供的方法、属性和事件。

Methods, Properties, and Events(方法、属性和事件)

Web Notifications API 通过window对象上的Notification来暴露出来。这是一个构造函数,允许我们来创造一个通知实例。它接受2个参数:一个String来声明通知的标题,一个可选的包含设置的Object。在我们来创建一个实例前,我们先来看看我们可以定义的设置Object

  • body: 一个用于详细说明通知内容的字符串。
  • lang: 指定通知的语言。它的值必须符合BCP 47 standard,比如en-US,it-IT都是个有效的值(中文就是zh-CN啦)。
  • dir: 定义通知文字的排版方向,它的值可以是: auto: 继承浏览器设置,ltr: 由左至右排版(欧洲语言、中文等),rtl: 由右至左排版(阿拉伯语等)
  • tag: 作为通知ID的一个字符串,可以用来检索、替换或者删除通知。
  • icon: 定义通知显示的图标,以图片URL形式。

创建一个Notification对象的实例,我们应该这样写:

1
2
3
var notification = new Notification('Email received', {
body: 'You have a total of 3 unread emails'
});

相当简单,不是吗?XD

TODO …..