斗鱼扩展--notifications提示(十二)

来说下 桌面通知 Notification，HTML5支持 Web Notifications 的实例，但是要经过用户允许， 

chrome://settings/content/notifications

设置/高级设置/内容设置/通知 里查看哪些是禁止或授权的，还可以在网页栏左边查看

 

代码如下

if (window.Notification) {
    if (Notification.permission != "granted") {
        Notification.requestPermission(function (permission) {
            MyNotification();
        });
    }else{
        MyNotification();
    }
    //禁止了弹窗
    function MyNotification() {
        if (Notification.permission == "granted") {
            var notification = new Notification("标题", {
                body: "内容", 
                icon: "https://www.baidu.com/img/bd_logo1.png" 
            });
            //消息框被点击事件
            notification.onclick = function () {
                notification.close();
            };
            notification.onshow = function () {
                setTimeout(function () {
                    notification.close();
                }, 5000);
            };
        }
    }
} else {
    alert("不支持Notification");
}

 

效果如下：

 

Chrome 自己的notifications 的授权是在manifest.json 文件中，需要用户点击授权按钮。

事说下扩展结构 ，3个文件，manifest.json，一个js文件，一个图片icon文件。

manifest.json 代码如下

{
    "manifest_version": 2,
    "name": "消息提示",
    "version": "1.0.0",
    "permissions": [
        "notifications"
    ],
    "background": {"scripts": [
        "notifications.js"
    ]}     
}

notifications.js 代码如下

/*    桌面消息通知
*    _msg 消息内容
*    _title 标题
*    _ico 图标
*    _time 多少毫秒后销毁
*/
function myNotification(_msg,_title,_ico,_time){
    var ico = _ico || "ico/icon.png";
    var title = _title || "通知";
    var msg = String(_msg)|| "消息！";
    var time = _time || 5000;
    //显示一个桌面通知
    if(window.webkitNotifications){
        var notification = window.webkitNotifications.createNotification(ico,title,msg);
        notification.show();
        setTimeout(function(){notification.cancel();}, time); 
    }else if(chrome.notifications){
        var opt = {
            type: 'basic',
            title: title,
            message: msg,
            iconUrl:ico,
        }
        chrome.notifications.create('', opt, function(id){
            setTimeout(function(){
                chrome.notifications.clear(id, function(){});
            }, time);
        });
    }
};

 

这段代码是运行在 后台的，所以只能后台调用

如 myNotification("标题","你好世界");

 

这样就能 以弹窗的形式 ，提示用户 已抢了多少宝箱了，，收益如何。。