PWA之消息推送——Notification

原文

　　簡書原文：https://www.jianshu.com/p/69042b92cae1

大綱

　　一、推送通知的概念
　　二、消息推送的知識點
　　三、實例

一、推送通知的概念

　　大部分現代 Web 應用都須要按期更新和與用戶溝通的能力。好比社交媒體、郵件和應用通知都很不錯，但並不老是可以吸引用戶的注意，尤爲是當他們離開網站的時候。
　　這正是推送通知出現的契機。它們是出如今你設備上的有用通知，提示可能對你有用的相關信息。你能夠簡單地滑動或點擊按鈕來關閉它們，或者能夠點擊它們，並當即指向具備相關信息的網頁。傳統上，只有原生應用具備這種超棒的能力，它會利用設備的操做系統併發送推送通知。這也正是 PWA 成爲 Web 顛覆者的切入點。它們有能力接收出如今瀏覽器中的推送通知。
　　推送通知最棒的是即便用戶沒有瀏覽你的網站也會收到這些更新。體驗相似於原生應用，並且即便瀏覽器沒有運行也能夠工做。這使它成爲與用戶互動並將其拉回至 Web 應用的完美方法，即便用戶在一段時間內沒有打開瀏覽器。例如，若是你的網站是個天氣應用，推送通知能夠爲你的用戶提供像「惡劣天氣即未來臨的警告」這樣有用的信息。你甚至能夠安排每週的天氣預報，它們能夠根據用戶訂閱的來發送推送通知，這將有無限的可能性！
　　推送通知是與用戶互動的好方法，即便用戶沒在訪問你的網站或已經關閉了瀏覽器窗口。
　　爲了給用戶發送推送消息，首先須要用戶受權。這爲開發者提供了基於用戶設備和瀏覽器的惟一訂閱詳情。
　　一旦用戶受權了，須要保存他們的訂閱詳情，以便向他們發送消息。

二、消息推送的知識點

2.1. Notification.requestPermission()

　　這是一個靜態方法，做用就是讓瀏覽器出現是否容許通知的提示，window系統Chrome瀏覽器目前的UI效果是這樣的：

　　語法目前有新舊兩種，下面這個是最近規範上更新的基於promise的語法：

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

　　下面這個是基於簡單的回調：

Notification.requestPermission(callback);

　　其中callback是可選參數，根據MDN的說法，Gecko 46開始捨棄了這種語法，可是，我本身使用FireFox 47測試，跑得很正常（有part4的截圖爲證）。難道FireFox的版本號不等同於Gecko的版本號？
　　不管是then中的仍是直接callback函數的參數都是同樣的，表示當前是否容許。只會是granted, denied, 或default.
　　其中granted表示用戶容許通知，denied表示用戶嫌棄你，default表示用戶目前尚未管你。

Notification.requestPermission().then(function(result) {
  // result多是是granted, denied, 或default.
});

2.2. Notification.permission[只讀]

　　這是一個靜態屬性。表示是否容許通知，值就是上面的granted, denied, 或default.
　　默認狀況下，Notification.permission的值是'default':
　　所以，Notification.requestPermission()的回調方法中，能夠不使用result參數，直接使用Notification.permission獲取當前的通知狀態。　

 2.3. new Notification(title, options)

/*
    經過new構造，顯示通知。其中title是必須參數，表示通知小框框的標題內容，
options是可選參數，對象，支持的參數以及釋義見下表：
*/
options
dir
/*
    默認值是auto, 能夠是ltr或rtl，有點相似direction屬性。表示提示主體內容的水平
書寫順序。
*/
lang
/*
    提示的語言。沒看出來有什麼用。你們能夠忽略之~
*/
body
/*
    提示主體內容。字符串。會在標題的下面顯示。比方說上面的「好啊！(害羞.gif)」。
*/
tag
/*
    字符串。標記當前通知的標籤。
*/
icon
/*
    字符串。通知面板左側那個圖標地址。
*/
data
/*
    任意類型和通知相關聯的數據。
*/
vibrate
/*
    通知顯示時候，設備震動硬件須要的振動模式。所謂振動模式，指的是一個描述
交替時間的數組，分別表示振動和不振動的毫秒數，一直交替下去。例如[200, 100, 200]表
示設備振動200毫秒，而後中止100毫秒，再振動200毫秒。
*/
renotify
/*
    布爾值。新通知出現的時候是否替換以前的。若是設爲true，則表示替換，表示當前標記
的通知只會出現一個。注意都這裏「當前標記」沒？沒錯，true參數要想其做用，必須tag須要
設置屬性值。而後，通知就會像這樣覆蓋：
    
    而不會是默認的疊高樓：
*/
silent
/*
    布爾值。通知出現的時候，是否要有聲音。默認false, 表示無聲。
*/
sound
/*
    字符串。音頻地址。表示通知出現要播放的聲音資源。
*/
noscreen
/*
    布爾值。是否再也不屏幕上顯示通知信息。默認false, 表示要在屏幕上顯示通知內容。
*/
sticky
/*
    布爾值。是否通知具備粘性，這樣用戶不太容易清除通知。默認false, 表示沒有粘性。
根據我本身的猜想，應該和position的sticky屬性值相似。
*/

2.4. Notification.close()

　　通知顯示了，如何關閉呢？能夠經過調用Notification.close()實例方法實現關閉

三、實例

/*
得到權限
這行代碼在這裏不起做用，由於能夠經過permission來判斷是否具備權限，固然能夠經過這
個方式來人爲獲取權限，而後再根據使用者的行爲來判斷是否繼續進行以後的代碼，畢竟默認
的權限是default
var reqPermission = Notification.requestPermission();
點擊按鈕
*/
document.querySelector('#button').addEventListener('click', function () {
    if (Notification.permission == "granted") {
        var notification = new Notification("Hi，帥哥：", {
            body: '能夠加你爲好友嗎？',
            icon: './images/icon-1.png'
        });
        var text = document.querySelector('#text');
        notification.onclick = function() {
            text.innerHTML = '張小姐已於' + new Date().toTimeString().split(' ')[0] + '加你爲好友！';
            notification.close();    
        };
        setTimeout(function(){
            notification.close(); 
        },5000);
    }else {
        alert('bye bye');
    }  
});

參考網址

　　http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/