HTML5之消息通知的使用(Web Notification)

  發布時間:2018-10-30 15:38:29   作者:Jartto's blog   我要評論

通知可以說是web中比較常見且重要的功能,私信、在線提問、或者一些在線即時通訊工具我們總是希望第一時間知道對方有了新的反饋。本篇文章主要介紹了HTML5之消息通知的使用(Web Notification),感興趣的小伙伴們可以參考一下

關于 HTML5 ,寫了不少文章,總覺得相關的高級 API 都得過一遍。系統的了解,站在更高的高度去思考問題,這樣才能事半功倍。

一、先睹為快

我們先來嘗試一個最簡單的例子,打開 chrome 開發者工具,粘貼代碼進去直接運行:

new Notification('Jartto\'s 消息通知', {
  dir: 'rtl',
  body: '這是一個消息,通過 Web Notification 發送,作為測試!',
  icon: 'https://raw.githubusercontent.com/chenfengyanyu/my-web-accumulation/master/images/logo.jpeg'
})

并沒有出現什么消息通知,怎么回事?不要著急,接著往下看。

二、用戶授權

按照上面的示例,我們運行了,但是并沒有成功調起消息推送框。這時候需要查看一下是否用戶授權,控制臺輸入: > Notification.permission

很快我們就會發現,原來用戶許可是 default ,因為不知道用戶的選擇,所以瀏覽器的行為與 denied 時相同,即為拒絕。

三、兼容性

看到這些 HTML5 的高級 API ,總是會有一些顧慮。例子雖好,用起來也很方便,但是到底兼容性如何,這是一個值得思考的問題。

可以看到,基本上所有瀏覽器都支持了,除了 iOS SafariOpera Mini ,所以移動端應用需謹慎。

四、API 文檔

我們先來系統性的梳理一下 API,很簡單,花 5 分鐘過一下。

用例:

let notification = new Notification(title, options)

參數:

title:一定會被顯示的通知標題

options:一個被允許用來設置通知的對象。它包含以下屬性:

  • dir : 文字的方向;它的值可以是 auto (自動), ltr (從左到右), or rtl (從右到左)
  • lang: 指定通知中所使用的語言。這個字符串必須在 BCP 47 language tag 文檔中是有效的。
  • body: 通知中額外顯示的字符串
  • tag: 賦予通知一個 ID ,以便在必要的時候對通知進行刷新、替換或移除。
  • icon: 一個圖片的 URL ,將被用于顯示通知的圖標。

屬性:

Notification.permission: 一個用于表明當前通知顯示授權狀態的字符串。可能的值包括:

  • denied (用戶拒絕了通知的顯示),
  • granted (用戶允許了通知的顯示),
  • default (因為不知道用戶的選擇,所以瀏覽器的行為與 denied 時相同)

方法:

  • Notification.onclick:處理 click 事件的處理,每當用戶點擊通知時被觸發。
  • Notification.onshow:處理 show 事件的處理,當通知顯示的時候被觸發。
  • Notification.onerror:處理 error 事件的處理,每當通知遇到錯誤時被觸發。
  • Notification.onclose:處理 close 事件的處理,當用戶關閉通知時被觸發。
  • Notification.requestPermission():用于當前頁面想用戶申請顯示通知的權限。
  • Notification.close():用于關閉通知。

Notification.requestPermission 這個方法只能被用戶行為調用(比如:onclick 事件),并且不能被其他的方式調用。

五、完整示例

按照上面 API ,我們來寫一個完整的示例:

function notifyMe(){
  // 先檢查瀏覽器是否支持
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }

  // 檢查用戶是否同意接受通知
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
    var notification = new Notification("Hi there!");
  }

  // 否則我們需要向用戶獲取權限
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission){
      // 如果用戶同意,就可以向他們發送通知
      if (permission === "granted") {
        var notification = new Notification("Hi there!");
      }
    });
  }


  // 最后,如果執行到這里,說明用戶已經拒絕對相關通知進行授權
  // 出于尊重,我們不應該再打擾他們了
}

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

最新評論

时时彩包赢公式0369