HTML5 Notification

時間 2019-12-11

原文原文鏈接

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>提示</title>
    <style>
        
    </style>
</head>
<body>
    <button onclick="alterNotification()">彈出提示</button>
    <label id="note"></label>
</body>
<script>
    window.onload = function () {
        if(!window.Notification){
            alert("瀏覽器不支持Notification");
        }
    };

    function alterNotification() {
        // 只會是granted, denied, 或default.
        // 其中granted表示用戶容許通知，denied表示用戶嫌棄你，default表示用戶目前尚未管你。
        if (Notification.permission != "granted") {
            Notification.requestPermission(function (permission) {
                if (permission == "denied") {
                    alert("用戶未贊成彈窗。");
                    return;
                }
            });
        }

        var notice = new Notification("通知", {
            body: "Content",
            icon: "image/webwxgeticon.jpg"
        });

        notice.onclick = function () {
            document.getElementById("note").innerHTML = "已成功通知";
        };
    }
</script>
</html>