【譯】雜談：HTML 5的消息通知機制

付倫發布于2019-08-01 14:44 / 1807人閱讀

摘要：原文譯文的消息通知機制譯者已經被應用到開發中。所以先要征求用戶的許可而不是直接顯示通知。然后，獲取用戶許可之后，我們可以顯示兩種類型的信息最后執行通知代碼。

原文：HTML 5 Notification

譯文：HTML 5 的消息通知機制

譯者：dwqs

HTML 5 已經被應用到Web開發中。跟平常一樣，任何一個軟件新版本的發布都期待一些新的特性，這對HTML 5也不例外。為了僅僅通過HTML提高用戶交互，HTML 5已經提供了很多新的API。

是不是非常有趣呢？并且HTML 5已經和CSS 3結合的非常棒了。

因此，我也開始寫一系列與HTML 5的API相關的文章來介紹API的使用和功能，例如Geolocation, Notification, File, 等等，第一篇文章是和Notification API相關。

首先要意識到是，HTML 5的特性和API僅能在支持HTML 5的瀏覽器中正常使用，如果瀏覽器不支持HTML 5，就不能使用HTML 5在網頁中實現任何一個功能了。現在就來了解一下notification API吧。

什么是HTML 消息通知？

HTML消息通知是指我們可以告訴用戶一個確定的事件行為，即使此時用戶在瀏覽器的另一個選項卡。這個通知對于New Mail, New Tweet等事件是非常有用的。

怎么使用？

要使用Notification API，有幾個步驟：首先，要從用戶那里獲取顯示通知的許可，只有當用戶允許時，才能顯示通知給用戶。所以先要征求用戶的許可而不是直接顯示通知。然后，

獲取用戶許可之后，我們可以顯示兩種類型的信息：

    Normal/Default Notification
    HTML Notification

最后執行通知代碼。

我已經創建了一個顯示通知的JavaScript函數，注意：函數僅限用于這篇文章，因為有很多種方式可以按照每個人的需求去擴展。

HTML：

Show Normal Notification


Show HTML Notification


JavaScript

// Function to show Notification
function createNotification(type)
{
   if(type ==  "")
     type = "normal";

   if(type != "html")
   {
    var title ="You have received HTML 5 Notification";
    var msg="Content Goes Here......";
    var notification = window.Notifications.createNotification("1.png", title, msg);
   }
   else
   {
     var notification = window.Notifications.createHTMLNotification("content.html");
   }
   notification.show();
}

// Binding the Click event on buttons.

$(document).ready(function ()
{        
  if (window.webkitNotifications)
  {
   window.Notifications = window.webkitNotifications;
   $("#show_notification").click(function ()
   {
     if (window.Notifications.checkPermission() == 0)
     {
       createNotification("normal");
     }
     else
     {
       window.Notifications.requestPermission();
     }
   });

   $("#show_html_notification").click(function ()
   {
    if (window.Notifications.checkPermission() == 0)
    {
       createNotification("html");
    }
    else
    {
       window.Notifications.requestPermission();
    }
   });
  }    
  else
  {
   alert("HTML 5 Notifications are not supported on this browser/OS.");
  }
});

Demo

查看Demo： live demo （ps：用Web Kit瀏覽器打開，此文寫于2012.04）

總結

HTML 5 notification適用于像Google Chrome一樣的Web Kit瀏覽器，對于HTML 5 notification，Mozilla Firefox有其自己的私有屬性。我將在其它文章中介紹。

原文首發：http://www.ido321.com/1130.html

云服務器 GPU云服務器 IOS消息通知機制消息機制消息發送機制消息推送機制

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49555.html

微信小程序開發教程(基礎篇)4-關于回調函數，匿名函數，閉包的雜談

摘要：而回調函數通常只是提供給其它模塊進行調用，為了簡化編碼，后續的等腳本語言中提供了對匿名函數的支持。當使用回調函數時，通常會涉及到一些上下文的傳遞。嚴格來說，這不能算是一篇微信小程序教程，不過會使用到上一篇中的app.js代碼作為示例，姑且充個數吧。回調函數回調函數，對于初入編程這一行的同學可能會有些難以理解，畢竟回調函數的使用和程序順序執行的直觀流程是相悖的。想象你定了一個外賣...

shixinzhang 2019-08-20 12:25 評論0 收藏0
雜談：前端Web通信

摘要：作為開發同學的小伙伴客戶端的瀏覽器，有點小調皮還做了一個同源策略的限制，當我們的數據請求遇到不同源的情況下跨域，我們就得嘗試其它的通信方法，不能一條道走到黑。 showImg(https://segmentfault.com/img/bVburZO?w=600&h=450); Web2.0以來，Ajax的出世，解決了傳統表單提交頁面跳轉，閃爍白屏等問題。使得Web頁面可以實現局部更新，...

Betta 2019-08-23 10:29 評論0 收藏0
從setTimeout-setInterval看JS線程

摘要：提出標準，允許腳本創建多個線程，但是子線程完全受主線程控制，且不得操作。所以，這個新標準并沒有改變單線程的本質。事件循環主線程線程只會做一件事，就是從消息隊列里面取消息執行消息，再取消息再執行。工作線程是生產者，主線程是消費者。最近項目中遇到了一個場景，其實很常見，就是定時獲取接口刷新數據。那么問題來了，假設我設置的定時時間為1s，而數據接口返回大于1s，應該用同步阻塞還是異步？我們...

elliott_hu 2019-08-22 15:22 評論0 收藏0