HTML5桌面通知示例

同性恋伴侣。 因此，今天我做了一个快速演示，向您展示了使用HTML5和一些JavaScript进行桌面通知的示例。

在GitHub上查看项目

HTML5桌面警报的背景信息

通知允许在网页上下文之外警告用户发生的事件，例如电子邮件的传递。

您可以显示，排队和替换通知。 您还可以向邮件正文左侧显示的警报添加图标。 同样，您也可以将标记成员用于多个实例（这种情况的结果是一个通知；第二个替换具有相同标记的第一个）。 阅读有关W3C Web Notifications API的更多信息。

从我的测试来看，一次仅显示4条警报，它们被排队，因此当您关闭一个警报时，将显示下一个警报，依此类推。 另外，您不能在其中放置超链接（这将很高兴）。 这是桌面警报的外观。

出于安全原因，像大多数此类功能一样，系统也会提示您进行访问。

剧本

该脚本非常简单，仅使用webkitNotifications生成带有标题和消息的桌面警报。

/*
   @Copyright: jQuery4u 2012
   @Author: Sam Deering
   @Script: html5desktopalert.js
*/
(function($,W,D,undefined)
{
    W.JQUERY4U = W.JQUERY4U || {};

    W.JQUERY4U.HTML5DESKTOPALERT = {

        name: "jQuery HTML5 DESKTOP ALERT",

        namespace: "W.JQUERY4U.HTML5DESKTOPALERT",

        settings:
        {
           //turn into plugin? ...
        },

        cache:
        {
            //runtime data, dom elements etc...
        },

        init: function(settings)
        {
            this.settings = $.extend({}, this.settings, settings);
            this.cache.notifications = window.webkitNotifications;
            this.testBrowserSupport();
            this.setupEventHandlers();
        },

        setupEventHandlers: function()
        {
           var _this = this;
           $('#alert-me-btn').bind('click', function(e)
           {
               _this.checkPermission("desktopAlert");
           });
        },

        //tests HTML5 browser support and permission request
        testBrowserSupport: function()
        {
            var $browserMsg = $('#browser-support-msg');
            if(this.cache.notifications)
            {
                $browserMsg.html("Yay! Notifications are supported on this browser.").parent().addClass('alert-success');
            }
            else
            {
                $browserMsg.html("Sorry. Notifications aren't supported on this browser.").parent().addClass('alert-error');
            }
        },

        checkPermission: function(callback)
        {
            var _this = this;
            if (this.cache.notifications.checkPermission() == 0)
            {
                _this[callback]();
            }
            else
            {
                this.cache.notifications.requestPermission(function()
                {
                    if (this.cache.notifications.checkPermission() == 0) _this[callback]();
                });
            }
        },

        desktopAlert: function()
        {
            console.log('sending alert...');
            var notification = window.webkitNotifications.createNotification("", $('#da-title').val(), $('#da-message').val());
            notification.show();
        }
    }

    $(D).ready( function()
    {
        //start up the form events
        W.JQUERY4U.HTML5DESKTOPALERT.init();
    });


})(jQuery,window,document);

观看演示

From: https://www.sitepoint.com/html5-desktop-notifications/