資訊專欄INFORMATION COLUMN
摘要：原文譯文的消息通知機(jī)制譯者已經(jīng)被應(yīng)用到開發(fā)中。所以先要征求用戶的許可而不是直接顯示通知。然后，獲取用戶許可之后，我們可以顯示兩種類型的信息最后執(zhí)行通知代碼。
原文：HTML 5 Notification
譯文：HTML 5 的消息通知機(jī)制
譯者：dwqs
HTML 5 已經(jīng)被應(yīng)用到Web開發(fā)中。跟平常一樣，任何一個(gè)軟件新版本的發(fā)布都期待一些新的特性，這對(duì)HTML 5也不例外。為了僅僅通過(guò)HTML提高用戶交互，HTML 5已經(jīng)提供了很多新的API。
是不是非常有趣呢？并且HTML 5已經(jīng)和CSS 3結(jié)合的非常棒了。
因此，我也開始寫一系列與HTML 5的API相關(guān)的文章來(lái)介紹API的使用和功能，例如Geolocation, Notification, File, 等等，第一篇文章是和Notification API相關(guān)。
首先要意識(shí)到是，HTML 5的特性和API僅能在支持HTML 5的瀏覽器中正常使用，如果瀏覽器不支持HTML 5，就不能使用HTML 5在網(wǎng)頁(yè)中實(shí)現(xiàn)任何一個(gè)功能了?，F(xiàn)在就來(lái)了解一下notification API吧。
什么是HTML 消息通知？HTML消息通知是指我們可以告訴用戶一個(gè)確定的事件行為，即使此時(shí)用戶在瀏覽器的另一個(gè)選項(xiàng)卡。這個(gè)通知對(duì)于New Mail, New Tweet等事件是非常有用的。
怎么使用？要使用Notification API，有幾個(gè)步驟：首先，要從用戶那里獲取顯示通知的許可，只有當(dāng)用戶允許時(shí)，才能顯示通知給用戶。所以先要征求用戶的許可而不是直接顯示通知。然后，
獲取用戶許可之后，我們可以顯示兩種類型的信息：
Normal/Default Notification
HTML Notification
最后執(zhí)行通知代碼。
我已經(jīng)創(chuàng)建了一個(gè)顯示通知的JavaScript函數(shù)，注意：函數(shù)僅限用于這篇文章，因?yàn)橛泻芏喾N方式可以按照每個(gè)人的需求去擴(kuò)展。
HTML：
DemoShow 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： live demo （ps：用Web Kit瀏覽器打開，此文寫于2012.04）
總結(jié)HTML 5 notification適用于像Google Chrome一樣的Web Kit瀏覽器，對(duì)于HTML 5 notification，Mozilla Firefox有其自己的私有屬性。我將在其它文章中介紹。
原文首發(fā)：http://www.ido321.com/1130.html
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/49555.html
摘要：而回調(diào)函數(shù)通常只是提供給其它模塊進(jìn)行調(diào)用，為了簡(jiǎn)化編碼，后續(xù)的等腳本語(yǔ)言中提供了對(duì)匿名函數(shù)的支持。當(dāng)使用回調(diào)函數(shù)時(shí)，通常會(huì)涉及到一些上下文的傳遞。 嚴(yán)格來(lái)說(shuō)，這不能算是一篇微信小程序教程，不過(guò)會(huì)使用到上一篇中的app.js代碼作為示例，姑且充個(gè)數(shù)吧。 回調(diào)函數(shù) 回調(diào)函數(shù)，對(duì)于初入編程這一行的同學(xué)可能會(huì)有些難以理解，畢竟回調(diào)函數(shù)的使用和程序順序執(zhí)行的直觀流程是相悖的。 想象你定了一個(gè)外賣...
摘要：作為開發(fā)同學(xué)的小伙伴客戶端的瀏覽器，有點(diǎn)小調(diào)皮還做了一個(gè)同源策略的限制，當(dāng)我們的數(shù)據(jù)請(qǐng)求遇到不同源的情況下跨域，我們就得嘗試其它的通信方法，不能一條道走到黑。 showImg(https://segmentfault.com/img/bVburZO?w=600&h=450); Web2.0以來(lái)，Ajax的出世，解決了傳統(tǒng)表單提交頁(yè)面跳轉(zhuǎn)，閃爍白屏等問(wèn)題。使得Web頁(yè)面可以實(shí)現(xiàn)局部更新，...
摘要：提出標(biāo)準(zhǔn)，允許腳本創(chuàng)建多個(gè)線程，但是子線程完全受主線程控制，且不得操作。所以，這個(gè)新標(biāo)準(zhǔn)并沒(méi)有改變單線程的本質(zhì)。事件循環(huán)主線程線程只會(huì)做一件事，就是從消息隊(duì)列里面取消息執(zhí)行消息，再取消息再執(zhí)行。工作線程是生產(chǎn)者，主線程是消費(fèi)者。 最近項(xiàng)目中遇到了一個(gè)場(chǎng)景，其實(shí)很常見(jiàn)，就是定時(shí)獲取接口刷新數(shù)據(jù)。那么問(wèn)題來(lái)了，假設(shè)我設(shè)置的定時(shí)時(shí)間為1s，而數(shù)據(jù)接口返回大于1s，應(yīng)該用同步阻塞還是異步？我們...
閱讀 5108·2021-10-13 09:39
閱讀 1996·2019-08-29 11:12
閱讀 1185·2019-08-28 18:16
閱讀 1899·2019-08-26 12:16
閱讀 1283·2019-08-26 12:13
閱讀 3025·2019-08-26 10:59
閱讀 2346·2019-08-23 18:27
閱讀 3025·2019-08-23 18:02
