html5桌面通知(Web Notifications)實(shí)例解析
發(fā)布時(shí)間：2014-07-07 11:11:28 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要為大家介紹了html5桌面通知(Web Notifications)實(shí)例，對(duì)于進(jìn)行html5網(wǎng)站建設(shè)非常有用！需要的朋友可以參考下
html5桌面通知(Web Notifications)對(duì)于需要實(shí)現(xiàn)在新消息入線時(shí)，有桌面通知效果的情況下非常有用，在此簡(jiǎn)單介紹一下這個(gè)html5的新屬性。
這里有個(gè)不錯(cuò)的demo：html5 web notification demo
從上面這個(gè)demo中 我們就可以獲取所需要的基本核心代碼，如下：
復(fù)制代碼
代碼如下:<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>
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 這句代碼的功能就是向用戶請(qǐng)求權(quán)限允許。
通過以上的例子，基本思路我們已經(jīng)有了，首先加載文檔時(shí)，就向用戶請(qǐng)求權(quán)限，獲取權(quán)限后以后都so easy了。
復(fù)制代碼
代碼如下: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;
}
});
}
});
// 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;
}
});
}
});
火狐下 驗(yàn)證是通過的，但是在chrome下總是出不來，后來發(fā)現(xiàn)這樣一段話
復(fù)制代碼
代碼如下: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.
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下是必須要用戶手動(dòng)觸發(fā)的，否則，chrome瀏覽器會(huì)無視這段的js
但是在我們網(wǎng)站里肯定不可能加一個(gè)按鈕或者超鏈接來顯式的讓用戶授權(quán)吧，好吧， 實(shí)際上這也不是個(gè)事情，我們可以在用戶經(jīng)常點(diǎn)的按鈕上順便處理下這個(gè)授權(quán)就好，在chrome下是一次授權(quán)終身有用。除非你進(jìn)入設(shè)置把他禁了。
整合一下，代碼如下：
復(fù)制代碼
代碼如下: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;
}
}
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;
}
}
相關(guān)文章
Html5中的桌面通知Notification的實(shí)現(xiàn)
這篇文章主要介紹了Html5中的桌面通知Notification的實(shí)現(xiàn)的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-25- 這篇文章主要介紹了HTML5實(shí)現(xiàn)桌面通知 提示功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-10-11
HTML5實(shí)現(xiàn)Notification API桌面通知功能
Notification生成的消息不依附于某個(gè)頁面，僅僅依附于瀏覽器。 下面通過本文給大家介紹HTML5實(shí)現(xiàn)Notification API桌面通知功能，需要的朋友參考下吧2016-03-02突襲HTML5之Javascript API擴(kuò)展5—其他擴(kuò)展(應(yīng)用緩存/服務(wù)端消息/桌面
前面已經(jīng)總結(jié)了主要的API擴(kuò)展(應(yīng)用緩存/服務(wù)端消息/桌面通知),下面的幾個(gè)只有在特定的場(chǎng)合才能發(fā)揮它的潛質(zhì)，無一例外，IE均不支持,桌面通知目前只有Chrome支持,感興趣的朋2013-01-31
HTML5中的Web Notification桌面通知功能的實(shí)現(xiàn)方法
這篇文章主要介紹了HTML5中的Web Notification桌面通知功能的實(shí)現(xiàn)方法,需要的朋友可以參考下2019-07-29
