HTML5 Web Notifications 桌面推送小記

GabrielChenCN發表於2016-09-21
HTMLWeb

目錄

簡介

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

相關文章