Javascript中如何调用现代浏览器的通知(Notification)接口实现桌面消息通知功能？

2.71K 次浏览

0

Javascript中如何调用现代浏览器的通知(Notification)接口实现桌面消息通知功能？

我来回答收藏(0) 评论编辑

2020-01-07 提问

回复 [×]

提交评论

请输入评论内容

1 个回答

0

现在浏览器几乎都支持Notification通知接口，在获取到了浏览器的通知权限后，通过创建一个Notification实例，即可向客户端桌面弹出系统级的消息通知框。

完整的示例代码如下(复制以下代码，保存到本地的任意一个.html文件中，在浏览器中打开即可预览效果)：

<!DOCTYPE html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
</head>

<body>
    <button onclick="notifyMe('Hi there!')">Notify me!</button>
    <script type="text/javascript">
        const notifyOption = {
            body: "",
            renotify: true,
            requireInteraction: true,
            vibrate: [500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450, 110, 200, 110, 170, 40, 500]
        };

        function createNotification(message) {
            notifyOption.body = message;
            return new Notification('EPC系统消息', notifyOption);
        }

        function notifyMe(message) {
            // Let's check if the browser supports notifications
            if (!("Notification" in window)) {
                //alert("This browser does not support desktop notification");
            }

            // Let's check whether notification permissions have already been granted
            else if (Notification.permission === "granted") {
                // If it's okay let's create a notification
                var notification = createNotification(message);
            }

            // Otherwise, we need to ask the user for permission
            else if (Notification.permission !== "denied") {
                Notification.requestPermission().then(function (permission) {
                    // If the user accepts, let's create a notification
                    if (permission === "granted") {
                        var notification = createNotification(message);
                    }
                });
            }

            // At last, if the user has denied notifications, and you 
            // want to be respectful there is no need to bother them any more.
        }
    </script>
</body>

</html>

Notification的完整选项如下：

const options = {
    "body": "<String>",
    "icon": "<URL String>",
    "image": "<URL String>",
    "badge": "<URL String>",
    "vibrate": "<Array of Integers>",
    "sound": "<URL String>",
    "dir": "<String of 'auto' | 'ltr' | 'rtl'>",
    "tag": "<String>",
    "data": "<Anything>",
    "requireInteraction": "<boolean>",
    "renotify": "<Boolean>",
    "silent": "<Boolean>",
    "actions": "<Array of Strings>",
    "timestamp": "<Long>"
}

评论

2020-01-07 回答

我来回答

提交答案