Skip to main content

浏览器通知

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="content" style="color: red;height: 100px;"></p>
    <script>
        if (window.Notification) {
            let content = document.getElementById('content');
            // granted -> 表示之前已经询问过用户，并且用户已经授予了显示通知的权限
            // denied -> 表示用户已经明确的拒绝了显示通知的权限
            setTimeout(() => {
                if (Notification.permission == "granted") {
                    popNotice();
                } else if (Notification.permission != "denied") {
                    Notification.requestPermission(function (permission) {
                        popNotice();
                    });
                }
            }, 5000);

            var popNotice = function () {
                if (Notification.permission == "granted") {
                    var notification = new Notification("有新的消息", {
                        body: '有重大消息\n请及时处理',
                        icon: './青秀山.jpg',
                        requireInteraction: true
                    });
                    // 点击消息关闭提示
                    notification.onclick = function () {
                        content.innerHTML = '这是什么：' + new Date();
                        notification.close();
                    };
                }
            };
        } else {
            alert('浏览器不支持Notification');
        }
    </script>
</body>

</html>