這篇文章主要講解了“如何實(shí)現(xiàn)html5桌面通知”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“如何實(shí)現(xiàn)html5桌面通知”吧！
html5桌面通知(Web Notifications)對(duì)于需要實(shí)現(xiàn)在新消息入線時(shí)，有桌面通知效果的情況下非常有用，在此簡(jiǎn)單介紹一下這個(gè)html5的新屬性。
這里有個(gè)不錯(cuò)的demo：html5 web notification demo
從上面這個(gè)demo中 我們就可以獲取所需要的基本核心代碼，如下：
代碼如下:
其中：Notification.requestPermission 這句代碼的功能就是向用戶請(qǐng)求權(quán)限允許。
通過(guò)以上的例子，基本思路我們已經(jīng)有了，首先加載文檔時(shí)，就向用戶請(qǐ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;
}
});
}
});
火狐下 驗(yàn)證是通過(guò)的，但是在chrome下總是出不來(lái)，后來(lái)發(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.
原來(lái)在chrome下是必須要用戶手動(dòng)觸發(fā)的，否則，chrome瀏覽器會(huì)無(wú)視這段的js
但是在我們網(wǎng)站里肯定不可能加一個(gè)按鈕或者超鏈接來(lái)顯式的讓用戶授權(quán)吧，好吧， 實(shí)際上這也不是個(gè)事情，我們可以在用戶經(jīng)常點(diǎn)的按鈕上順便處理下這個(gè)授權(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;
}
}
感謝各位的閱讀，以上就是“如何實(shí)現(xiàn)html5桌面通知”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)如何實(shí)現(xiàn)html5桌面通知這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
重慶分公司
重慶分公司
