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>

效果以下：html

浏览器测试：FireFox 没有问题，Chrome 支持网络，但对本地文件，没法弹出提示。IE9不支持window.Notification。html5

本文仅记录本身写的一个小Demo，更多关于Notification的内容，请点击下文连接。web

http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/浏览器