一個簡單的網頁通知（Web Notifications API）實例

一些狀況下，咱們但願網頁能夠直接向桌面推送消息。本文利用 HTML5 的 Web Notifications API 來展現具體的代碼該如何編寫，同時來看一看這個特性在各個瀏覽器上的兼容性如何。

查看DEMO

一個簡單的例子

javascriptif(window.Notification && Notification.permission !== "denied") {
        Notification.requestPermission(function(status) {    // 請求權限
            if(status === 'granted') {
                // 彈出一個通知
                var n = new Notification('Title', {
                    body : 'I am a Notification',
                    icon : './images/test1.png'
                });
                // 兩秒後關閉通知
                setTimeout(function() {
                    n.close();
                }, 2000);
            }
        });
    }

首先，咱們須要判斷瀏覽器是否支持Notification。若是經過Notification.requestPermission向用戶請求權限，這是瀏覽器會彈出一個是否容許顯示通知的提示：

若是用戶選擇了「容許」，那麼返回的status將會是granted。這個時候咱們就能夠經過Notification()來建立實例了：

new Notification('Title', {
            body : 'I am a Notification',
            icon : './images/test1.png'
        })

第一個參數爲標題，第二個參數爲配置參數，裏面包含如下可選參數：

效果圖以下（Chrome）：

接下來，兩秒後，通知將會消失。

兼容性

Web Notifications API目前在如下瀏覽器獲得了支持：

• Firefox 35+
• Chrome 31+
• Safari 7.1+
• Opera 27+
• Android Browser 4.4+ （須要加上webkit前綴）

詳情點擊這裏