PWA之消息推送——Notification

原文

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

大綱

　　1、推送通知的概念
　　2、消息推送的知識點
　　3、實例

1、推送通知的概念

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

2、消息推送的知識點

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()實例方法實現關閉

3、實例

/*
獲得權限
這行代碼在這里不起作用，因為可以通過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/