如何使用 HTML5 的 Notification API 如何使用 HTML5 的 Notification API
Notification API
在 Notification API 中會(huì)用到兩個(gè)對(duì)象，第一個(gè)就是 notification 對(duì)象。
這就是notification需要使用到的接口，它有2個(gè)方法和相關(guān)的4個(gè)屬性。
Notification 方法
用來(lái)顯示和隱藏提示框的方法：
Show - 該方法用來(lái)顯示一個(gè)提醒
Cancel - 該方法用來(lái)移除提醒，如果提醒當(dāng)前被現(xiàn)實(shí)則會(huì)被隱藏，如果還未被顯示，則將被阻止顯示。
Notification 屬性
通知屬性用作事件監(jiān)聽(tīng)器，監(jiān)聽(tīng)提醒中的不同事件：
ondisplay - 當(dāng) notification 被顯示時(shí)調(diào)用
onerror - 當(dāng) notification 出現(xiàn)錯(cuò)誤時(shí)調(diào)用
onclose - 當(dāng) notification 關(guān)閉時(shí)調(diào)用
onclick - 當(dāng)提示框被點(diǎn)擊時(shí)調(diào)用
第二個(gè)需要的就是 NotificationCenter 接口。
Notification center 用來(lái)創(chuàng)建 notification 對(duì)象，并檢查當(dāng)前頁(yè)面是否有顯示該對(duì)象的權(quán)限。
使用 Notification center 時(shí)需要用到4個(gè)方法：
createNotification - 如果 notification 有權(quán)限被顯示，呢么該方法將會(huì)創(chuàng)建一個(gè) notification 對(duì)象，并為其填充相關(guān)的內(nèi)容。如果頁(yè)面沒(méi)有允許 notification ，那么將拋出一個(gè)安全異常。
createHTMLNotification - 該方法類似于 createNotification ，若頁(yè)面有權(quán)限顯示 notification 它會(huì)返回一個(gè)相關(guān)的對(duì)象。該方法使用了一個(gè) URL 參數(shù)來(lái)加載要顯示的 HTML 內(nèi)容。
checkPermission - 該方法返回該頁(yè)面使用 notification 的整形權(quán)限值。PERMISSION_ALLOWED = 0, PERMISSION_NOT_ALLOWED = 1, 或者 PERMISSION_DENIED = 2
requestPermission - 該方法將向用戶請(qǐng)求詢問(wèn)顯示提示框的權(quán)限。
檢查瀏覽器是否支持 Notification
當(dāng)你準(zhǔn)備用 notification API 做點(diǎn)什么之前，你需要先檢查瀏覽器是否支持，你可以使用一下代碼來(lái)檢查：
獲得顯示權(quán)限
顯示一個(gè)提醒之前你需要得到用戶的允許，獲得此權(quán)限你需要做的就是使用 requestPermission() 方法：
顯示純文本提示框
創(chuàng)建一個(gè)顯示純文本的提示框前你需要檢查是否有權(quán)限顯示。如果有權(quán)限我們就能使用createNotification()方法創(chuàng)建一個(gè)新的 notification 了，使用 createNotification() 傳遞圖片、標(biāo)題以及描述信息3參數(shù)即可。
顯示 HTM L 提醒框
在顯示之前我們也需要檢查顯示權(quán)限，如果有權(quán)限，我們可以使用createHTMLNotification(url) 方法創(chuàng)建，傳遞的 url 地址即我們要顯示的頁(yè)面。
HTML5 已經(jīng)不是什么新玩意兒，每個(gè)人都多少聽(tīng)說(shuō)過(guò)一些HTML5的特性。大多數(shù)人認(rèn)為HTML5無(wú)非就是一些像是header, footer, nav, article, section等一樣新的語(yǔ)義標(biāo)簽而已，但是很多人不知道它有很多可以使用的很棒的特性，例如：
•地理定位 API
•HTML5 Details Tag
•HTML5 表單特性
•HTML5 表單驗(yàn)證
•HTML5 Placeholder
本文將向你介紹HTML5帶來(lái)的新特性：Notification API
該特性最有名的運(yùn)用便是在你收到一封 Gmail 時(shí)的提醒，如果你當(dāng)前打開(kāi)了一個(gè) Gmail
的頁(yè)面，你會(huì)在屏幕右下角收到一個(gè)帶標(biāo)題和簡(jiǎn)短信息的彈出框。接下來(lái)將看看怎么才能利用該 API 來(lái)創(chuàng)建自己的提示信息。
瀏覽器支持情況
當(dāng)前只有 Chrome 19+ Safari 6+支持，點(diǎn)擊查看當(dāng)前 Notification API 支持情況
Notification API
在 Notification API 中會(huì)用到兩個(gè)對(duì)象，第一個(gè)就是 notification 對(duì)象。
interface Notification : EventTarget {
// display methods void show();
void cancel();
// event handler attributes attribute Function ondisplay;
attribute Function onerror;
attribute Function onclose;
attribute Function onclick;
}
這就是notification需要使用到的接口，它有2個(gè)方法和相關(guān)的4個(gè)屬性。
Notification 方法
用來(lái)顯示和隱藏提示框的方法：
Show - 該方法用來(lái)顯示一個(gè)提醒
Cancel - 該方法用來(lái)移除提醒，如果提醒當(dāng)前被現(xiàn)實(shí)則會(huì)被隱藏，如果還未被顯示，則將被阻止顯示。
Notification 屬性
通知屬性用作事件監(jiān)聽(tīng)器，監(jiān)聽(tīng)提醒中的不同事件：
ondisplay - 當(dāng) notification 被顯示時(shí)調(diào)用
onerror - 當(dāng) notification 出現(xiàn)錯(cuò)誤時(shí)調(diào)用
onclose - 當(dāng) notification 關(guān)閉時(shí)調(diào)用
onclick - 當(dāng)提示框被點(diǎn)擊時(shí)調(diào)用
第二個(gè)需要的就是 NotificationCenter 接口。
interface NotificationCenter {
// Notification factory methods. Notification createNotification(in DOMString iconUrl, in DOMString title, in DOMString body) throws(Exception);
optional Notification createHTMLNotification(in DOMString url) throws(Exception);
// Permission values const unsigned int PERMISSION_ALLOWED = 0;
const unsigned int PERMISSION_NOT_ALLOWED = 1;
const unsigned int PERMISSION_DENIED = 2;
// Permission methods int checkPermission();
void requestPermission(in Function callback);
} interface Window {
...
attribute NotificationCenter webkitNotifications;
...
}
Notification
center 用來(lái)創(chuàng)建 notification 對(duì)象，并檢查當(dāng)前頁(yè)面是否有顯示該對(duì)象的權(quán)限。
使用 Notification center 時(shí)需要用到4個(gè)方法：
createNotification - 如果 notification 有權(quán)限被顯示，呢么該方法將會(huì)創(chuàng)建一個(gè)
notification 對(duì)象，并為其填充相關(guān)的內(nèi)容。如果頁(yè)面沒(méi)有允許 notification ，那么將拋出一個(gè)安全異常。
createHTMLNotification - 該方法類似于 createNotification
，若頁(yè)面有權(quán)限顯示 notification 它會(huì)返回一個(gè)相關(guān)的對(duì)象。該方法使用了一個(gè) URL 參數(shù)來(lái)加載要顯示的 HTML 內(nèi)容。
checkPermission - 該方法返回該頁(yè)面使用 notification
的整形權(quán)限值。PERMISSION_ALLOWED = 0,
PERMISSION_NOT_ALLOWED = 1, 或者
PERMISSION_DENIED = 2
requestPermission - 該方法將向用戶請(qǐng)求詢問(wèn)顯示提示框的權(quán)限。
檢查瀏覽器是否支持 Notification
當(dāng)你準(zhǔn)備用 notification API 做點(diǎn)什么之前，你需要先檢查瀏覽器是否支持，你可以使用一下代碼來(lái)檢查：
/**
* Check if the browser supports notifications
*
* @return true if browser does support notifications
*/
function browser_support_notification()
{
return window.webkitNotifications;
}
獲得顯示權(quán)限
顯示一個(gè)提醒之前你需要得到用戶的允許，獲得此權(quán)限你需要做的就是使用 requestPermission() 方法：
/**
* Request notification permissions
*/ function request_permission()
{
// 0 means we have permission to display notifications if (window.webkitNotifications.checkPermission() == 0) {
window.webkitNotifications.createNotification();
} else {
window.webkitNotifications.requestPermission();
}
}
顯示純文本提示框
創(chuàng)建一個(gè)顯示純文本的提示框前你需要檢查是否有權(quán)限顯示。如果有權(quán)限就能使用createNotification()方法創(chuàng)建一個(gè)新的
notification 了，使用 createNotification() 傳遞圖片、標(biāo)題以及描述信息3參數(shù)即可。
/**
* Create a plain text notification box
*/ function plain_text_notification(image, title, content)
{
if (window.webkitNotifications.checkPermission() == 0) {
return window.webkitNotifications.createNotification(image, title, content);
}
}
顯示 HTM L 提醒框
在顯示之前我們也需要檢查顯示權(quán)限，如果有權(quán)限，可以使用createHTMLNotification(url) 方法創(chuàng)建，傳遞的 url
地址即要顯示的頁(yè)面。
/**
* Create a notification box with html inside
*/
function html_notification(url)
{
if (window.webkitNotifications.checkPermission() == 0) {
return window.webkitNotifications.createHTMLNotification(url);
}
}
1、webkitNotification
document.getElementById('notifyButton').onclick = function(){
//判斷瀏覽器是否支持notification
if(window.webkitNotifications){
//判斷當(dāng)前頁(yè)面是否被允許發(fā)出通知
if(webkitNotifications.checkPermission==0){
var icon_url = 'http://www.w3.org/';
var title = 'Hello HTML5';
var body = 'I will be always here waiting for you!';
var WebkitNotification = webkitNotifications.createNotification(icon_url, title, body);
WebkitNotification.show();
}else{
document.getElementById('requestbutton').onclick = function () {
webkitNotifications.requestPermission();
};
}
}else alert("您的瀏覽器不支持桌面通知特性，請(qǐng)下載谷歌瀏覽器試用該功能");
};
2 、Notification
document.getElementById('notifyButton').onclick = function () {
if (window.Notification){
if(Notification.Permission==='granted'){
var notification = new Notification('Hello Notification',{body:"I hope that all the browser will support this\ function!"});
}else {
document.getElementById('requestButton').onclick = function (){
Notification.requestPermission();
};
};
}else alert('你的瀏覽器不支持此特性，請(qǐng)下載谷歌瀏覽器試用該功能');
};
在 Notification API 中會(huì)用到兩個(gè)對(duì)象，第一個(gè)就是 notification 對(duì)象。interface Notification : EventTarget { // display methods void show(); void cancel(); // event handler attributes attribute Function ondisplay; attribute Function onerror; attribute Function onclose; attribute Function onclick;}這就是notification需要使用到的接口，它有2個(gè)方法和相關(guān)的4個(gè)屬性。
目前notification的實(shí)現(xiàn)有兩種：一種是之前草案中的形式：webkitNotifications對(duì)象, 另一種就是未來(lái)標(biāo)準(zhǔn)化的形式:Notification對(duì)象。首先來(lái)說(shuō)一下webkitNotifications所包含的內(nèi)容：
3.1 webkitNotifications：
3.1.1. 靜態(tài)方法
1
2
3
4
5
6
window.webkitNotifications.checkPermission()
//該方法返回0, 1, 2三個(gè)值，0代表PERMISSION_ALLOWED,即’允許’；1代表PERMISSION_NOT_ALLOWED，即不允許；2代表PERMISSION_DENIED，即拒絕
window.webkitNotifications.requestPermission()
//調(diào)用該方法將會(huì)在瀏覽器的信息欄彈出一個(gè)是否允許桌面通知的提醒，該方法只能由用戶主動(dòng)事件觸發(fā)，如click 或 mouse over，也就是說(shuō)你不能在document.ready里面直接調(diào)用該方法。
window.webkitNotifications.createNotification('icon-url','title', 'body' )
//調(diào)用該方法將返回一個(gè)實(shí)例化的webkitNotifications對(duì)象
PS:調(diào)用以上方法都會(huì)存在安全異常，也就是當(dāng)前頁(yè)面的permission是否為0。
3.1.2. 實(shí)例方法
1
2
3
4
notificationInstance.show()
//調(diào)用該方法將在右下角彈出一個(gè)通知窗口
notificationInstance.cancel()
//調(diào)用該方法將關(guān)閉通知窗口
3.2 Notification:
在chrome26+ 終端里面輸入window.Notification并鍵入回車鍵，會(huì)發(fā)現(xiàn)這東西它也是存在的，根據(jù)某些博客的說(shuō)法，這個(gè)Notification會(huì)是 webkitNotifications的標(biāo)準(zhǔn)化形態(tài)（傳說(shuō)中的進(jìn)化），這種方式的實(shí)現(xiàn)相對(duì)于webkitNotifications的實(shí)現(xiàn)更簡(jiǎn)潔，更面 向?qū)ο笠恍?構(gòu)造函數(shù)：
1
2
3
4
5
6
7
8
9
10
11
Notification(title, options)
//@param {String} title 要顯示的通知標(biāo)題
//@param {Object} options 備選項(xiàng)參數(shù)，鍵值對(duì)
//option 結(jié)構(gòu)如下
dictionary NotificationOptions {
NotificationDirection dir = "auto";
DOMString lang = "";
DOMString body;
DOMString tag;
DOMString icon;//在實(shí)例化的時(shí)候會(huì)異步的去獲取
};
1
2
//新建一個(gè)Notification實(shí)例,并根據(jù)permission為'granted'來(lái)完成notification的顯示
var notification = new Notification('Hello Notification',{body:"I'm an enginneer!"});
3.2.1. 屬性
靜態(tài)屬性:
Notification.Permission:
'default' 等同于拒絕 'denied' 意味著用戶不想要通知 'granted' 意味著用戶同意啟用通知
Test:在chrome的地址欄里面輸入http://www.baidu.com, 打開(kāi)console，并在里面輸入Notification.Permission 默認(rèn)返回的是'default'.
Notes:該屬性是只讀的不能手動(dòng)修改
1
2
3
//在百度的首頁(yè)打開(kāi)console
Notification.Permission = 'granted'
Notification.Permission //'default'
實(shí)例屬性：
以下屬性都需要在Notification實(shí)例上才能訪問(wèn)，為只讀屬性，并且就是通過(guò)option來(lái)賦值
1
2
3
4
5
Notification.dir //
Notification.lang
Notification.Body //通知的具體內(nèi)容
Notification.tag //實(shí)例化的notification的id
Notification.icon //通知的縮略圖
3.2.2 方法
靜態(tài)方法
Notification.requestPermission() ``` //該方法將會(huì)詢問(wèn)用戶是否允許顯示通知 ``` 該方法不能由頁(yè)面自主調(diào)用，必須由用戶主動(dòng)事件觸發(fā)，還是以百度的頁(yè)面為例，百度的搜索框的id為'kw'：
1
2
3
//不通過(guò)事件觸發(fā)直接調(diào)用
Notification.requestPermission()
//頁(yè)面無(wú)反應(yīng)
```Javascript //通過(guò)用戶主動(dòng)事件觸發(fā)來(lái)調(diào)用 document.getElementById('kw').onclick=function(){ Notification.requestPermission(); }; //頁(yè)面信息欄會(huì)彈出詢問(wèn)用戶是否允許顯示桌面通知
```
Notes:當(dāng)用戶同意之后，再次調(diào)用該方法則無(wú)效，即該方法僅對(duì)Notification.Permission不為'granted'的時(shí)候起作用
實(shí)例方法
1
Notification.close() //該方法允許通過(guò)代碼控制關(guān)掉notification
Notes: Notification 沒(méi)有實(shí)例方法show(),在Notification實(shí)例化的時(shí)候，瀏覽器就已經(jīng)自動(dòng)的去處理notification的顯示過(guò)程了。
3.3 代碼示例
以下代碼將展示如何使用webkitNotification和Notification來(lái)顯示桌面通知
3.3.1 webkitNotification
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
document.getElementById('notifyButton').onclick = function(){
//判斷瀏覽器是否支持notification
if(window.webkitNotifications){
//判斷當(dāng)前頁(yè)面是否被允許發(fā)出通知
if(webkitNotifications.checkPermission==0){
var icon_url = 'http://www.w3.org/';
var title = 'Hello HTML5';
var body = 'I will be always here waiting for you!';
var WebkitNotification = webkitNotifications.createNotification(icon_url, title, body);
WebkitNotification.show();
}else{
document.getElementById('requestbutton').onclick = function () {
webkitNotifications.requestPermission();
};
}
}else alert("您的瀏覽器不支持桌面通知特性，請(qǐng)下載谷歌瀏覽器試用該功能");
};
3.3.2 Notification
1
2
3
4
5
6
7
8
9
10
11
document.getElementById('notifyButton').onclick = function () {
if (window.Notification){
if(Notification.Permission==='granted'){
var notification = new Notification('Hello Notification',{body:"I hope that all the browser will support this\ function!"});
}else {
document.getElementById('requestButton').onclick = function (){
Notification.requestPermission();
};
};
}else alert('你的瀏覽器不支持此特性，請(qǐng)下載谷歌瀏覽器試用該功能');
};
相關(guān)評(píng)說(shuō)：
鶴峰縣展成： ______ 先吧message 處理一次,把里面的 回車 格式 轉(zhuǎn)化一次.
鶴峰縣展成： ______ 解決方案1: HTML5改變了開(kāi)發(fā)人員創(chuàng)建移動(dòng)Web應(yīng)用的方式,然而這并不是移動(dòng)開(kāi)發(fā)的終極目的.如果是,那么“我要為我的服務(wù)創(chuàng)建了一個(gè)本機(jī)應(yīng)用還是一個(gè)Web應(yīng)用程序?”這個(gè)問(wèn)題就沒(méi)有什么好討論的了,因?yàn)閃eb應(yīng)用必定會(huì)勝出....
鶴峰縣展成： ______ 什么是字體圖標(biāo) 字體圖標(biāo)顧名思義就是可以像字體一樣使用的圖標(biāo),你可以像定義字體一樣定義它,用font-size給他大小,用color給他顏色,用font-style給他樣式.他就像一個(gè)字體,只不過(guò)他的樣子是圖標(biāo)而已.就像這樣的圖標(biāo),他們并不是用...
鶴峰縣展成： ______ 是一個(gè)警告,腳本沒(méi)有錯(cuò)誤也會(huì)出現(xiàn),只是提醒開(kāi)發(fā)者:html5 canvas中,時(shí)間軸編號(hào)是從0開(kāi)始.而在swf中,時(shí)間軸編號(hào)是從1開(kāi)始.如:你在html5 canvas中,執(zhí)行this.gotoAndStop(5),實(shí)際停在時(shí)間線的第4幀上,而在swf中,則停在時(shí)間線的第5幀上.
鶴峰縣展成： ______ HTML5中的 video和audio這兩個(gè)標(biāo)簽是HTML5中專門(mén)用來(lái)播放視頻和音頻資源的標(biāo)簽.video標(biāo)簽和audio標(biāo)簽也提供了很實(shí)用的JavaScript API,允許創(chuàng)建自定義的控件.這兩個(gè)標(biāo)簽的用法我們通過(guò)下面這個(gè)示例來(lái)進(jìn)行說(shuō)明一下. <!doctype html...
鶴峰縣展成： ______ HTML5添加: 1.拷貝html智能感知文件以及svg文件到安裝路徑下的\Common7\Packages\schemas\html\目錄中. 2.修改注冊(cè)表[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\9.0\Packages\{1B437D20-F8FE-11D2-A6AE-00104BCC7269}\Schemas]添加新項(xiàng):Schema 24,添加3個(gè)字符串名值對(duì):轉(zhuǎn)載,僅供參考. File:html\xhtml5.xsd Friendly Name: xhtml5
鶴峰縣展成： ______ 這兩個(gè)例子其實(shí)道理是一樣的.JQuery將服務(wù)端傳過(guò)來(lái)的Json數(shù)據(jù)交予設(shè)置的success的回調(diào)處理,實(shí)際調(diào)用的時(shí)候應(yīng)該跟下面差不多:options.success(eval(data = resonseText)); // ...
鶴峰縣展成： ______ 你好:HTML5 WebSocket 你網(wǎng)上搜索這個(gè),很簡(jiǎn)單的,一學(xué)就會(huì).1:服務(wù)器推送(這個(gè)讓服務(wù)器加代碼)2:本地推送(這個(gè)需要原生語(yǔ)言的支持)
鶴峰縣展成： ______ 1、在布局文件中聲明WebView2、在Activity中實(shí)例化WebView3、調(diào)用WebView的loadUrl( )方法,設(shè)置WevView要顯示的網(wǎng)頁(yè)4、為了讓W(xué)ebView能夠響應(yīng)超鏈接功能,調(diào)用setWebViewClient( )方法,設(shè)置 WebView視圖5、用WebView點(diǎn)鏈接看了很多頁(yè)以后為了讓W(xué)ebView支持回退功能,需要覆蓋覆蓋Activity類的onKeyDown()方法,如果不做任何處理,點(diǎn)擊系統(tǒng)回退剪鍵,整個(gè)瀏覽器會(huì)調(diào)用finish()而結(jié)束自身,而不是回退到上一頁(yè)面6、需要在AndroidManifest.xml文件中添加權(quán)限,否則出現(xiàn)Web page not available錯(cuò)誤.
鶴峰縣展成： ______ HTML5是個(gè)新生的東西,在瀏覽器的兼容上還存在一定的局限性,對(duì)此我們?cè)谑箷r(shí)就遇到了很大問(wèn)題,那么我們可以通過(guò)下面這個(gè)簡(jiǎn)單的方法來(lái)檢測(cè)瀏覽器是否支持HTML5,從而提示用戶更新瀏覽器或者是使用對(duì)html5支持較好的瀏覽器,代碼...
