原文：HTML 5 Notification
譯文：HTML 5 的消息通知機制
譯者：dwqs
HTML 5 已經(jīng)被應(yīng)用到Web開發(fā)中。跟平常一樣，任何一個軟件新版本的發(fā)布都期待一些新的特性，這對HTML 5也不例外。為了僅僅通過HTML提高用戶交互，HTML 5已經(jīng)提供了很多新的API。
是不是非常有趣呢？并且HTML 5已經(jīng)和CSS 3結(jié)合的非常棒了。
因此，我也開始寫一系列與HTML 5的API相關(guān)的文章來介紹API的使用和功能，例如Geolocation, Notification, File, 等等，第一篇文章是和Notification API相關(guān)。
首先要意識到是，HTML 5的特性和API僅能在支持HTML 5的瀏覽器中正常使用，如果瀏覽器不支持HTML 5，就不能使用HTML 5在網(wǎng)頁中實現(xiàn)任何一個功能了。現(xiàn)在就來了解一下notification API吧。
什么是HTML 消息通知？
HTML消息通知是指我們可以告訴用戶一個確定的事件行為，即使此時用戶在瀏覽器的另一個選項卡。這個通知對于New Mail, New Tweet等事件是非常有用的。
怎么使用？
要使用Notification API，有幾個步驟：首先，要從用戶那里獲取顯示通知的許可，只有當(dāng)用戶允許時，才能顯示通知給用戶。所以先要征求用戶的許可而不是直接顯示通知。然后，
獲取用戶許可之后，我們可以顯示兩種類型的信息：
Normal/Default Notification
HTML Notification
最后執(zhí)行通知代碼。
我已經(jīng)創(chuàng)建了一個顯示通知的JavaScript函數(shù)，注意：函數(shù)僅限用于這篇文章，因為有很多種方式可以按照每個人的需求去擴展。
HTML：
JavaScript復(fù)制代碼
- <h2>Show Normal Notification</h2>
- <button class="btn btn-success" id="show_notification">
- Normal Notification
- </button>
- <h2>Show HTML Notification</h2>
- <button class="btn btn-success" id="show_html_notification">
- HTML Notification
- </button>
復(fù)制代碼
- // 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）
總結(jié)
HTML 5 notification適用于像Google Chrome一樣的Web Kit瀏覽器，對于HTML 5 notification，Mozilla Firefox有其自己的私有屬性。我將在其它文章中介紹。
【網(wǎng)站聲明】本站除付費源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。