Web Notification

时间 2019-11-08

原文原文链接

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

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

因为用户能够设置将你的通知给屏蔽掉，因此你应该确保提示的通知是提示性的信息而不是很是重要的信息。github

请求容许

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

由于网站的访问者可能运行的是其余系统，发通知前你须要先检查他们的浏览器是否支持，能够经过检查window.Notification对象是否认义。浏览器

若是window.Notification对象确实有定义，你能够继续经过permission属性来检查用户对你网站消息的许可级别，一共有三种级别：并发

default: 用户尚未设置是否容许来自当前域名的通知。
granted: 用户容许来自当前域名的通知。
denied: 用户拒绝来自当前域名的通知。

若是permission级别是default，说明你的网站尚未请求过让用户容许发送通知，因此你须要调用requestPermission()方法，这时Safari会弹出提示请求用户容许，若是用户容许，会调用你做为参数传入的回调方法。dom

建立并发送通知

建立一个消息对象：网站

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

除了title做为必须参数之外，还能够做为options对象传入有：this

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

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

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

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

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

先看效果再看代码：

【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