代码改变世界

html5 notifications通知

  youxin  阅读(339)  评论(0)  编辑  收藏  举报

http://www.html5rocks.com/en/tutorials/notifications/quick/?redirect_from_locale=zh

http://www.paulund.co.uk/html5-notifications

http://www.w3.org/TR/notifications/#displaying-notifications

示例：

复制代码
<!DOCTYPE HTML>  
<!-- http://dhtmlexamples.com/2011/01/28/creating-os-notifications-in-html5/ -->  
<html>  
<head>  
    <title>Creating OS notifications in HTML5</title>  
</head>  
<body>  
   
    <form>  
        <input type="button" value="Hey, do you want to show notifications or not?" onclick="init();" />  
        <input type="button" value="Send OS notification" onclick="notify();" />  
    </form>  
   
    <script type="text/javascript">  
        const AUTO_CLOSE_DELAY_SECONDS = 5;  
   
        function init() {  
            if (window.webkitNotifications) {  
                window.webkitNotifications.requestPermission();  
            }  
        }  
   
        function notify() {  
            var icon = "accept.png";  
            var title = "[" + new Date().toLocaleTimeString() + "] This notification will close in " + AUTO_CLOSE_DELAY_SECONDS + " seconds";  
            var body =  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id magna ut sapien sodales ultricies eget nec metus. Pellentesque molestie nunc nec leo iaculis eu dictum ante porta. Sed adipiscing condimentum sapien a scelerisque. Quisque luctus elit vel odio semper iaculis. Nunc sit amet neque justo. Phasellus ullamcorper dui vel risus varius vitae aliquet purus consectetur. Fusce felis nibh, volutpat ac ornare at, ullamcorper eget lacus. Nunc euismod iaculis porta. In hac habitasse platea dictumst. Proin a sem sed neque tincidunt scelerisque eget in elit. Ut quis felis quis tortor sollicitudin sollicitudin id quis tortor. Nunc porttitor diam id leo lobortis aliquet. Nam scelerisque molestie dolor, placerat hendrerit urna euismod eu. Praesent nec massa enim. Donec nec urna dignissim nunc fringilla luctus. Nunc pretium urna et diam accumsan fermentum. Vivamus condimentum lectus vitae mi vulputate pulvinar. Curabitur adipiscing ultrices arcu. Vestibulum luctus malesuada erat sit amet rutrum. Nam feugiat lectus quis libero adipiscing laoreet.";  
   
            if (window.webkitNotifications) {  
                if (window.webkitNotifications.checkPermission() == 0) {  
                    var popup = window.webkitNotifications.createNotification(icon, title, body);  
                    popup.ondisplay = function(event) {  
                        setTimeout(function() {  
                            event.currentTarget.cancel();  
                        }, AUTO_CLOSE_DELAY_SECONDS * 1000);  
                    }  
                    popup.show();  
                } else {  
                    window.webkitNotifications.requestPermission();  
                    return;  
                }  
            }  
        }  
    </script>  
   
</body>  
</html>
复制代码

 

编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
历史上的今天：
2011-11-07 CSS Tools: Reset CSS
2011-11-07 reset.css
点击右上角即可分享
微信分享提示