HTML5 桌面通知演示及詳解

大家好！今天我將通過一個簡單的演示，向大家展示如何使用 HTML5 和少量 JavaScript 代碼實(shí)現(xiàn)桌面通知。 GitHub 項(xiàng)目

HTML5 桌面提醒背景信息

通知允許在網(wǎng)頁上下文之外提醒用戶發(fā)生的情況，例如電子郵件的送達(dá)。

您可以顯示、排隊(duì)和替換通知。您還可以向左側(cè)的消息正文添加一個顯示在消息正文左側(cè)的圖標(biāo)。您還可以使用 tag 成員進(jìn)行多次實(shí)例化（此情況的結(jié)果是一個通知；第二個通知將替換具有相同 tag 的第一個通知）。 [了解更多關(guān)於 W3C Web Notifications API 的信息](此處應(yīng)插入W3C Web Notifications API鏈接)。

根據(jù)我的測試，一次最多只能顯示 4 個提醒，它們會被排隊(duì)，因此當(dāng)您關(guān)閉一個時(shí)，下一個就會顯示，依此類推。此外，您不能在其中放置超鏈接（這將是很好的功能）。桌面提醒的外觀如下所示。

與大多數(shù)此類功能一樣，出於安全原因，系統(tǒng)會提示您授權(quán)。

腳本

該腳本非常簡單，它只使用 webkitNotifications 來生成帶有標(biāo)題和消息的桌面提醒。

/*
   @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);

HTML5 桌面通知常見問題解答 (FAQs)

如何請求 HTML5 桌面通知的權(quán)限？

要請求 HTML5 桌面通知的權(quán)限，您需要使用 Notification.requestPermission() 方法。此方法會提示用戶允許或阻止您的網(wǎng)頁發(fā)送通知。需要注意的是，此方法應(yīng)由用戶操作（例如單擊按鈕）觸發(fā)，以避免被阻止瀏覽器阻止非用戶交互啟動的權(quán)限請求。

我可以自定義 HTML5 桌面通知的外觀嗎？

是的，您可以自定義 HTML5 桌面通知的外觀。您可以設(shè)置標(biāo)題、正文文本、圖標(biāo)，甚至移動設(shè)備的振動模式。但是，自定義級別可能因?yàn)g覽器和操作系統(tǒng)而異。

所有瀏覽器都支持 HTML5 桌面通知嗎？

不，並非所有瀏覽器都支持 HTML5 桌面通知。大多數(shù)現(xiàn)代瀏覽器（如 Chrome、Firefox 和 Safari）都支持它們，但 Internet Explorer 不支持。始終建議檢查該功能與不同瀏覽器的兼容性。

如何關(guān)閉 HTML5 桌面通知？

您可以通過在 Notification 實(shí)例上調(diào)用 close() 方法以編程方式關(guān)閉 HTML5 桌面通知?；蛘?，大多數(shù)桌面通知都將有一個用戶可以單擊的關(guān)閉按鈕。

瀏覽器不活動時(shí)，我可以發(fā)送 HTML5 桌面通知嗎？

是的，即使瀏覽器不活動或最小化，您也可以發(fā)送 HTML5 桌面通知。但是，這需要使用 Service Workers 和 Push API，這些是更高級的主題。

如何處理 HTML5 桌面通知上的點(diǎn)擊事件？

您可以通過為 Notification 實(shí)例上的“click”事件添加事件偵聽器來處理 HTML5 桌面通知上的點(diǎn)擊事件。在事件處理程序中，您可以定義單擊通知時(shí)應(yīng)發(fā)生的情況。

我可以在移動瀏覽器中使用 HTML5 桌面通知嗎？

是的，您可以在移動瀏覽器中使用 HTML5 桌面通知。但是，通知的行為和外觀可能因操作系統(tǒng)和瀏覽器而異。

使用 HTML5 桌面通知有什麼限製或限制？

是的，使用 HTML5 桌面通知有一些限制。例如，用戶必須授予您的網(wǎng)頁顯示通知的權(quán)限。此外，一些瀏覽器可能會限制通知的頻率以防止垃圾郵件。

我可以在 Web Worker 中使用 HTML5 桌面通知嗎？

是的，您可以在 Web Worker 中使用 HTML5 桌面通知。但是，您需要使用 self.registration.showNotification() 方法而不是 Notification 構(gòu)造函數(shù)。

如何檢查用戶是否已授予 HTML5 桌面通知的權(quán)限？

您可以通過檢查 Notification.permission 的值來檢查用戶是否已授予 HTML5 桌面通知的權(quán)限。如果它是“granted”，則用戶已授予權(quán)限。如果它是“denied”，則用戶已阻止通知。如果它是“default”，則用戶尚未做出選擇。

請注意，文中圖片鏈接已保留，但需要確保這些鏈接是有效的。 此外，一些鏈接文字需要替換為實(shí)際的鏈接地址。

以上是HTML5桌面通知示例的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！