html5桌面通知(Web Notifications)實例解析_html5教學技巧

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

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

從上面這個demo 我們就可以取得所需的基本核心程式碼，如下：

複製程式碼

程式碼如下:

<script><br /> var 程式碼如下:<br /><br /><script><br /> var NotNotation . || window.mozNotification || window.webkitNotification;<br /> <br /> Notification.requestPermission(function (permission) {<br /> // console.log(permission);<br /> });<br /> // console.log(permission);<br /> });<br /> << function show() {<br /> var instance = new Notification(<br /> "test title", {<br /> body: " test message"<br /> }<br /> );<br /> <br /> instance.onclickc. = function () {<br /> // Something to do<br /> };<br /> instance.onerror = function () {<br /> // Something to do<br /> };<br /> instance.onshow = function () {<br /> // Something to do<br /> };<br /> instance.onclose = function () {<br /> // Something to do<br /> };</script>

return false;
}; return false; };

return false;

};

return false;

}; return false; }

 

其中：
Notification.requestPermission 這句程式碼的功能就是向使用者請求權限允許
。

透過以上的例子，基本思路我們已經有了，先載入文件時，就向使用者請求權限，取得權限後以後都so easy了。

複製程式碼

程式碼如下:

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

// At first, let's check if we have permission for notification if (Notification && Notification.permission !== "granted") { Notification.requestPermission(function (statussion(function) {if (Notification.permission !== status) { Notification.permission = status; }

});

}

});


火狐下 驗證是通過的，但是在chrome下總是出不來，後來發現這樣一段話

複製程式碼

程式碼如下:

Not a Bug, Feature.

代碼如下:

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 javascript code embedded into the web

page (no user javascript code 是 Typing) inton, java script , java. , 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下是必須要使用者手動觸發的，否則，chrome瀏覽器會無視這段的js 但是在我們網站里肯定不可能加一個按鈕或者超鏈接來顯式的讓用戶授權吧，好吧， 實際上這也不是個事情，我們可以在用戶經常點的按鈕上順便處理下這個授權就好，在chrome下是一次授權終身有用。除非你進入設定把他禁了。 整合一下，程式碼如下： 複製程式碼程式碼如下:

function showMsgNotification(title, msg){
var Notification = window.Notification || window.mozNotification || window.webkitNotification;

if (Notmation &misification &misification &misification "g==ification"n (Notification &misification). ) {
var instance = new Notification(
title, {
body: msg,
icon: "image_url"
}
);
// 要做的事情
};
instance.onerror = function ( ) {
// 要做的事情
};
instance.onshow = function () {
// 要做的事情
// console.log(instance.close);
setTimeout(instance.close, 3000);
};
instance. onclose = function () {
// 要做的事情
};
}else if (Notification && notification.permission !== "denied") {
Notification.requestPermission(function (statussion(function (statussion(function) ) {
if (Notification.permission !== status) {
Notification.permission = status;
}
// 如果使用者說好的
if (status === "granted🎜> // 如果使用者說好的
if (status === "granted ") {
var instance = new Notification(
title, {
body: msg,
icon: "image_url"
}
) ;
// 要做的事情
};
instance.onerror = function () {
// 要做的事情
};
instance. onshow = function () {
// 要做的事情
setTimeout(instance.close, 3000);
};
instance.onclose = function () {
// 要做的事情
};

}else {
return false
}
});
}else{
回傳false;
}
}

}