這篇文章主要為大家介紹了html5桌面通知(Web Notifications)實例，對于進(jìn)行html5網(wǎng)站建設(shè)非常有用！需要的朋友可以參考下。

html5桌面通知(Web Notifications)對于需要實現(xiàn)在新消息入線時，有桌面通知效果的情況下非常有用，在此簡單介紹一下這個html5的新屬性。

這里有個不錯的demo：html5 web notification demo

從上面這個demo中 我們就可以獲取所需要的基本核心代碼，如下：

代碼如下:

<script>

var Notification = window.Notification || window.mozNotification || window.webkitNotification;

Notification.requestPermission(function (permission) {

// console.log(permission);

});

function show() {

var instance = new Notification(

"test title", {

body: " test message"

}

);

instance.onclick = function () {

// Something to do

};

instance.onerror = function () {

// Something to do

};

instance.onshow = function () {

// Something to do

};

instance.onclose = function () {

// Something to do

};

return false;

}

</script>

其中：Notification.requestPermission 這句代碼的功能就是向用戶請求權(quán)限允許。

通過以上的例子，基本思路我們已經(jīng)有了，首先加載文檔時，就向用戶請求權(quán)限，獲取權(quán)限后以后都so easy了。

代碼如下:

window.addEventListener('load', function () {

// At first, let's check if we have permission for notification

if (Notification && Notification.permission !== "granted") {

Notification.requestPermission(function (status) {

if (Notification.permission !== status) {

Notification.permission = status;

}

});

}

});

火狐下 驗證是通過的，但是在chrome下總是出不來，后來發(fā)現(xiàn)這樣一段話

代碼如下:

Not a Bug, Feature.

Desktop Notifications can only be triggered via a user action. Typing into the

JavaScript console has the same effect as raw javascript code embedded into the web

page (no user action). Typing the javascript into the location bar, however,

represents a user-action (the user is intentionally visiting a javascript link to

enable notifications, probably for sites that tend to use href="javascript：" instead

of onclick="".

I'm pretty sure this is a non-issue.

原來在chrome下是必須要用戶手動觸發(fā)的，否則，chrome瀏覽器會無視這段的js

但是在我們網(wǎng)站里肯定不可能加一個按鈕或者超鏈接來顯式的讓用戶授權(quán)吧，好吧， 實際上這也不是個事情，我們可以在用戶經(jīng)常點的按鈕上順便處理下這個授權(quán)就好，在chrome下是一次授權(quán)終身有用。除非你進(jìn)入設(shè)置把他禁了。

整合一下，代碼如下：

代碼如下:

function showMsgNotification(title, msg){

var Notification = window.Notification || window.mozNotification || window.webkitNotification;

if (Notification && Notification.permission === "granted") {

var instance = new Notification(

title, {

body: msg,

icon: "image_url"

}

);

instance.onclick = function () {

// Something to do

};

instance.onerror = function () {

// Something to do

};

instance.onshow = function () {

// Something to do

// console.log(instance.close);

setTimeout(instance.close, 3000);

};

instance.onclose = function () {

// Something to do

};

}else if (Notification && Notification.permission !== "denied") {

Notification.requestPermission(function (status) {

if (Notification.permission !== status) {

Notification.permission = status;

}

// If the user said okay

if (status === "granted") {

var instance = new Notification(

title, {

body: msg,

icon: "image_url"

}

);

instance.onclick = function () {

// Something to do

};

instance.onerror = function () {

// Something to do

};

instance.onshow = function () {

// Something to do

setTimeout(instance.close, 3000);

};

instance.onclose = function () {

// Something to do

};

}else {

return false

}

});

}else{

return false;

}

}

更多信息請查看IT技術(shù)專欄