Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to achieve html5 desktop notification", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn how to achieve html5 desktop notification bar!

Html5 Desktop Notification (Web Notifications) is very useful when you need to implement the desktop notification effect when a new message comes online. Here is a brief introduction to the new properties of this html5.

Here's a good demo:html5 web notification demo.

We can get the basic core code from the above demo, as follows:

The code is as follows:

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

}

Among them: the function of the Notification.requestPermission code is to request permission from the user.

Through the above example, we already have the basic idea: when we load the document first, we ask the user for permission, and after obtaining the permission, we will all so easy.

The code is as follows:

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

}

});

}

});

The verification under Firefox was passed, but it always couldn't come out under chrome, and later found such a passage.

The code is as follows:

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.

It turns out that under chrome, it must be triggered manually by the user, otherwise, the chrome browser will ignore this segment of js.

But it is certainly impossible to add a button or hyperlink on our website to explicitly allow users to authorize. Well, in fact, this is not a thing. We can just deal with this authorization on the button that users often click on. Under chrome, an authorization is useful for life. Unless you go into the setting and ban him.

To integrate, the code is as follows:

The code is as follows:

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

}

}

Thank you for your reading, the above is the content of "how to achieve html5 Desktop Notification". After the study of this article, I believe you have a deeper understanding of how to achieve html5 Desktop Notification, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.