Web Notification

网页关照API。
这是2011年由谷歌手艺员John Gregg提出的一项网页关照api。

定义

请读者直接参考whatwg工作组对这个api的定义

Notifications API

API设想

[Constructor(DOMString title, optional NotificationOptions options),
 Exposed=(Window,Worker)]
interface Notification : EventTarget {
  static readonly attribute NotificationPermission permission;
  [Exposed=Window] static void requestPermission(optional NotificationPermissionCallback callback);

  attribute EventHandler onclick;
  attribute EventHandler onshow;
  attribute EventHandler onerror;
  attribute EventHandler onclose;

  readonly attribute DOMString title;
  readonly attribute NotificationDirection dir;
  readonly attribute DOMString lang;
  readonly attribute DOMString body;
  readonly attribute DOMString tag;
  readonly attribute USVString icon;
  readonly attribute USVString sound;
  // 现在还没有暴露振动属性；见 bug 23682
  readonly attribute boolean renotify;
  readonly attribute boolean silent;
  readonly attribute boolean noscreen;
  readonly attribute boolean sticky;
  [SameObject] readonly attribute any data;

  void close();
};

dictionary NotificationOptions {
  NotificationDirection dir = "auto";
  DOMString lang = "";
  DOMString body = "";
  DOMString tag = "";
  USVString icon;
  USVString sound;
  VibratePattern vibrate;
  boolean renotify = false;
  boolean silent = false;
  boolean noscreen = false;
  boolean sticky = false;
  any data = null;
};

enum NotificationPermission {
  "default",
  "denied",
  "granted"
};

callback NotificationPermissionCallback = void (NotificationPermission permission);

enum NotificationDirection {
  "auto",
  "ltr",
  "rtl"
};

从api设想可知，该api的组织器吸收两个参数，即关照题目与关照参数，该对象可在window和worker上被运用

关照题目

关照题目等于指用户可见的关照内容，由容器显现在关照窗口上

关照参数

• dir

  • 关照的方向，其可用范例为: 默许自动确认， 从左及右， 从右及左。在chrome最新浏览器上亲测无用。。

• lang

  • 标记关照的题目，和身材的言语范例，默许为空字符串，若须要填写，应填写一个有用的 BCP 47 言语标记。据猜想是为浏览器翻译效劳。

• body

  • 关照内容，显现在关照题目之下，默许为空字符串

• tag

  • 标记关照的范例，打上标签，默许为空字符串。运用该tag的场景是： 1.多实例关照并发操纵的时刻，当两个关照同时涌现时，统一tag只涌现一次。2.单实例时，两个定义了雷同的tag的关照实体，会显现最新谁人。

• icon

  • 指定关照图标，吸收一个URI资本标识符字符串,不填或剖析错误时，默许未定义

• sound

  • 指定关照声效，同上。在最新的Notifications手艺评审稿中，该参数被舍弃

• vibrate

  • 指定关照是不是震惊，该参数联系了新的vibrate api, 经由过程valid pattern驱动，详细请点击链接检察示例。在最新的Notifications手艺评审稿中，该参数被舍弃

• renotify

  • 当一个关照列表中关照被替代时，指定该关照是不是再次显现。值为true||false。在最新的Notifications手艺评审稿中，该参数被舍弃

• silent

  • 该标志示意不吸收声响或许振动关照，值为true||false。在最新的Notifications手艺评审稿中，该参数被舍弃

• noscreen

  • 设置该标志示意装备屏幕不会被启用，值为true||false。在最新的Notifications手艺评审稿中，该参数被舍弃

• sticky

  • 设置该标志示意最终用户将不能很容易地消灭 notification。设置该标志，关照将为永远型关照。在最新的Notifications手艺评审稿中，该参数被舍弃

• data

  • 扩大数据，在最新的Notifications手艺评审稿中，该参数被舍弃

可设置的事宜回调

var not = new Notification("Gebrünn Gebrünn by Paul Kalkbrenner");
// 当点击关照时
not.onclick = function () { alert('clicked') }
// 当关照涌现时
not.onshow = function () { alert('show') }
// 当关照封闭时
not.onclose = function () { alert('closed') }
// 当关照发作错误时
not.onerror = function (e) { console.log(e.message) }

静态属性

Notification.permission:猎取用户当前对关照的设置，包含default，denied， granted三个罗列值。default相当于制止显现，示意用户没有设置关照允许，denied示意用户设置过不愿望吸收关照，同时关照是没法显现的，granted能够显现关照

静态要领

Notification.requestPermission(ptional NotificationPermissionCallback callback)该要领吸收一个回调,回调带一个参数status。注重，在最新的手艺评审稿中，挪用该要领是异步的，会返回一个promise对象，我们完全能够点个then去处置惩罚status。

在评审稿中，它首先会设置permission = status，假如status === ‘default’，浏览器会弹出一个小窗，讯问用户对该域举行关照设置。然后异步处置惩罚我们的callback。例子以下

function notifyMessage(message, options, callback) {
    if (Notification && Notification.permission === 'granted') {
        var notification = new Notification(message, options);
        callback(null, notification);
    } else if (Notification.requestPermission) {
        Notification.requestPermission(function (status) {
            if (Notification.permission !== status) {
                Notification.permission = status;
            }
            if (status === 'granted') {
                var notification = new Notification(message, options);
                callback(null, notification);
            } else {
                callback(new Error('user denied'));
            }
        });
    } else {
        callback(new Error('doesn\'t support Notification API'));
    }
}

function notifyMessage(message, options, callback) {
    if (Notification && Notification.permission === 'granted') {
        var notification = new Notification(message, options);
        callback(null, notification);
    } else if (Notification.requestPermission) {
        Notification
            .requestPermission()
            .then(function (status) {
                new Notification(message, options);
                callback(null, notification);
            })
            .catch(function (status) {
                callback(new Error('user denied'));
            });
    } else {
        callback(new Error('doesn\'t support Notification API'));
    }
}

实例要领

notification.close();直接封闭关照。