Notification API实战

news2024/11/24 6:29:00

什么是Notification？

Notifications API 的接口 Notification 用于配置以向用户显示桌面通知。
这些通知的外观和功能因平台而异，但通常它们会提供一种异步向用户提供信息的方式。

前置要求

win10系统，且通知与操作中开启浏览器的通知权限
浏览器开启了对应站点的通知权限
对应站点使用HTTPS协议
用户选择允许通知

因为前置要求着实有点多，所以目前适用于用户行为和浏览器可控的场景，或者作为浏览器页面内通知的增强版。

实现

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

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

<body>
    <button onclick="notifyMe()">Notify me!</button>
    <script>
        function notifyMe() {
            if (!("Notification" in window)) {
                // Check if the browser supports notifications
                alert("This browser does not support desktop notification");
            } else if (Notification.permission === "granted") {
                // Check whether notification permissions have already been granted;
                // if so, create a notification
                const notification = new Notification("Hi there!");
                // …
            } else if (Notification.permission !== "denied") {
                // We need to ask the user for permission
                Notification.requestPermission().then((permission) => {
                    // If the user accepts, let's create a notification
                    if (permission === "granted") {
                        const notification = new Notification("Hi there!");
                        
                    }
                });
            }

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

</html>