HTML5 浏览器window.Notification 推送消息例子

最新推荐文章于 2024-07-24 19:41:23 发布

勤奋的老黄牛

最新推荐文章于 2024-07-24 19:41:23 发布

阅读量3.7k

点赞数

分类专栏： JavaScript 个人笔记

个人笔记同时被 2 个专栏收录

4 篇文章

订阅专栏

JavaScript

1 篇文章

订阅专栏

该博客展示了HTML5浏览器window.Notification的消息推送例子，虽内容非原创，但为相关开发者提供了参考，有助于了解HTML5在浏览器消息推送方面的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
    if (window.Notification) {

        var ua = navigator.userAgent.toLowerCase();
        if (ua.indexOf('safari') != -1) {
            if (ua.indexOf('chrome') > -1) {
                // Chrome
                Notification.requestPermission().then(function (permission) {
                    if (permission == "granted") {
                        var notification = new Notification('桌面推送', {
                            body: '这是我的第一条桌面推送',
                            icon: 'some/icon/url'
                        });

                        notification.onclick = function () {

                            console.log('点击');
                            notification.close();
                        };
                    } else {
                        Notification.requestPermission();
                        console.log('没有权限,用户拒绝:Notification');
                    }
                });
            } else {
                // Safari
                Notification.requestPermission(function (permission) {
                    if (permission == "granted") {
                        var notification = new Notification('桌面推送', {
                            body: '这是我的第一条桌面推送',
                            icon: 'some/icon/url'
                        });

                        notification.onclick = function () {

                            console.log('点击');
                            notification.close();
                        };
                    } else {
                        Notification.requestPermission();
                        console.log('没有权限,用户拒绝:Notification');
                    }
                })
            }
        }
    } else {
        console.log('不支持Notification');
    }
</script>

非原创