聊聊HTML5中的Web Notification桌面通知

時間 2019-11-30

標籤聊聊 html5 html web notification 桌面通知欄目 HTML5 简体版

原文原文鏈接

有的時候咱們會在桌面右下角看到這樣的提示：html

這種桌面提示是HTML5新增的 Web Push Notifications 技術。瀏覽器

Web Notifications 技術使頁面能夠發出通知，通知將被顯示在頁面以外的系統層面上。可以爲用戶提供更好的體驗，即便用戶忙於其餘工做時也能夠收到來自頁面的消息通知，例如一個新郵件的提醒，或者一個在線聊天室收到的消息提醒等等。安全

PS：除了IE外，各大現代瀏覽器都對這個桌面推送有了基本的支持。服務器

開始

要建立一個消息通知，很是簡單，直接使用 window 對象下面的Notification類便可，代碼以下：函數

var n = new Notification("桌面推送", {
    icon: 'img/icon.png',
    body: '這是個人第一條桌面通知。',
    image:'img/1.jpg'
});

因而你就會看到系統桌面彈出我上面那張截圖的通知。ui

PS：消息通知只有經過Web服務訪問該頁面時纔會生效，若是直接雙擊打開本地文件，是沒有任何效果的。也就是說你的文件須要使用服務器的形式打開，而不是直接使用瀏覽器打開本地文件。code

固然也有可能你什麼都沒看到，彆着急繼續往下看。htm

基本語法

固然在想要彈出上面通知以前，有必要了解一下一個通知的基本語法：對象

let myNotification = new Notification(title, options);

title：定義一個通知的標題，當它被觸發時，它將顯示在通知窗口的頂部。blog

options（可選）對象包含應用於通知的任何自定義設置選項。

經常使用的選項有：

body: 通知的正文，將顯示在標題下方。
tag: 相似每一個通知的ID，以便在必要的時候對通知進行刷新、替換或移除。
icon: 顯示通知的圖標
image: 在通知正文中顯示的圖像的URL。
data: 您想要與通知相關聯的任意數據。這能夠是任何數據類型。
renotify: 一個 Boolean 指定在新通知替換舊通知後是否應通知用戶。默認值爲false，這意味着它們不會被通知。
requireInteraction: 表示通知應保持有效，直到用戶點擊或關閉它，而不是自動關閉。默認值爲false。

當這段代碼執行時，瀏覽器會詢問用戶，是否容許該站點顯示消息通知，以下圖所示：

只有用戶點擊了容許，受權了通知，通知纔會被顯示出來。

受權

如何獲取到用戶點擊的是「容許」仍是「阻止」呢？

window的 Notification實例有一個 requestPermission 函數用來獲取用戶的受權狀態：

// 首先，咱們檢查是否具備權限顯示通知
  // 若是沒有，咱們就申請權限
  if (window.Notification && Notification.permission !== "granted") {
      Notification.requestPermission(function (status) {
      //status是受權狀態。
      //若是用戶點擊的容許，則status爲'granted'
      // 若是用戶點擊的禁止，則status爲'denied'
     
      // 這將使咱們能在 Chrome/Safari 中使用 Notification.permission
      if (Notification.permission !== status) {
        Notification.permission = status;
      }
    });
  }

注意：若是用戶點擊了受權右上角的關閉按鈕，則status的值爲default。

以後，咱們只須要判斷 status 的值是否爲granted，來決定是否顯示通知。

通知事件

可是單純的顯示一個消息框是沒有任何吸引力的，因此消息通知應該具備必定的交互性，在顯示消息的前先後後都應該有事件的參與。

Notification一開始就制定好了一系列事件函數，開發者能夠很方面的使用這些函數處理用戶交互：

有：onshow,onclick,onerror,onclose。

var n = new Notification("桌面推送", {
    icon: 'img/icon.png',
    body: '這是個人第一條桌面通知。'
});
 
