image.png

<button onclick="notifyMe()">Notify me!</button>

<script>
    // request permission on page load
    document.addEventListener('DOMContentLoaded', function () {
        if (!Notification) {
            alert('Desktop notifications not available in your browser. Try Chromium.');
            return;
        }

        if (Notification.permission !== "granted")
            Notification.requestPermission();
    });

    function notifyMe() {
        if (Notification.permission !== "granted")
            Notification.requestPermission();
        else {
            var notification = new Notification('Notification title', {
                icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
                body: "Hey there! You've been notified!",
            });

            notification.onclick = function () {
                window.open("http://stackoverflow.com/a/13328397/1269037");
            };
        }
    }
</script>

http://stackoverflow.com/questions/2271156/chrome-desktop-notification-example

image.png

<!--按钮-->
<button id="tip1" class="tip1">显示通知</button>

<script>
    $(function() {
        var timer = null,
            title = $('title').text();
        $('#tip1').on('click', function() {
            showMsgNotification('宽带即将欠费提示', '这里是消息内容，Chrome中如何让通知更骚一点，您的宽带将于2017年12月欠费');
            return false;
        });
        $('body').on('click', function() {
            clearInterval(timer);
            $('title').text(title);
        });
        function showMsgNotification(title, msg) {
            var Notification = window.Notification || window.mozNotification || window.webkitNotification;
            if(Notification) {//支持桌面通知
                if(Notification.permission == "granted") {//已经允许通知
                    var instance = new Notification(title, {
                        body: msg,
                        icon: "http://resource.aimi98.com/files/test/aimi-web/img/head/13.jpg",
                    });
                    instance.onclick = function() {
                        $('body').css({'background': 'red'});
                        console.log('onclick');
                        instance.close();
                    };
                    instance.onerror = function() {
                        console.log('onerror');
                    };
                    instance.onshow = function() {
                        console.log('onshow');
                    };
                    instance.onclose = function() {
                        console.log('onclose');
                    };
                }else {//第一次询问或已经禁止通知(如果用户之前已经禁止显示通知，那么浏览器不会再次询问用户的意见，Notification.requestPermission()方法无效)
                    Notification.requestPermission(function(status) {
                        if (status === "granted") {//用户允许
                            var instance = new Notification(title, {
                                body: msg,
                                icon: "images/reload.png"
                            });
                            instance.onclick = function() {
                                // Something to do
                            };
                            instance.onerror = function() {
                                // Something to do
                            };
                            instance.onshow = function() {
                                // Something to do
                            };
                            instance.onclose = function() {
                                // Something to do
                            };
                        }else {//用户禁止
                            return false
                        }
                    });
                }
            }else {//不支持(IE等)
                var index = 0;
                clearInterval(timer);
                timer = setInterval(function() {
                    if(index%2) {
                        $('title').text('【　　　】'+ title);//这里是中文全角空格，其他不行
                    }else {
                        $('title').text('【新消息】'+ title);
                    }
                    index++;
                    if(index > 20) {
                        clearInterval(timer);
                    }
                }, 500);
            }
        }
    });
</script>

鸣谢作者：开心洋葱
原文地址 ：http://www.75271.com/3375.html