html5消息通知怎么實(shí)現(xiàn)？實(shí)現(xiàn)方法分享！

在我們?nèi)粘５闹杏袨g覽各種應(yīng)用或者網(wǎng)頁(yè)的小伙伴們都會(huì)收到很多消息通知，那么今天我們就來(lái)講講關(guān)于：“html5消息通知怎么實(shí)現(xiàn)？實(shí)現(xiàn)方法分享！ ”這個(gè)問(wèn)題的相關(guān)內(nèi)容。 

一、先睹為快

我們先來(lái)嘗試一個(gè)最簡(jiǎn)單的例子，打開 chrome 開發(fā)者工具，粘貼代碼進(jìn)去直接運(yùn)行：

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

并沒有出現(xiàn)什么消息通知，怎么回事？不要著急，接著往下看。

二、用戶授權(quán)

按照上面的示例，我們運(yùn)行了，但是并沒有成功調(diào)起消息推送框。這時(shí)候需要查看一下是否用戶授權(quán)，控制臺(tái)輸入： > Notification.permission

很快我們就會(huì)發(fā)現(xiàn)，原來(lái)用戶許可是 default ，因?yàn)椴恢烙脩舻倪x擇，所以瀏覽器的行為與 denied 時(shí)相同，即為拒絕。

三、兼容性

看到這些 HTML5 的高級(jí) API ，總是會(huì)有一些顧慮。例子雖好，用起來(lái)也很方便，但是到底兼容性如何，這是一個(gè)值得思考的問(wèn)題。

可以看到，基本上所有瀏覽器都支持了，除了 iOS Safari 和 Opera Mini ，所以移動(dòng)端應(yīng)用需謹(jǐn)慎。

四、API 文檔

我們先來(lái)系統(tǒng)性的梳理一下 API，很簡(jiǎn)單，花 5 分鐘過(guò)一下。

用例：

let notification = new Notification(title, options)

參數(shù)：

title：一定會(huì)被顯示的通知標(biāo)題

options：一個(gè)被允許用來(lái)設(shè)置通知的對(duì)象。它包含以下屬性：

• dir : 文字的方向；它的值可以是 auto （自動(dòng)）, ltr （從左到右）, or rtl （從右到左）
• lang: 指定通知中所使用的語(yǔ)言。這個(gè)字符串必須在 BCP 47 language tag 文檔中是有效的。
• body: 通知中額外顯示的字符串
• tag: 賦予通知一個(gè) ID ，以便在必要的時(shí)候?qū)νㄖM(jìn)行刷新、替換或移除。
• icon: 一個(gè)圖片的 URL ，將被用于顯示通知的圖標(biāo)。

屬性：

Notification.permission: 一個(gè)用于表明當(dāng)前通知顯示授權(quán)狀態(tài)的字符串?？赡艿闹蛋ǎ?/p>

• denied (用戶拒絕了通知的顯示),
• granted (用戶允許了通知的顯示),
• default (因?yàn)椴恢烙脩舻倪x擇，所以瀏覽器的行為與 denied 時(shí)相同)

方法：

• Notification.onclick：處理 click 事件的處理，每當(dāng)用戶點(diǎn)擊通知時(shí)被觸發(fā)。
• Notification.onshow：處理 show 事件的處理，當(dāng)通知顯示的時(shí)候被觸發(fā)。
• Notification.onerror：處理 error 事件的處理，每當(dāng)通知遇到錯(cuò)誤時(shí)被觸發(fā)。
• Notification.onclose：處理 close 事件的處理，當(dāng)用戶關(guān)閉通知時(shí)被觸發(fā)。
• Notification.requestPermission()：用于當(dāng)前頁(yè)面想用戶申請(qǐng)顯示通知的權(quán)限。
• Notification.close()：用于關(guān)閉通知。

Notification.requestPermission 這個(gè)方法只能被用戶行為調(diào)用（比如：onclick 事件），并且不能被其他的方式調(diào)用。

五、完整示例

按照上面 API ，我們來(lái)寫一個(gè)完整的示例：

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!");
  }

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


  // 最后，如果執(zhí)行到這里，說(shuō)明用戶已經(jīng)拒絕對(duì)相關(guān)通知進(jìn)行授權(quán)
  // 出于尊重，我們不應(yīng)該再打擾他們了
}

那么通過(guò)這篇小編收集整理的文章內(nèi)容相信大家對(duì)于：“html5消息通知怎么實(shí)現(xiàn)？實(shí)現(xiàn)方法分享！ ”這個(gè)問(wèn)題的相關(guān)內(nèi)容就有所了解了吧！當(dāng)然在html5中的問(wèn)題和相關(guān)使用內(nèi)容方法不止如此，更多的相關(guān)內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解。