Chrome中如何让通知更骚一点

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,455评论 25 708
  • 不知道是从什么时候开始,我们的世界都变了。 说是从小玩到大的朋友,在很久不见,见面的那一瞬间却不知带说什么。 ...
    何芝芝阅读 406评论 0 0
  • 谨慎内向的可靠爸爸,外向粗线条少女妈妈,脱线双面的我,是一家人。 01 妈妈的手机用了多年,屏幕已经不太灵光了。但...
    何阿予阅读 215评论 1 5
  • 那时天总是很蓝 闺蜜们的笑总是很甜 我们骑着车 奔驰在去往学校和放学回家的路上 时而走走停停 时而看看听听 有些话...
    又一彼岸花阅读 177评论 0 0
  • 1、 今天,我把我死党超哥的朋友圈屏蔽了。我之所以屏蔽他,不是因为代购、刷屏等无聊信息,而是因为30岁的他已经死了...
    剑圣喵大师阅读 5,351评论 55 136