Web Notification

在OS X 10.8 Mountain Lion系统上，通过Safari访问的页面能够发送通知到系统右边栏通知中心，通知（Notification）是通过WebKit Notification 对象发出的，这也是W3C标准实现的一部分。

来自Safari的通知可以在系统偏好设置的“通知”面板内进行设置，有些用户可能希望Safari的通知以提示框（alert）的形式在屏幕上停留一会儿然后再消失，有些人可能就不想在屏幕上显示。另外，用户可以在Safari偏好设置的通知面板内对单个网站（域名）的消息进行设定（Allow or Deny）。

由于用户可以设置将你的通知给屏蔽掉，所以你应该确保提示的通知是提示性的信息而不是非常重要的信息。

请求允许

提示：当你要实现带通知功能的插件时，你不需要检查用户许可级别，因为用户主动的安装插件，默认的许可级别就是允许(granted)。

因为网站的访问者可能运行的是其他系统，发通知前你需要先检查他们的浏览器是否支持，可以通过检查window.Notification对象是否定义。

如果window.Notification对象确实有定义，你可以继续通过permission属性来检查用户对你网站消息的许可级别，一共有三种级别：

• default: 用户还没有设置是否允许来自当前域名的通知。
• granted: 用户允许来自当前域名的通知。
• denied: 用户拒绝来自当前域名的通知。

如果permission级别是default，说明你的网站还没有请求过让用户允许发送通知，所以你需要调用requestPermission()方法，这时Safari会弹出提示请求用户允许，如果用户允许，会调用你作为参数传入的回调方法。

创建并发送通知

创建一个消息对象：

var n = new Notification(in String title, {in Object options});

除了title作为必须参数以外，还可以作为options对象传入有：

• body: 通知的内容
• tag: 通知的唯一标示，避免在通知中心中重复显示通知。

如果有多个消息会以队列的形式排列，只有当前面没有消息时才会显示。通知的副标题通常是消息来源的域名或者插件名，图标就是Safari应用的图标。

提示：通过网站发送通知并没有频率限制，为了不至于打扰用户，确保只在必要的时候才发通知信息。

通知会一直留在通知中心，直到用户在通知中心清除所以来自Safari的通知或者关掉当前网站页面。可以调用close()方法关掉某条消息，或者你愿意的话，可以让用户在点击通知提示框时就将通知清除，你只需要在onclick()事件处理中调用close()方法，除了onclick()，还有其他一些可用事件：

事件	描述
onshow	当通知在屏幕上显示的时候会被调用。
onclick	用户点击通知提示框的时候会被调用，默认情况下点击通知提示框会显示消息来源的界面（网站），即使有另一个程序在前台（显示）。
onclose	通知消失的时候会被调用，主动调用close()也会触发onclose()事件。
onerror	当通知不能展现给用户的时候会被调用，如当前用户允许级别是denied或default。

先看效果再看代码：

 

Send a notification
【Code on Github】

var notify = function() {
    // check for notification compatibility
    if(!window.Notification) {
        // if browser version is unsupported, be silent
        return;
    }
    // log current permission level
    console.log(Notification.permission);
    // if the user has not been asked to grant or deny notifications from this domain
    if(Notification.permission === 'default') {
        Notification.requestPermission(function() {
            // callback this function once a permission level has been set
            notify();
        });
    }
    // if the user has granted permission for this domain to send notifications
    else if(Notification.permission === 'granted') {
        var n = new Notification(
                    '1 new friend request',
                    {
                      'body': 'Jill would like to add you as a friend',
                      // prevent duplicate notifications
                      'tag' : 'unique string'
                    }
                );
        // remove the notification from Notification Center when it is clicked
        n.onclick = function() {
            this.close();
        };
        // callback function when the notification is closed
        n.onclose = function() {
            console.log('Notification closed');
        };
    }
    // if the user does not want notifications to come from this domain
    else if(Notification.permission === 'denied') {
        // be silent
        return;
    }
};

结束

现在通知还不是很普及，W3C和HTML5貌似也在做这方面推广，Google Chrome好像也支持一种通知机制叫做webkitNotification，相信后面会越来越普及。这种原生的通知比起用JQuery各种插件做出来的体验还是要好很多，所以如果能合理利用，一定会为网站增色不少。

Posted by TracyYih - Aug 22 2013
如需转载，请注明： 本文来自 Esoft Mobile