HTML5 Web Notifications 桌面推送小記

目錄

• 簡介
• 經常使用API
• 手動設置權限

簡介

Web Notifications目前在w3c的協議中已是「推薦」(REC:Recommendation)階段，除了iE外，各大現代瀏覽器都對這個桌面推送有了基本的支持。這都表明咱們如今能夠很好的在應用中使用桌面推送的特性。在移動端瀏覽器方面，可能由於平臺的權限限制的緣由目前只有firefox積極地支持這個屬性。Web Notifications也能很好的工做在web workers中。

經常使用API

• Notification.permission
  使用 Web Notifications以前要向用戶申請權限，Notification.permission屬性是一個只讀屬性表示當前站點Web Notifications的狀態，它有三個值default、granted和denied，在用戶沒有給予權限時，即站點的默認狀態通常是default，僅在這個狀態時，可使用Notification.requireInteraction向用戶申請權限，用戶會在瀏覽器上看到一個 Web Notifications權限的確認框，選擇Notification.permission屬性改變爲granted表示用戶容許使用Web Notifications，Notification.permission屬性改變爲denied表示用戶禁止使用Web Notifications，而且不可再向用戶申請權限。
  Safari (較舊版)和 Chrome (在 32 版本以前) 尚未實現 permission 屬性。

• Notification.requestPermission
  向用戶申請權限函數，僅在Notification.permission狀態爲default時候生效。其餘狀態瀏覽器爲了友好的用戶體驗不會再向用戶請求權限，用戶若是想要修改權限須要手動設置權限。
  Notification.requestPermission有兩種寫法：

  • 對於比較新的瀏覽器，使用基於promise的語法

    Notification.requestPermission().then(function(permission) { ... });

  • 對於比較舊的瀏覽器，使用回調函數(Safari某些較新版本也須要使用回調函數)

    Notification.requestPermission(callback);

• Notification 實例經常使用屬性

  首先這裏是一個簡單的Notification實例：

  var notification = new Notification(title, {
                                          body: '...',
                                          icon: '...',
                                          sound :'...'
                                      });

  Notification.title 消息的主題
  
  Notification.icon 消息體的圖標
  
  Notification.body 消息體的內容
  
  Notification.sound 消息體提示的聲音（支持性很低）
  

• Notification 實例相關事件

  Notification.onclick<br>
    Notification.onerror<br>
    Notification.onclose<br>
    Notification.onshow<br>

• 一個demo的代碼

if (window.Notification) {
                
                    var ua = navigator.userAgent.toLowerCase();
                    if (ua.indexOf('safari') != -1) {
                        if (ua.indexOf('chrome') > -1) {
                            // Chrome
                            Notification.requestPermission().then(function(permission) {
                                if (permission == "granted") {
                                    var notification = new Notification('桌面推送', {
                                        body: '這是個人第一條桌面推送',
                                        icon: 'some/icon/url'
                                    });

                                    notification.onclick = function() {

                                        console.log('點擊');
                                        notification.close();
                                    };
                                } else {
                                    Notification.requestPermission();
                                    console.log('沒有權限,用戶拒絕:Notification');
                                }
                            });
                        } else {
                            // Safari
                            Notification.requestPermission(function(permission) {
                                if (permission == "granted") {
                                    var notification = new Notification('桌面推送', {
                                        body: '這是個人第一條桌面推送',
                                        icon: 'some/icon/url'
                                    });

                                    notification.onclick = function() {

                                        console.log('點擊');
                                        notification.close();
                                    };
                                } else {
                                    Notification.requestPermission();
                                    console.log('沒有權限,用戶拒絕:Notification');
                                }
                            })
                        }
                    }

                
            } else {
                console.log('不支持Notification');
            }

手動設置權限

chrome用戶請在 "設置->隱私設置->內容設置－>通知"選擇網站域名點擊容許 其餘瀏覽器相似，請本身google