//onshow函數在消息框顯示時觸發
//能夠作一些數據記錄及定時關閉消息框等
n.onshow = function() {
    console.log('顯示消息框');
    //5秒後關閉消息框
    setTimeout(function() {
        n.close();
    }, 3000);
};
 
//消息框被點擊時被調用
//能夠打開相關的視圖，同時關閉該消息框等操做
n.onclick = function() {
    console.log('點擊消息框');
    // 打開相關的視圖
    n.close();
};
 
//當有錯誤發生時會onerror函數會被調用
//若是沒有granted受權，建立Notification對象實例時，也會執行onerror函數
n.onerror = function() {
    console.log('消息框錯誤');
    // 作些其餘的事
};
 
//一個消息框關閉時onclose函數會被調用
n.onclose = function() {
    console.log('關閉消息框');
    //作些其餘的事
};

一個簡單的例子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <button>點擊發起通知</button>
  </body>
  <script>
    window.addEventListener("load", function() {
      // 首先，讓咱們檢查咱們是否有權限發出通知
      // 若是沒有，咱們就請求得到權限
      if (window.Notification && Notification.permission !== "granted") {
        Notification.requestPermission(function(status) {
          if (Notification.permission !== status) {
            Notification.permission = status;
          }
        });
      }

      var button = document.getElementsByTagName("button")[0];

      button.addEventListener("click", function() {
        // 若是用戶贊成就建立一個通知
        if (window.Notification && Notification.permission === "granted") {
          var n = new Notification("Hi！");
        }

        // 若是用戶沒有選擇是否顯示通知
        // 注：由於在 Chrome 中咱們沒法肯定 permission 屬性是否有值，所以
        // 檢查該屬性的值是不是 "default" 是不安全的。
        else if (window.Notification && Notification.permission !== "denied") {
          Notification.requestPermission(function(status) {
            if (Notification.permission !== status) {
              Notification.permission = status;
            }

            // 若是用戶贊成了
            if (status === "granted") {
              var n = new Notification("Hi!");
            }

            // 不然，咱們可讓步的使用常規模態的 alert
            else {
              alert("Hi!");
            }
          });
        }

        // 若是用戶拒絕接受通知
        else {
          // 咱們可讓步的使用常規模態的 alert
          alert("Hi!");
        }
      });
    });
  </script>
</html>

當咱們打開界面的時候，就會彈出受權申請，若是咱們點擊容許，而後點擊按鈕，就能夠發送一條通知到桌面，咱們就能夠在桌面右下角看到這條通知。

上面咱們只是顯示一條消息。

if (status === "granted") {
  var n = new Notification("Hi");
}

若是咱們有不少消息的話，好比我是用個for循環來模擬大量通知的狀況。

for(var i=0; i<10; i++) {
    var n = new Notification("Hi,"+i);
}

能夠看到有10條通知都顯示出來。可是某些狀況下對於用戶來講，顯示大量通知是件使人痛苦的事情。

好比，若是一個即時通訊應用向用戶提示每一條傳入的消息。爲了不數以百計的沒必要要通知鋪滿用戶的桌面，可能須要接管一個掛起消息的隊列。

所以，須要爲新建的通知添加一個標記。

若是有一條新通知和上一條通知具備相同的標記，那麼這條新通知將會替換上一條通知，最後桌面上只會顯示最新的通知。

仍是上面的例子，只須要在觸發通知加個tag屬性便可：

for (var i = 0; i < 10; i++) {
   // 最後只看到內容爲 "Hi! 9" 的通知
    var n = new Notification("Hi! " + i, {tag: 'soManyNotification'});
}

最後

消息通知是個不錯的特性，但是也不排除有些站點惡意的使用這個功能，一旦用戶受權以後，不時的推送一些不太友好的消息，打擾用戶的工做，這個時候咱們能夠移除該站點的權限，禁用其消息通知功能。

咱們能夠點擊瀏覽器地址輸入框左邊的歎號就有一個通知的選項，咱們能夠修改受權。或者在通知頁面也有修改通知的選項，能夠根據具體狀況進行修改受權通知。

因而最基本的 Web Notification 就實現了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。