HTML5 Notification 

<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>

效果如下：

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

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

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

posted @ 2016-07-22 14:50  默言03  阅读(202)  评论(0)  编辑  收藏  举报